Width and height of photos on Photos page?

Making the upload files available at the time Hugo is running isn’t possible right now. Sometimes the images are there, for example when you click the “Rebuild” button on the logs page it brings everything together including all images. But as an optimization, Micro.blog frequently recreates the Markdown files and runs with no images present, since they have already been uploaded to the static servers that host the blogs.

If anyone’s curious, I wrote a blog post last year about some of this: Manton Reece - How does Micro.blog even work?

It’s a little out of date (things are even better now!) but long story short, we currently run Hugo on 3 servers and randomly pick one, so there would be overhead to having all images on all servers at all times for all users. Mounting from a remote server would also potentially create another single point of failure which we try to avoid. This might be too much information, but maybe it helps explain why it currently works this way. :slightly_smiling_face:

Back to the real issue… When an image is uploaded, we do store the width/height in a separate database, so we have the data. The Micro.blog apps also usually include width/height attributes in HTML.

One thought I had is that I assume this data is most valuable for the “Photos” page, so perhaps more metadata could be made available to that page only, without affecting much else.

1 Like

No, not too much information at all, and it makes total sense. Thanks for the explanation.

1 Like

Can you share how you are doing this under the current setup?


But it involves some knowledge of CSS and Flexbox. The code for the current version is available on GitHub. It’s a large flex container where the child element have a fixed height (in my case 40vh) and an “auto” width. Since we’re using flexbox we can allow these children to “grow” to fill all available space. And finally, we set the “object fit” property to “cover” so that the images gets cropped rather than stretched when the elements are resized.

And if you want to inspect the final result. You’re more than welcome to inspect the source code at my website: johanl.se.

Thanks a lot but I don’t think I know enough CSS and Flexbox to make sense of it but it looks really nice on your website. I was wondering how I could edit the default MB template (layouts/_default/list.photoshtml.html) to get that layout.

I’ve rolled out a change inspired by @kottkrig’s feedback. In the front matter, there is now a new “photos_with_metadata” with 3 fields: “url”, “width”, and “height”. I haven’t done much with this yet other than to confirm it’s working, but hopefully this opens up some more custom theme and plug-in possibilities.

Do you mean the plugin you had created works now?

No, the plug-in is still a work in progress, but it should be possible to do correctly now.

Huge thanks!

By using the new width and height properties I finally got rid of the jankiness during initial page load. And as a bonus, it also fixed a lingering Safari layout bug where the image sizes wouldn’t update properly in the flex layout.

Before the update:

After the update:

Excellent, that looks great! I’ll try to work something like into the Masonry plug-in I was experimenting with. If you want to share more about how you did this, I’m sure folks would be interested!

I wanted to mention one other thing because I myself had forgotten it works this way. Micro.blog gets the width and height for a photo when updating the timeline, so it’s possible in some cases that the values will be temporarily set to “0” until the timeline updates. This also makes testing with a -test blog more difficult because that feed is unlikely to be set for the timeline. I’ll look into improvements later to remove this limitation.

Excellent! Count me in as “interested” if, as Manton said, you can share more for the masonry plugin-in.

I’m planning on writing an announcement post on my blog but until I come around to it: Here is an attempt at bundling the photo grid as a Micro.blog plugin.

It’s been tested and verified to work with the Marfa theme but should hopefully work with other themes as well.

Edit: Announcement post is up.

1 Like

This is awesome! Going to try it now. Do we have to remove any code from the default list.photoshtml.html page first or will it override any code that already formats it a certain way?

At the moment it will replace the full list.photoshtml.html file. So I believe it will be incompatible with most other photo page plugins.

The width/height values don’t seem to get populated on my test blog. Doing an export confirms that they’re not available on any posts.

Is this feature somehow limited to only work on the main blog?

That’s right, the width and height are currently set for posts that appear in the Micro.blog timeline, so it doesn’t work for test blogs. I’m looking into removing that limitation.

1 Like

Thanks for the info. Good to know that it wasn’t just in my head and I’m not going crazy. :blush:

An additional metadata field that would be a great addition to the photos_with_metadata array is an alt field with the alt text of the image.

Good idea about alt, I can add that.

I’m testing a change to provide more consistent width/height values, even for test blogs. I should have it rolled out in the next day or so.


Great. It worked perfectly on my main blog which uses a custom theme but strangely doesn’t work on my photos blog which is a customized Kiko theme. Thanks a lot for creating this plugin.