Jump to content

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

Go to solution Solved by Beyondspace,

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.

Edited by FrH
Link to comment
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 format)
💫 Animated Buttons (Referral URL)
🥳 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
  • Solution
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 format)
💫 Animated Buttons (Referral URL)
🥳 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 format)
💫 Animated Buttons (Referral URL)
🥳 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 format)
💫 Animated Buttons (Referral URL)
🥳 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
15 hours ago, bangank36 said:

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

One of the pages in question:

[redacted]

Password: secretpassword1

Edited by FrH
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 format)
💫 Animated Buttons (Referral URL)
🥳 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

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

Edited by FrH
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.