Jump to content

Make the gallery thumbnail preview bigger

Go to solution Solved by Ptphotography,

Recommended Posts

Since you're using a gallery section, if you edit the page and click on Edit Section on the gallery section, you can change the width from Inset to Full. Alternatively if you don't want it full width I can provide some CSS to constrain the width to what ever value you want after setting the section to Full.

section[data-section-id="633562f3cb287e010b366892"] .gallery-grid[data-width="full"] {
  max-width:1600px;
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Thank you Ziggy, I have tried changing the width from Inset to Full - what it does is it makes the width the gallery bigger.  This new information is definitely something I can use in the future 😊

I added the code in my css but it did not change the size of the thumbnails? Sorry for not explaining my needs precisely but what I really want to achieve is to increase the individual size of the thumbnails(as I referenced in the picture above, so that all my thumbnails look uniform no matter what picture I add in the mix.

Thank you!

 

 

 

 

 

Link to comment

Sorry for misunderstanding but given that the image thumbnails are all square they do look uniform, if you want to prevent cropping, have you tried the Masonry gallery style?

Grid: Masonry - A grid where images appear in a staggered layout Slideshow: Simple - A simple slideshow that displays one image at a time

Does that help?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
9 minutes ago, Ziggy said:

Sorry for misunderstanding but given that the image thumbnails are all square they do look uniform, if you want to prevent cropping, have you tried the Masonry gallery style?

Grid: Masonry - A grid where images appear in a staggered layout Slideshow: Simple - A simple slideshow that displays one image at a time

Does that help?

Thank you for recommending this.

I looked it up but unfortunately, I think it won't work on my gallery.

I want to be able to see a larger (more zoomed in) preview on my last two thumbnails, as if I leave it as it is now, the last two row looks out of place (I hope I am making sense).

If you click/view my gallery on full screen, you can see that first 3 rows are full pictures while the last two rows are collage. If we can make the preview thumbnails bigger, it would solve the preview issue.

Thank you.

 

 

 

 

Link to comment
32 minutes ago, Ptphotography said:

I want to be able to see a larger (more zoomed in) preview on my last two thumbnails, as if I leave it as it is now, the last two row looks out of place (I hope I am making sense).

Does this work?

.gallery-grid-item:nth-child(16) {
  transform:scale(1.3);
  &:hover {
   transform:scale(1.4);
  }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
42 minutes ago, Ziggy said:

Does this work?

.gallery-grid-item:nth-child(16) {
  transform:scale(1.3);
  &:hover {
   transform:scale(1.4);
  }
}

 

Wow Ziggy! This is exactly what I am looking for. I didn't think it was possible. Thank you for making it work!

Last favour, how do we make sure it is in keeping with the size of the first 3 columns? How do we fix the size so it matches the rest? 

image.thumb.png.60a610db082c8bf6f7b063c852fc2c68.png

Thank you!

image.png

Edited by Ptphotography
Link to comment
11 minutes ago, Ptphotography said:

Ziggy you are amazing! Thank you so much for this! You made me so happy 😁

Fantastic, glad I could help! Could you mark the post as the answer in case anyone else might need it in the future? Thanks!

Lovely photos by the way!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.