[ad_1]
but all other masonry gallery/layout plugins that i’ve tried do display in order from left to right.
That is impossible as per the definition of the masonry layout. Masonry layouts are, by definition, blocks stacked one above another (take a look at the original library that introduced Masonry layouts). The whole point of a masonry layout is that your photos can be of different heights, so it is impossible to get them ordered horizontally, since your rows are not going to be of fixed height.
All screenshots in the link feature irregular heights. Let’s say you have a 3-column layout, and your 1st, 4th and 7th images are wide and short, and your 2nd, 3rd, 5th, 6th, 8th and 9th images are narrow and tall. If you try to order things horizontally, then you will end up with a very confusing layout, where your 7th image will end up before your 5th and 6th images, thereby destroying the concept of order. E.g. take a look at the screenshot in the link that says “Loading Effects for Grid Items | Demo 2”. In there, take a look at the tile that says “Hand drawn letters are …”. If this was horizontally ordered, would you read this before “Fall 7 times …”, or before “Are you a parking …”?
Any other script that you are using might be making use of their own definition of a masonry layout, which wouldn’t be able to honour your sort sequence.
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?
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).
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 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.
This at least for my purposes is far more confusing visually and narratively when images convey a story.
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.