Category Archives: Applications

Embedding Mastodon posts in WordPress

I’m someone who has made their escape from Twitter, mostly posting to a mix of Mastodon, Threads and Bluesky.

It was really easy to embed a Twitter post in WordPress: just paste the URL into the block editor and it’d do the hard work for you.

That doesn’t work for Mastodon, possibly because it’s so many different domains (servers) that WP can’t figure out when it’s a Mastodon post. Pasting the URL just displays… the URL.

Mastodon does have a function to get the embed code, which you can put into a WP Custom HTML block… but that didn’t work for me either. On my personal blog with its modified Twenty Twenty theme, the Mastodon post appeared hard against the left hand side of the browser window, out of whack with the rest of the post text.

With some experimentation and Googling, I discovered that tweaking the embed code slightly made it better.

Basically in the HTML, edit the blockquote style attribute margin and change it from 0 to auto. That made it appear in line with the rest of the post.

I’d love to show you it here, but it turns out the even older theme we’re using on geekrant.org.right now can’t handle them at all. Attempting to save a post with embedded Mastodon HTML results in a Save error. (And I don’t have time right now to get screen grabs.)

Hmm, might be time for a theme update.

Anyway, hope this helps someone else out there (and remind me of what I need to do next time).

WordPress Collapse-o-matic plugin retired

For anybody using the very handy Collapse-o-matic plugin on WordPress, according to a (slightly vague, and difficult to find) support post, it’s being retired due to ongoing security issues.

The plugin provides an expandable section in blog posts.

Fortunately WordPress now supports this natively via the Display block type. Some people are hunting around for other plugins with additional functionality, but Display looks good to me.

One issue I had was finding which blog posts used Collapse-o-matic.

The solution I found was in the WordPress admin posts page, search for [expand

Then it’s hopefully easy enough to move the relevant content into a Display block, and deactivate the plugin.

For anybody else using WordPress, this is probably a nice reminder to review WP plugins and check for any other vulnerabilities that haven’t been widely advertised.

WordPress issues and Cloudflare

Cloudflare will speed up one web site for free. I’ve used it a fair bit over the years for my main blog, and it seems to have been pretty good.

Recently I struck some issues:

  • I could not save a post with the word “Casin0” in it. (actually spelt with an “o”; I was referencing the town in NSW.)
  • Sporadic “Updating failed. you are probably offline” errors from WordPress when trying to save (existing) posts
  • Sporadic image upload failures

On the first I temporarily gave up and spelt it with a zero. This is still unresolved, and it affects this blog too. It’s probably a web host issue – a security filter somewhere.

But while researching the second issue, I saw a reference to Cloudflare, and tried turning it off. It resolved it immediately. I suspect it was the cause of the third problem too.

Now I’ll need to more thoroughly investigate WordPress caching. The W3 Total Cache free plugin seems to do an okay job.

UPDATE: And then the error started coming back, but only for saving new posts – not editing existing ones. It seems I need to keep investigating.

One problem I’ve had is WP Multi-site seems a bit dodgy, at least with my setup. There are instructions for turning it off here.

Still worth trying turning off Cloudflare if you’re having issues though.

On a Zoom/Teams call? Turn off your sounds

I think a few people need to know this:

If your computer is set up with audible alerts for email and other events, unless you’re on mute, sounds will blast out for everybody else on a group Zoom or Teams call with you.

This will block out your voice (and anybody else’s) and is very jarring.

The easiest way to avoid this is to turn off these system sounds.

Windows:

  • Search for “Change System Sounds” – or go via Control Panel to Sounds
  • Select the Sound Scheme: “No Sounds”

I’m not a Mac OSX user, but it looks like the option is in System Preferences / Sounds – you need to turn “Play user interface sound effects” off.

These settings will let media and audio calls play as normal, but otherwise the computer should shut up when a calendar reminder pops up, or an email or Slack message arrives.

Making text and lines bolder in Paint.Net

I use Paint.Net quite a lot for mostly minor editing of pictures, including scans.

Scans of text and diagrams tend to come off the scanner with very thin text/lines, so I was wondering how to make them bolder. Thanks to this forum discussion I found a quick one-step way of doing it, without requiring any 3rd party plugins.

From the Effects menu, choose Noise > Median

Set the Percentile to 0, and the Radius to a low value such as 1 or 2. Depending on the file, a slightly larger value might work too.

That’s it. You can adjust the Brightness and Contrast too, but the Median tool makes a huge difference to readability of these scans.

WordPress’s autosave freezes up

I’m glad it’s not just me: WordPress’s Gutenberg editor is very nice, but it has an autosave feature which gets stuck regularly.

Very annoying. If you browse away, you lose changes. You can’t do a conventional Save Draft while the autosave is stuck.

It’s not constant, so I’m not really sure how to fix it. But there are a couple of workarounds.

1. Noted on this thread: add this to wp.config:

define(‘AUTOSAVE_INTERVAL’, 86400);

(that’s a full day, so it should rarely be a problem then)

2. This method seems to work for me:

  • Press Ctrl-A twice, to highlight the entire post text
  • Ctrl-C to copy it to the clipboard
  • Paste it into a text editor. You’ll see the WordPress markup, which shows <!– wp:paragraph –> at the start of each paragraph.
  • Jump out of the draft. Ignore the warning about losing your work
  • Go back into it. If it’s like what happens with mine, anything since the previously successful draft save will have been lost
  • Ctrl-A twice to highlight the entire post text, then Delete it all
  • Then Paste from your copy in the text editor. The entire post should be back, including references to articles

Okay that’s a lot of steps, but for an occasional problem, seems like a reasonable workaround, especially if fiddling with the wp.config isn’t your thing.

Comment numbering on WordPress

One thing I find quite handy on my blog is comment numbering.

I had it for a little while ages ago, and people liked to be able to say they were responding to Comment Number Whatever.

Alas, whatever mechanism I had been using stopped working.

If you Google for it, you’ll find any number of hints and tips pages from about 2013 which refer you to Greg’s Threaded Comment Numbering plug-in… which is no longer maintained, and no longer works with new versions of WordPress.

Thankfully I found a way that works – and it’s actually simpler.

The new ability to add custom CSS into Themes means you can add this:

li.depth-1 {
    list-style-type: decimal;
}

There are further tweaks you can do if you’re using threaded comments, but the above works for me.

One catch: On some templates, a comment by the blog author is highlighted. This may suppress the numbering for that comment (so it misses out). It’s doing that on my personal blog template, but not here on geekrant. I’ll look for a fix for that.

Cheap passport photos using The Gimp and 10c printing

Australian Passport requirements are specified by Border Force.  The step that’s most avoidably expensive is the generation of compliant photographic representation of the individual (at $17-$20 per person).

The fun part is that the published instructions talk about “face size” (the skin-visible bit of your head, so from your hairline down to your chin) needs to be between 32mm and 36mm; to allow for the vagueries of conversion we’re going to shoot for exactly 34mm.  The passport application form talks about “chin to crown measurement” being in this range, and the bit where you stick the photo on implies that the chin-to-hairtop has to fit in the image; which one will be enforced is up to the interviewing officer and may lead you to tears.  I ended up taking two scaled images and let the officer choose.  The top we’ll measure to I’ll call “head top”.

Take your appropriately posed and positioned photograph. Don’t crop too aggressively: there’s plenty of pixels in modern photographs, and you can’t add “more person” if you got the ratios wrong.

Load the photo into the Gimp.

Find out how many pixels there are from the chin to headtop by picking Tools | Measure and measuring as close to vertically as you can between these two features. I got 1573 on my image.

Whip out your calculator and divide this by 68% (34mm face height/50mm image height), getting you the number of pixels high your image needs to be to make 50mm – 2313 in my case. The width is 80% (40mm image width/50mm image height) of this number – I get 1850.  Photographs nowadays typically use square pixels.

Now for the image we’re going to paste into. Standard photographs are 6″x4″, or about 152mm x 101mm – let’s call it 150×100. So select File | New, with a size double the height of the cutout, and a width of triple the height of the cutout – mine was 4626 x 6939.

Now we’ll put some guidelines on to help us place accurately. Select Image | Print Size... and put in 6″x4″ (Once you put in the 6″, the 4 should magically fill itself in). Pick View | Show Grid and View | Snap to Grid. Select Image | Configure Grid... and set up a 5mm x 5mm grid. There should be a lot of 5mm boxes on your image now.

Switch to your photograph.

Now check Windows | Dockable Dialogs | Tools Options has got a dialog up, and pick Tools | Selection Tools | Rectangular Select. On the options dialog (which may need resizing so you can see all the options), check Fixed and pick Size from the accompanying drop-down. Enter the dimensions you’ve calculated.

Now select your face, and copy it. Switch to the new image, and paste you image. Position it, and paste in your face. You ought to fit three across, and two down. Six passport photos for 10c! Yay!

Suppose you’re doing two different faces on the one photograph (or more!). Once you’ve gotten as far as doing the calculations for the second image (what are the chances you’ll get the same framing of the face?) and then copying the face, stop. Instead of pasting it into the printable image, pick Edit | Paste As | New Image. Pick Image | Scale Image, ensure Width and Height are locked with a chain symbol, then enter the Height of your original face (2313 in my case). If everything is going hunky-dory, the calculated width will match the new width in the dialog. Press the Scale button, Select | All, copy the image and paste it into your printable image, then position appropriately.

Now, to print out you’ll need a JPEG. Select File | Export, type in a filename ending in .jpg and you’re set. Take to your local Officeworks/Harvey Norman, and 10c later you’ve got your Australian passport photos.

Compress PDF files

Just a quick mention of a cool online tool I found…

I was about to email off a PDF (that I hadn’t created myself) to a discussion list when I noticed it was 6 Mb… which seemed a tad excessive.

Digging around I found SmallPDF, which can shrink them down. It got down to 1.2 Mb, with no noticeable loss of detail/fidelity.

SmallPDF is free for two files per hour, with no watermarks, or USD$6 a month for unlimited, and they have a few other related PDF functions such as file conversions.

Worth a look if you need to do something like this.

Comment spammers try to get clever

On my personal blog, on a post about the Melbourne public transport smartcard Myki, this comment popped into the moderation queue:

I found another very uefsul behaviour this morning.I don’t touch off when I get home at night. While, this seems weird how do they know I got off in Zone 1 (for which I have a pass) and didn’t travel into Zone 2 (for which I should be charged Money)? But, the fare manual says that if you have a MyKi Pass and you touch on in a zone for which that pass is valid (Parliament in my case) then there is no default fair.So, every morning when I touch on, it tells me deducting fare for previous trip . Which is $0.00. Cool.This morning I forgot to touch on some power issues on our line, got to chatting with the Station Hosts, just forgot. When I got to Parliament, I fully expected the gates to deny me egress and I’d have to do the silly thing where you act exasperated and they just wave you through the end gate even though you’re holding nothing but a wallet in your hand (MyKi works while in the wallet).BUT, it let me through. Seems that it’s happy enough that I started a trip (at Parliament) last night, spent 16 hours travelling and ended my trip back where I started. So it let me out basically a touch off of the trip home last night.Bizarre. But uefsul.

At first glance, it looked on-topic. But I was suspicious because the user link was to facebook.com/profile.php?id=XYZ (I’ve removed the ID) — and it came in the middle of a bunch of other (less-relevant) comments linking to similar URLs.

Googling around for key words in the comment, I found that it’s a copy of a comment from a completely different blog, with various misspellings inserted, and paragraph breaks removed. The original:

I found another very useful behaviour this morning.

I don’t touch off when I get home at night. While, this seems weird – how do they know I got off in Zone 1 (for which I have a pass) and didn’t travel into Zone 2 (for which I should be charged Money)? But, the fare manual says that if you have a MyKi Pass and you touch on in a zone for which that pass is valid (Parliament in my case) then there is no default fair.

So, every morning when I touch on, it tells me “deducting fare for previous trip”. Which is $0.00. Cool.

This morning I forgot to touch on – some power issues on our line, got to chatting with the Station Hosts, just forgot. When I got to Parliament, I fully expected the gates to deny me egress and I’d have to do the silly thing where you act exasperated and they just wave you through the end gate even though you’re holding nothing but a wallet in your hand (MyKi works while in the wallet).

BUT, it let me through. Seems that it’s happy enough that I started a trip (at Parliament) last night, spent 16 hours travelling and ended my trip back where I started. So it let me out – basically a touch off of the trip home last night.

Bizarre. But useful.

It seems the spammers are trying to get a bit more clever at sneaking their comment posts past moderators.

I still don’t know why, given WordPress has used NoFollow on their comment links for about ten years now.

Flickr’s new HTML code embedding – how to remove the header and footer

Flickr has altered its default embed HTML to include a header and footer, which includes Flickr branding and the title of the picture.

PT in the Sense8 titles 01

Sometimes I suppose this is okay, but sometimes I just want the picture.

Fortunately it seems to be relatively easy to get rid of. In the example above:

<a data-flickr-embed="true" data-header="true" data-footer="true" href="https://www.flickr.com/photos/danielbowen/19038778583/in/dateposted/" title="PT in the Sense8 titles 01"><img src="https://farm1.staticflickr.com/313/19038778583_3149e7e01a.jpg" width="500" height="282" alt="PT in the Sense8 titles 01"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

…remove the data-flickr-embed, data-header, and data-footer attributes of the a href, and remove the script tags, like this:

<a href="https://www.flickr.com/photos/danielbowen/19038778583/in/dateposted/" title="PT in the Sense8 titles 01"><img src="https://farm1.staticflickr.com/313/19038778583_3149e7e01a.jpg" width="500" height="282" alt="PT in the Sense8 titles 01"></a>

The result should be just the photo, with the usual linking back to Flickr.

PT in the Sense8 titles 01

It’d be nice if they made this a built-in option when generating the HTML code.

Of course, it also makes me ponder if I should be finding another photo host.

Update 2015-07-20: They seem to have modified their default embedding code a bit so the branding and picture details now only appear over the photo when you mouse over it. Not so objectionable.

PT in the Sense8 titles 01

Flickr’s modified code now excludes data-header="true" data-footer="true" which presumably added the header and footer.