Customize `img` rendering using Markdown Render Hooks

Hosting on Micro.blog
#1

I’m moving a conversation from the timeline over here for posterity and easier code sharing.

Is it possible to automatically use Micro.blog’s image scaling feature for all my images? Right now, there’s a lot of manual labor prepending https://micro.blog/photos/600x/to each image URL.

– @g (paraphrased and translated from Swedish by me).

So Gunnar wants all his image URLs prefixed with https://micro.blog/photos/600x/ automatically. And that’s possible! But you have to use Markdown syntax when adding images in your posts. Markdown syntax looks like this:

![A cute kitten.](https://placekitten.com/1080/1080)

By default, Micro.blog will take that Markdown and render HTML looking like this:

<img src="https://placekitten.com/1080/1080" alt="A cute kitten.">

But thanks to Hugo and something called Markdown Render Hooks we can override that behavior and render whatever we want. In this case, Gunnar wants HTML like this:

<img src="https://micro.blog/photos/600x/https%3A%2F%2Fplacekitten.com%2F1080%2F1080" alt="A cute kitten." />

Let’s implement that!

How to use Markdown Render Hooks in Micro.blog to customize the rendering of img elements

  1. Make sure you have a Custom theme set for your blog.
  2. Navigate to Design → Edit Custom Themes and click on your custom theme.
  3. Click New Template.
  4. Enter the following path and filename layouts/_default/_markup/render-image.html. Naming is important, make sure it’s correct.
  5. As content, paste the code snippet below and then click Update Template.
  6. You’re done! Give your site time to rebuild. From now on, all images embedded with Markdown syntax should have the https://micro.blog/photos/600x/ prefix.

Content of layouts/_default/_markup/render-image.html:

<img src="{{ (print "https://micro.blog/photos/600x/" (.Destination | urlquery)) | safeURL }}" alt="{{ .Text }}" />

This is a bare-bones example. There are a lot of bells and whistles you could potentially add, like support for width and height attributes, lazy loading, and so on.

3 Likes
#2

Thank you @sod! My first one: - gunnar.se
And 173 KB is a lot better than 2.6 MB. And you get the full image if you click it.
Money is in the bucket at Stripe Checkout

1 Like
#3

Nice twist adding a link to the full-resolution image. And thanks for the donation, much appreciated. :pray:

1 Like
#4

For another example of this, I implemented render hooks a while back in the glightbox plugin. I originally defaulted to using thumbnails, but ultimately didn’t like the quality that came out of Micro.blog’s resizing.

#5

This is great! By the way, wherever you use a URL like “micro.blog/photos/…” you can replace it with “cdn.micro.blog/photos/…” and it will automatically cache the image in the content-delivery network, for faster serving around the world.

3 Likes
#6

The twist was unintentionally, but was really nice. Next step is to show EXIF Data in Hugo

#7

That’s a cool idea! Unfortunately, that won’t work as @manton strips away all EXIF data when uploading photos to Micro.blog.

#8

Yes I just read about it here Width and height of photos on Photos page? - #6 by kottkrig

#9

So what does that 600x business actually do to how the phot appears?

#10

It scales the image at the provided URL to be 600 px wide. The original photo @g posted above is 1800 px wide, so adding the prefix will reduce the file size quite a lot. You can change 600x to any value that suits your needs. Or not use this at all, if you have no use for scaled down images. :blush:

#11

That makes sense. Thanks.

#12

My 2 cents, it’s usually a good idea to have the size be at least 2x what you expect most people to view it as, so it looks nicer on modern phone screens that are high resolution. The Micro.blog timeline currently defaults to scaling down to 1000 pixels wide. The client apps usually resize to 1800 pixels before uploading, then add a width tag of 600 making it roughly 3x the display size, but it’s not an exact science with so many different screen sizes.