Jump to content

Can I Change Gallery Styles On Different Pages in Wells Template?

Recommended Posts

Hello,

I'm building a photography portfolio site and some gallery pages work better as thumbnail galleries rather than slideshow galleries. Is there a way to have "Gallery 1" be default slideshow view and "Gallery 2" be thumbnails?

Thanks in advance!

Link to comment
On 8/9/2021 at 11:59 PM, maxmfoto said:

Hello,

I'm building a photography portfolio site and some gallery pages work better as thumbnail galleries rather than slideshow galleries. Is there a way to have "Gallery 1" be default slideshow view and "Gallery 2" be thumbnails?

Thanks in advance!

Hi. Can you share link gallery pages? We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 8/12/2021 at 2:39 AM, tuanphan said:

Hi. Can you share link gallery pages? We can check easier

Hi, 

Here's a link to a gallery that I want to keep as a slide/one image at a time gallery: https://aardvark-terrier-gldh.squarespace.com/

Here's a link to a gallery I'd like to have as a thumbnail/grid view: https://aardvark-terrier-gldh.squarespace.com/people

Is this possible with my current template?

 

Thanks in advance!

Max

Link to comment
On 8/24/2021 at 12:37 AM, maxmfoto said:

Hi, 

Here's a link to a gallery that I want to keep as a slide/one image at a time gallery: https://aardvark-terrier-gldh.squarespace.com/

Here's a link to a gallery I'd like to have as a thumbnail/grid view: https://aardvark-terrier-gldh.squarespace.com/people

Is this possible with my current template?

 

Thanks in advance!

Max

Add to Design > Custom CSS

/* People page to grid */
body#collection-61115c0ca9a76f3f59b42d59 {
#slideshow .slide {
    position: relative !important;
    height: auto !important;
    top: unset !important;
    left: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 20px !important;
}
#slideshow .slide img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    position: static !important;
}
#slideshow {
    height: auto !important;
    overflow: visible !important;
}
div#slideshowWrapper {
    height: auto !important;
}
div#galleryWrapper {
    position: relative !important;
}}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/26/2021 at 3:59 AM, tuanphan said:

Add to Design > Custom CSS

/* People page to grid */
body#collection-61115c0ca9a76f3f59b42d59 {
#slideshow .slide {
    position: relative !important;
    height: auto !important;
    top: unset !important;
    left: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 20px !important;
}
#slideshow .slide img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    position: static !important;
}
#slideshow {
    height: auto !important;
    overflow: visible !important;
}
div#slideshowWrapper {
    height: auto !important;
}
div#galleryWrapper {
    position: relative !important;
}}

 

Hey Tuanphan,

Thanks for sending the CSS code - when I pasted into the custom CSS, the images don't appear as a grid. I'm seeing the first image at full scale and part of the second image but I'm not able to scroll or move to the next images. Is is possible to have a much smaller grid of thumbnails? Apologies for my complete lack of coding knowledge here!

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.