That’s a cool idea! Unfortunately, that won’t work as @manton strips away all EXIF data when uploading photos to Micro.blog.
So what does that 600x
business actually do to how the phot appears?
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.
That makes sense. Thanks.
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.
Tried this on my MIcroblog but it doesn’t seem to work. The URLs seem different to me. They’re as follows:
https://cdn.uploads.micro.blog/102448/2023/840da10dce.jpg
Has something changed since this post was discussed back in December? Would changing the markup to something like this work:
<img loading="lazy" src="{{ (print "cdn.uploads.micro.blog/600x/" (.Destination | urlquery)) | safeURL }}" alt="{{ .Text }}" />
Markdown render hooks were introduced in Hugo 0.62. You’re probably on Hugo 0.54. Navigate to Design and change Hugo version to 0.91. After your site has been rebuilt, your custom render hook should work. You should not have to change anything in the render hook.
The URL you’re seeing in the rendered HTML of your page is caused by the setting Use content delivery network for images (also on the Design page). The original URL for that photo is https://qrk.social/uploads/2023/840da10dce.jpg
.
Thanks @sod, I was already on 0.91 and I’m still not sure if it’s working correctly or not. The resulting image is smaller than the source, but it still isn’t 600px, and my addition of loading="lazy"
to the render doesn’t seem to be present either.
It’s possible that the change to using the CDN by default means that this no longer works. I believe you can turn off the CDN by going to the Design page and un-clicking “Use content delivery network for images”.
@manton does the CDN make the resizing endpoint fail?
Disabling the CDN didn’t work either.
CDN probably doesn’t have anything to do with this.
Your custom rendering hook is not running, as you’re not seeing the loading
attribute. The question is why it’s not running. It’s always a challenge to troubleshoot from the outside, but here are some things to try.
- Do a full rebuild of the site. Sometime, making changes to a custom theme doesn’t trigger a rebuild, and you could, in theory, be looking at old versions of your pages.
- When doing the rebuild, keep an eye on the logs for any errors or hints of anything going wrong.
- Make sure the right custom theme is selected on the Design page.
- Double-check that the name of the template is
layouts/_default/_markup/render-image.html
. - If you’ve made any changes to my original template at the top of this thread, revert them.
- If you have more than one blog (or a test blog) – make sure you’re doing all this on the right one.
We will figure this out, sooner or later.
Update: I just followed my own instructions in the top post with success. So at lest we know, “it works on my machine” (or Manton’s servers, rather). If there’s any comfort in that.
Well this is good news - at least we know it works and it’s just me being an idiot somewhere along the line! (sorry about that)
OK, so I’ve confirmed the following:
- The file path is
layouts/_default/_markup/render-image.html
- The contents of that file are below (I removed my customisation to add
loading="lazy"
- My custom theme is selected
- I’m using v0.91 of Hugo
<img src="{{ (print "https://micro.blog/photos/600x/" (.Destination | urlquery)) | safeURL }}" alt="{{ .Text }}" />
Unfortunately, I don’t know how to trigger a full rebuild I’m afraid. I had a look through the UI, but I can’t find an option for that. I published a test post with an image to see if it worked, wouldn’t that trigger a rebuild?
Thanks!
Sorry, I meant to link that text but forgot before publishing. Rebuild button and logs can be found here.
I did a full rebuild, but it looks like it still isn’t working.
Okay, we will continue the investigation. What about the logs, are they all good? No errors or warnings during the rebuild?
Also, this might come off as a bit of a “have you tried turning it off and on again” kind of question, but just to be on the safe side I’m asking it anyway: are you using Markdown syntax in your blog posts? Like this:
![](https://qrk.social/uploads/2023/840da10dce.jpg)
I am, but weirdly I just went to edit my latest post with an image attached, to show you and the image is embedded with HTML:
Lovely walk in the wood behind our house this evening.
<img src="https://qrk.social/uploads/2023/b7a4ee8682.jpg" width="600" height="450" alt="">
I did, definitely, one million percent use markdown. Pinky promise.
Okay, if you change it to Markdown syntax, does your custom Markdown Render Hook apply then?
YES! That’s it! Here’s what I see now:
<img src="https://micro.blog/photos/600x/https%3A%2F%2Fcdn.uploads.micro.blog%2F102448%2F2023%2Fb7a4ee8682.jpg" alt="">
It’s down from a couple MB to ~120KB…this is perfect!
Question now is, why is it inserting the images as HTML when I post via the WebUI or the app? I created a couple of test posts, one from the WebUI and other from the iOS app. Both times it parsed the images as HTML in the posts:
<!-- From WebUI -->
<img src="https://qrk.social/uploads/2023/de2a46ba89.jpg" width="600" height="450" alt="">
<!-- From iOS app -->
<img src="https://qrk.social/uploads/2023/4d2ded0215.jpg" width="600" height="600" alt="">
If I then edit the post source to be markdown, it work as expected.