Photo collection layout

Photoblogging
1

I’m trying the photo collection feature and my images are displayed on two columns only. Is there a way to increase this number, or get a masonry layout like what I get with the Photos page plugin by @kottkrig?

My collection: Joakim Faiss - Notes of life - Paysages
My photos page: Joakim Faiss - Notes of life - Images

2

Wow, your photos page looks amazing.

I’m hoping that people will develop plug-ins to change the default collection style in different ways. As a quick fix, for your blog I think if you added this snippet of CSS it would at least have room to show 3 columns of photos:

.microblog_collection img {
  width: 170px;
  height: 170px;
}

It would take a little more to change the layout to more closely match your photos page, but it should be possible.

2 Likes
3

Your #wrapper class in the section that you have is a max-width of 600px, which is pretty narrow. That is another way to increase width of the images. I might also do something with CSS grid, personally, for this kind of view.

1 Like
4

Matt L suggested this for Sumo/Tiny

.microblog_collection img {
    width: calc(100% / 3) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 0 !important;
    margin: 0 !important;
}
1 Like
5

I’m still trying to wrap my head around how to use Collections. I mean, in the sense that should I have a few select collections or plenty of them? Should I consider them at the page level or make a collection just for a post? Too many photos in a collection (one of them right now has 37) and I can’t display them in a post without overwhelming it.

2 Likes
6

Thanks, I went for this solution as a quick fix and set the wrapper at 870px, which gives me a four-column layout on desktop.

7

Thank you! I went for the wrapper dimension solution, even if it is a bit too wide for the regular posts.

8

The good thing is you can do both, I think. At page level for curating theme base collections and at post level to get a grid of multiple images.

9

Thanks! It worked but would need some further tweaking to adjust padding and other stuff. I will try it later on.

10

I finally added this CSS custom code to get a four-column layout inside the 600px wrapper. Thank you all for your suggestions.

.microblog_collection img {
    width: calc(100% / 4) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 10 !important;
    padding: 2px !important;
    margin: 0 !important;
}
11

I’d love a mosaic style too, since I have a mix of portrait and landscape shots.

Anyone have a CSS solution for keeping the same number of columns (for me, it looks like 2 on mobile, 3 on desktop) but enlarging the size of the photo columns to match the width of the Tiny theme? Right now, there’s an annoying gap to the right of the columns that feels like unused space. I’d be mighty grateful!

12

I’d love a way to manually reorder the photos after you’ve created a collection, instead of just by date.

1 Like