Masonry layout horizontal image order

Thank you for your response.

And sorry the wording in my first post was imprecise (as i said ‘near beginner’).

I understand that masonry display across rows cannot be strictly correct, but (using masonry layout from other plugins) the images are displayed ‘near each other’; they ‘maintain the horizontal order mostly‘ as Desandro puts it. This is not perfect in the sense of ‘strict order’, but good enough in practical reality, when e.g. a chronological order of images is desirable.

Photonic’s order in columns can result in let’s say the 12th image in the chronological order display right next to the 1st image, when the browser window is re-sized and the 12th image ends up at the top of the 2nd column and so on. This at least for my purposes is far more confusing visually and narratively when images convey a story.

You refer to the original library that introduced Masonry layouts. The same site also refers to the horizontal display option “horizontalOrder: true”.

Do you see a way to achieve this with Photonic?

Photonic uses CSS for its masonry layout. This takes around 2 lines of code and needs no additional files, and is supported natively by all browsers. So there is no way to pass any additional parameters to it (CSS treats this as a true masonry layout and hence has nothing for directional changes).

Thank you for the answer and explanation.

This is how it should be. You are supposed to scan a masonry layout from top to bottom – the irregular image sizes lead you to do that.

Well, no. The 12th image displayed right next to the 1st image is not how it should be. Not if you look from content creator’s and/or user/visitor’s perspective. The original masonry layout provides an option for horizontal display, which to me suggests that we are not “supposed to”, but free to choose depending on preference and application.

This seems your interpretation and Photonic is built accordingly, and that is absolutely fine. I hope I find the right words that don’t make you feel like i criticise Photonic or you in any way. Photonic looks like a great tool and you will have good reasons why you followed the logic you chose, but for me the outcome only works if visual order of images is irrelevant. If visual order matters, then a vertical top-down order in columns makes no sense.`

<blockquote>As suggested in my other post, if you are really interested in telling a story and having it flow from the left to the right, using a masonry layout is akin to fitting a square peg in a round hole. My suggestion for a left to right flow is always the Justified Grid layout. It looks and flows much better and eliminates the clunkiness associated with masonry layouts. </blockquote>

We can agree to disagree here. It is perfectly possible to be really interested in a layout that supports a chronological display and story without insisting on strict “perfect” order, because visual appeal can be more important than enforcing square logic on round content.

I guess it boils down to the question what the priority is, and consequently what compromise is preferable. From a content creator’s point of view I find it unacceptable that vertical images are visually reduced to much less the size of a landscape image and thus diminished in impact and much less appealing. That is why a justified grid does not look better and is not a good solution. It may “flow better” as you say, but that is a lower priority than integrity of image sizes and display in “mostly” reasonable order. For my purposes (and again looking from a content creator’s and/or user/visitor’s perspective) a slight disorder of a horizontal masonry layout is the better compromise.

I haven’t noticed any “clunkiness” of other masonry layouts, quite the opposite actually, but perhaps this is due to my lack of experience or narrow perspective more or less limited to that of a content creator and/or user/visitor?

Anyhow, thank you for the suggestion. I will have to review plans and may not be able to build what I was hoping for.

Thanks for all help and have a great day.`

• This reply was modified 3 years, 7 months ago by flovision. Reason: quote formatting
• This reply was modified 3 years, 7 months ago by flovision. Reason: formatting