Jump to content

Trying to get Gallery pages in Wells template to Stack, instead of Grid/Slideshow

Recommended Posts

My current website (a different template) has what I want it to do with the Wells template, which I plan to switch over soon to.

I'm wondering if there's a way to make images in the Wells gallery stack in the same way they do in my current template (Avenue). I need the images to be one on top of the other, not on a masonry grid. 
A quick workaround to this would be simply to put my images into a blank page (not Gallery) and upload that way (solves the stacking problem), but I reply heavily on Gallery's "scheduling" feature, which is not available otherwise. 

Any custom code I could add to force the gallery to be a single column, regardless of screen size? I've maxed out the picture width to 500px, but it won't let me go higher...I'm guessing if I could, it would be the solution.

I suppose if there was an alternate template that has this feature, but allows a left sidebar navigation like Wells has, that would be ok-ish too.

Link to comment
  • Replies 12
  • Views 1.4k
  • Created
  • Last Reply
1 hour ago, FrH said:

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

My current website (a different template) has what I want it to do with the Wells template, which I plan to switch over soon to.

I'm wondering if there's a way to make images in the Wells gallery stack in the same way they do in my current template (Avenue). I need the images to be one on top of the other, not on a masonry grid. 
A quick workaround to this would be simply to put my images into a blank page (not Gallery) and upload that way (solves the stacking problem), but I reply heavily on Gallery's "scheduling" feature, which is not available otherwise. 

Any custom code I could add to force the gallery to be a single column, regardless of screen size? I've maxed out the picture width to 500px, but it won't let me go higher...I'm guessing if I could, it would be the solution.

I suppose if there was an alternate template that has this feature, but allows a left sidebar navigation like Wells has, that would be ok-ish too.

The first image shows Wells' blocks stacking my images - the second image shows how I want it to stack, regardless of screen width space:
image.thumb.png.4e9911c3c95b7413bfa593ac49f18df0.pngimage.thumb.png.02bdbd4cb53f6b40125067a37eea1f84.png

Look like you switch template to achieve this

image.thumb.png.abf953891400277d379b0e4c752dcf5e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 minutes ago, bangank36 said:

Look like you switch template to achieve this

image.thumb.png.abf953891400277d379b0e4c752dcf5e.png

There doesn't seem to be another template that offers a sidebar navigation ability, which is frustrating. I'm looking to have the navigation be on the left and ever-present, as opposed to scrolling away from it when it sits up top like my current setup is.

Link to comment
4 minutes ago, FrH said:

There doesn't seem to be another template that offers a sidebar navigation ability, which is frustrating. I'm looking to have the navigation be on the left and ever-present, as opposed to scrolling away from it when it sits up top like my current setup is.

I made a fix on wells template demo page

#galleryWrapper #thumbnails {
  height: auto !important;
}
#galleryWrapper #thumbnails .thumb {
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  height: auto !important;
  position: relative !important;
  margin-bottom: 10px;
}

image.thumb.png.734b5a9b0a42a1f21140d4c4f56949ec.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
6 minutes ago, bangank36 said:

I made a fix on wells template demo page

#galleryWrapper #thumbnails {
  height: auto !important;
}
#galleryWrapper #thumbnails .thumb {
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  height: auto !important;
  position: relative !important;
  margin-bottom: 10px;
}

image.thumb.png.734b5a9b0a42a1f21140d4c4f56949ec.png

For some reason I can't get it to produce the same results?
Pasting the code in Settings > Advanced > Page Header Code Injection makes no difference in the image layouts

Link to comment
13 minutes ago, FrH said:

For some reason I can't get it to produce the same results?
Pasting the code in Settings > Advanced > Page Header Code Injection makes no difference in the image layouts

It was the wells template, what url you are using?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
7 minutes ago, bangank36 said:

It was the wells template, what url you are using?

I'm currently editing the new template in Preview Mode before I make it "live". My live website (harvieillustration.com) is still in Avenue, but the template I'm working on to switch to is Wells and the code seems to do nothing when pasted, despite the image you showed it working.
I'm wondering if I have to make it a live template before doing so. Hopefully not? Other code I'm working with in other portions seems to work fine despite this.
I appreciate your patience and you trying to help, however this ends up panning out! 🙂

Link to comment
22 minutes ago, FrH said:

I'm currently editing the new template in Preview Mode before I make it "live". My live website (harvieillustration.com) is still in Avenue, but the template I'm working on to switch to is Wells and the code seems to do nothing when pasted, despite the image you showed it working.
I'm wondering if I have to make it a live template before doing so. Hopefully not? Other code I'm working with in other portions seems to work fine despite this.
I appreciate your patience and you trying to help, however this ends up panning out! 🙂

Show me your current wells template site, you can enable site password for access

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, FrH said:

One of the pages in question:

https://www.harvieillustration.com/characterdesign

Password: secretpassword1

add these to Design-custom css

image.thumb.png.7d23e5b17caa8c2cd0d274e9fcd8ad59.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
14 minutes ago, bangank36 said:

add these to Design-custom css

image.thumb.png.7d23e5b17caa8c2cd0d274e9fcd8ad59.png

Oh, it works! Thank you so much!
Is there any way to include the image titles in there too (somewhere) or no? If not, that's totally fine

Link to comment

@FrH I see the site has some problems. Do you need help?

Site URL – https://www.harvieillustration.com/

1. (Homepage) Increase text size?

https://www.harvieillustration.com/

harvieillustration.com-0-min.png

 

3. (Mobile – Contact) Align 3 icons center?

https://www.harvieillustration.com/contact

harvieillustration.com-03-min.png

4. (Mobile – Commissions) Reduce space between image?

https://www.harvieillustration.com/commissions

harvieillustration.com-04-min.png

5. (Tablet – About) Change to 2 columns/row?

https://www.harvieillustration.com/about

harvieillustration.com-05-min.png

6. (Contact)

harvieillustration.com-6-min.png

7. (Tablet-Homepage) Change to 2 or 3 images/row?

harvieillustration.com-7-min.png

8. (Contact) Increase image?

harvieillustration.com-06-min.png

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...

Sorry for the late reply. You caught my website when I was revamping it - so many of these problems are resolved or changed completely. 
I appreciate your offer and will let you know if I need you! Thank you so much.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.