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

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!

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

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

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;
}}

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!

I found the option in design > site styles to make the initial gallery view mode "thumbnails" which is what I'm looking for but I'm wondering if I might be able to override that and do a slideshow view on specific pages?