Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Go to solution Solved by bangank36,

Recommended Posts

Posted (edited)

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, 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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, 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?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, 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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
Posted (edited)
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, 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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
Posted (edited)

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