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.
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.
Thanks for the info. Good to know that it wasn’t just in my head and I’m not going crazy. 
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.
Do you have an url to the photo blog? I might be able to see if there’s anything my plug-in is doing wrong that is interfering with the Kiko theme.
Sure. Here it is. Currently, I’m using some CSS to align the photos in a grid (similar to what your plugin does) but even when I remove that CSS and use your plugin, it simply shows all the photos one after the other instead of grid/masonry.
Ideally, I would want to use the masonry layout on the front page of my photo blog but I can work on that later.
Odd. Do you perhaps have some other grid-like plug-in installed on that blog? The grid-code that is active right now doesn’t look like the code from my plug-in.
Installing the plug-in together in combination with an unmodified Kiko theme seems to work alright on my test blog.
Nope. No plugins apart from Amit’s Stats plugin that I also have on my other microblog and the Kikos plugin. The only modificiations I have done to Kiko is to remove all linkbacks to my Micro.blog profile.
I have now removed all custom CSS and made the list.photoshtml.html exactly the same as my other blog where it works. But nope, you can check it again.
The width and height should now be included on all posts, even test blogs. It’ll update the next time the blog is published such as after a new post or edit. This new plug-in looks great in my testing with Marfa. Didn’t quite work in the Default theme, so I expect some tweaks are needed. Thanks again @kottkrig!
It seems like the default theme don’t include the files that themes specify in plugins.json. I made a PR based on how I’ve seen other themes implement these tags: Add support for plugins by kottkrig · Pull Request #2 · microdotblog/theme-default · GitHub
Thanks! I’ve merged that change in.
