It would be great if the /photos page is styled like in the attachment.
Currently, in the defaults MB view, there’s a lot of white space if you post a mix of landscape and portrait images. Also, sometimes I do custom crops that otherwise wouldn’t be obvious but are in the photos view. See below:
You can do smaller grid gaps with CSS, but for support for mosaic/masonry-style tiling, you’d likely need an additional javascript library like this.
This is awesome! How can I implement this on the MB blog?
@cdevroe has done something similar on his Cypress Theme so maybe it is not difficult?
Yeah, Cypress is very close to what you want, I think. Maybe it would be best to extract the Cypress photos page template into a plug-in that could be used in any theme?
Masonry looks very nice too. I might try to experiment with that.
That would be the perfect solution. I tried looking in the template code but beyond me.
Pinging @sod 
Count me in if you want a beta-tester.
I took a first pass at a plug-in using the Masonry library, but the layout gets jumbled if Masonry doesn’t yet know the width/height of the images. I think it will need more work before it’s usable.
The repo is here if anyone wants to run with it: https://github.com/microdotblog/plugin-masonry
Thanks, Manton. Let’s hope someone well versed in plugins can take this further. I’m sure we will see more Photos pages included in the Menu if this plugin is created.
I believe CSS Grid can get you some, if not all, of the way there. Just wrap the whole thing in a tag like div and give it a class name like gallery, then in your CSS add something like this:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px; /* can be any value you’d like */
}
The auto-fit parameter fits as many photos to whatever the width of the container is to a minimum of 200px before it wraps around to the next row.
Update
Adding the fact CSS Grid will support masonry layouts at some point in the future. No JS libraries needed.
I wish I could but you cannot edit the Photos page. It is generated automatically and is something Manton will have to enable.
It’s actually in the custom template list.photosarchive.html and can be edited there I believe.
My current custom theme doesn’t have that file so I assume it will pick up the one from the Blank template. Where do I add the div tag?
You don’t need to add the div tag anywhere since “photos-grid-container” would be it, but I’m sorry, I misunderstood your original post. The example image you posted all looked to be the same size to me, so I thought a simple grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); would do the trick, but that won’t work for a masonry-type of layout, in which portrait and landscape photos all flow naturally with the same gap in between each photo. At the moment you would need Javascript like @jsonbecker pointed out. I updated my previous post with this link pointing to native CSS masonry that’s currently in the works. Maybe @manton’s plugin can help. Sorry about that @pratik!
