Jump to content

Reorder Images on Mobile View

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.elisabethdeim.com

Hi,

I hope you can help me with this. 

When in mobile view, I would love to see the images on my portfolio website (https://www.elisabethdeim.com) ordered the same way as in desktop view. Currently the images are ordered column by column, but I would like to see them ordered row by row (see image below).

I tried to use this code https://www.rebeccagracedesigns.com/blog/reorder-blocks-on-mobile-squarespace-7-1, but didn't get it working for my problem. 

Is there any way in CSS to replace a single image block with another? Like: image block 2 shows image block 14, image block 3 shows image block 4,...

Or is there an even easier way to get the result I'm looking for?

Help is really appreciated!

Thanks
Elisabeth

Untitled-1.jpg

Link to comment

Hey Mary,

it's pretty similar to the method I already tried to apply, but they seem to only work for 2-column layouts AND if all the elements have the same hight. I use 3 columns and images with various heights. I think my layout needs a different approach. 

On this page and this page (both Squarespace) the images are ordered the right way, but I can't figure out how they made it work.

So help is still very appreciated. 🙂

 

Link to comment

I read your problem yesterday afternoon, and couldn't think of a good way.
Now checking again, I can't think of a way either.
The only way that I know is to create 2 layouts, and hide 1 on desktop, hide 1 on mobile. or create 2 pages, then show 1 on desktop, show another on mobile 😆

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I just recognized that I missed to put in the URLs of the two squarespace websites I found where the problem doesn't appear:

Page 1: https://www.thebeastisback.com/

Page 2: https://www.mattkstudios.com/

Maybe someone can figure out how they made it work?

 

4 hours ago, tuanphan said:

I read your problem yesterday afternoon, and couldn't think of a good way.
Now checking again, I can't think of a way either.
The only way that I know is to create 2 layouts, and hide 1 on desktop, hide 1 on mobile. or create 2 pages, then show 1 on desktop, show another on mobile 😆

Yeah, already considered this solution as well, but it would increase the loading time a lot, wouldn't it?

Thanks!

Link to comment

Hi @elisabethdeim,

Sorry I misunderstood! 🙂 

Would using the Masonry Gallery block plugin help?

https://www.sqspthemes.com/plugins/masonry-style-squarespace-gallery-plugin 

If so, it should be a lot easier to target an image in the CSS and to re-arrange the order if needed.

What do you think?

Hi 👋 I'm a Squarespace Expert Member, Circle Member & only Squarespace Authorised Trainer in Scotland. Check out my portfolio at Mary Philip.

Hit the little 👍 if I've helped.

Link to comment
  • Solution
On 6/1/2022 at 7:16 AM, elisabethdeim said:

When in mobile view, I would love to see the images on my portfolio website ordered the same way as in desktop view. Currently the images are ordered column by column, but I would like to see them ordered row by row.

Hi Elisabeth

I see that your portfolio images have been added as individual Image Blocks on a Squarespace 7.0 Brine-family template and to create the "wall" effect - where images have staggered heights, you've added them in columns instead of rows. If they were in rows you wouldn't get the wall effect but they would collapse how you want them to 🙂

This is because when a Squarespace site is viewed on mobile, the responsive Layout Engine automatically "collapses" the design by stacking individual blocks vertically. When Layout Engine collapses multiple columns, the second, third (and any additional columns) move below the first column, which is why you see the images from the first column before the second column images, and so on.

A workaround is to add a new Gallery Page and copy your images into it. You can now do this easily using the 'search for images' feature. Gallery Pages (and Gallery Blocks) don't have a wall feature, but Summary Blocks do, so if you a Summary Block to your homepage, link it to the Gallery Page and choose the Wall layout, it should show the images in the style you prefer and it will collapse into the order that you choose 🙂

You'll be limited to 30 images (you can choose how many to show in the Summary Block settings) but this can be expanded with code or a third party plugin called Lazy Summaries.

Here's what it looks like when tested:

image.thumb.gif.cba41bcaef0b96d26b0ac83ac942976c.gif

Edited by paul2009

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
On 6/2/2022 at 6:20 PM, paul2009 said:

A workaround is to add a new Gallery Page and copy your images into it. You can now do this easily using the 'search for images' feature. Gallery Pages (and Gallery Blocks) don't have a wall feature, but Summary Blocks do, so if you a Summary Block to your homepage, link it to the Gallery Page and choose the Wall layout, it should show the images in the style you prefer and it will collapse into the order that you choose 🙂

Hi Paul,

thank you so much for your advice. This workaround works pefectly. Meanwhile I tried something similar: setting up a summary without doing a gallery at first. But within a gallery page it's way more comfortable to change the order of the images than in a summary (need to change publication date). So I will implement your workaround. I'm super happy with that! Thanks! 🙂

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.