Jump to content

Adding larger amount of text underneath images in Gallery Block V7.0 (Avenue)

Recommended Posts

I'm using a gallery block with the Avenue template (Squarespace 7.0) and would like to be able to have more than 2 lines of text below the images.  If I use 3 or more lines (between Title and Description text), the text pushes up into the images.

Here's the example:

http://www.stevedreyer.com/gallery1

Thanks in advance if there's some code to allow more lines of text.

 

Link to comment
  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

Thanks for checking.  No haven't solved it yet.  I hope this full description of the current and desired workflow (and the problem of text under a gallery block image) isn't too much. I've heard from others that Squarespace is an issue around this, and a solution may help others. THANKS!

CURRENT WORKFLOW:

1- A user goes to my collections page (an index) at www.stevedreyer.com/collections  [THIS IS DONE AND WORKS WELL]

2- User clicks on a "collection" like New York City (or other collections).  That brings up a page of thumbnail images for that collection, like www.stevedreyer.com/new-york-city [THIS IS DONE AND WORKS WELL]

3- {CURRENTLY] clicking on a thumbnail in the collection opens an image in the Lightbox, which can be scrolled through [THIS IS DONE] - but I need it to work differently, because:

I don't like the Lightbox function because (1) you can't pinch zoom on mobile, and (2) you can't easily have titles/descriptions UNDER (not on top of) the images on the desktop or mobile.

DESIRED WORKFLOW:

1- Clicking on a thumbnail (in #2 above), instead of going to a lightbox, the user goes to a Gallery Block (starting with the image of the thumbnail they clicked).

2- In the Gallery Block images appear with enough left/right space to see the forward/backward arrows. Landscape images cover the arrows. The user can go back and forth within the Gallery.

3- Lines of text (Title and Description lines) should appear UNDER (not on top of the images).  This is currently a big problem because if I have more than 2 lines of description (or a Title and 1 description line) the text starts moving up and ultimately over the image itself. This is on desktop and mobile. This should work even if slideshow thumbnails are enabled.

4- I would also like clicking on the image in the gallery to bring the user back to the thumbnails or to an enlarge version of the image. This works, but if it's a page with the larger version of the image, you can't get back to the gallery slideshow unless you use the browser's back button (not user friendly).

Tuan, again - sorry for being so detailed, but I thought it would help.  Let me know if you have any questions. On the surface this seems like a reasonable workflow and hope it's not too complex.

Thanks!

Link to comment
  • 2 weeks later...
  • 3 weeks later...
On 5/2/2023 at 4:14 AM, smdreyer said:

Thanks for checking.  No haven't solved it yet.  I hope this full description of the current and desired workflow (and the problem of text under a gallery block image) isn't too much. I've heard from others that Squarespace is an issue around this, and a solution may help others. THANKS!

CURRENT WORKFLOW:

1- A user goes to my collections page (an index) at www.stevedreyer.com/collections  [THIS IS DONE AND WORKS WELL]

2- User clicks on a "collection" like New York City (or other collections).  That brings up a page of thumbnail images for that collection, like www.stevedreyer.com/new-york-city [THIS IS DONE AND WORKS WELL]

3- {CURRENTLY] clicking on a thumbnail in the collection opens an image in the Lightbox, which can be scrolled through [THIS IS DONE] - but I need it to work differently, because:

I don't like the Lightbox function because (1) you can't pinch zoom on mobile, and (2) you can't easily have titles/descriptions UNDER (not on top of) the images on the desktop or mobile.

DESIRED WORKFLOW:

1- Clicking on a thumbnail (in #2 above), instead of going to a lightbox, the user goes to a Gallery Block (starting with the image of the thumbnail they clicked).

2- In the Gallery Block images appear with enough left/right space to see the forward/backward arrows. Landscape images cover the arrows. The user can go back and forth within the Gallery.

3- Lines of text (Title and Description lines) should appear UNDER (not on top of the images).  This is currently a big problem because if I have more than 2 lines of description (or a Title and 1 description line) the text starts moving up and ultimately over the image itself. This is on desktop and mobile. This should work even if slideshow thumbnails are enabled.

4- I would also like clicking on the image in the gallery to bring the user back to the thumbnails or to an enlarge version of the image. This works, but if it's a page with the larger version of the image, you can't get back to the gallery slideshow unless you use the browser's back button (not user friendly).

Tuan, again - sorry for being so detailed, but I thought it would help.  Let me know if you have any questions. On the surface this seems like a reasonable workflow and hope it's not too complex.

Thanks!

#2. I guess you can add some Image Blocks, then you can add custom url, instead of using default url from template. Have you tried it yet?

 

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

Tuan,

Thanks - I'm okay on #2.

I really don't see any way to do what I want - even though other services have the functionality built into their products. So I've been looking for workarounds - which don't seem to be possible to do without coding.

Artlogic is one service that has functionality and layouts that would be okay. Here's the workflow, include one of those standard layouts, and one way I tried to do something similar.

THIS IS DETAILED - SORRY, BUT I DON'T SEE ANY WAY TO EXPLAIN THIS BETTER, SO I'VE DONE SOME WORK TO EXPLAIN IT as you'll see. First to the Artlogic example, then my workaround.

1- Website URL: https://www.irastehmann.com/

2- Click on the "artists" link in the top menu (which would be something like "Black and White" for my site.

3- On the "Artists" page, click, for example, Robert Capa. This would be one of my black and white "Collections", like "New York City" or "Paris" etc.

4- Now, on the Robert Capa page (https://www.irastehmann.com/artists/31-robert-capa/series/other-works/) you'll see thumbnails of the his images, with text below.

5- If you click on one of the thumbnails, let's say, the third one "Omaha Beach...". that will bring you to a page, nicely formatted, that can be scrolled using the ARROWS to go back and forth to the previous or next image on the thumbnail page (#4 above).

The problem with Squarespace doing this is that you have to code a "previous" and "next button to go to physical ages. 

This is why I came up with the "desired workflow" in my posting.

While I was waiting (hoping) for a solution, I came up with this (which you can look at):

1- Go to www.stevedreyer.com/black-and-white.
(IMPT: the New York City link is the only one currently working for this demo).

2- Click on New York City (you'll get thumbnails similar to the Robert Capa example above (#4).

3- Click on the "Misty Morning" thumbnail.  You'll get a page similar to Robert Capa example above (#5).

4- When you get to the Misty Morning page, you'll see "previous", "next" and "thumbnail" links to get to the pages for the previous and next images, including going back to all thumbnails for New York City.

NOTE: what I did works like the Artlogic scenario, but I have to create separate pages and be very careful about the previous/next links on EVERY page.  It's cumbersome, time consuming, and prone to mistakes.

This is why I was looking for the scenario in my workflow posting.

I hope this makes sense.

Thanks!

Link to comment

Tuan,

An idea.  See this test page. It is a slideshow of 2 images. You can scroll back and forth with the arrows or click the thumbnails.  However, in order to do this I placed the images on a transparent background (larger than the image size) in Photoshop, leaving some transparency below the image portion and using the text tool to place the titles, image numbers, etc.

www.stevedreyer.com/slidetest

And then saving the images as PNG so that my page background color doesn't matter.

This works well - although I shouldn't have to do it this way - BUT, I can live with it.

NOW, the question. If I have a page with a grid of images (thumbnails), how can I click on one and have it go directly to the right spot in the slideshow. Then, once there, the user can scroll back and forth on the images and see the correct titles, page image numbers, etc.

I know I can have a regular slideshow and have the title/description below each image, but it doesn't show well on mobile because the text of the description wraps (the description area is not as wide as the image width).

Note that my template is Avenue in 7.0.

If you go to this page and click on any thumbnail, you'll see how I want it to work. It's a site that doesn't use Squarespace.

https://www.cavaliergalleries.com/artist/David_Burdeny/types/photography

Please let me know what you think, including the advisability of using PNG files.

Thanks!

Edited by smdreyer
Link to comment

Hi,

#1. NOW, the question. If I have a page with a grid of images (thumbnails), how can I click on one and have it go directly to the right spot in the slideshow. Then, once there, the user can scroll back and forth on the images and see the correct titles, page image numbers, etc.

https://www.cavaliergalleries.com/artist/David_Burdeny/types/photography

This is not possible, as far I know.

#2. I know I can have a regular slideshow and have the title/description below each image, but it doesn't show well on mobile because the text of the description wraps (the description area is not as wide as the image width).

I think we can use code to adjust text on mobile. If you can send a test page, we can check & send you code

 

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

Hi Tuan,

The test page is www.stevedreyer.com/slidetest.

Requirement is this (for all images in the slideshow - both horizontal and vertical):

1- Up to 3 lines of text (more if possible) from the Squarespace description field of the images.
2- First line of description should start at the same position, regardless of number of lines.
3- The width of the description field spans to the width of the image cell.
4- No pushing parts of the description up into image (see below).

The following describes what's in the "description" field in Squarespace for each image, and what happens.

Image 1 description (1 line of text): Okay on laptop, wraps on mobile.

Empire State, Looking North

Image 2 description (2 lines of text): Wraps on mobile and laptop. First line pushes up into text.

The San Remo
Limited Edition of 20

Image 3 description (3 lines of text). Wraps on mobile, first line pushes up into image so you can't see it.

Empire State Building
Limited Edition of 20
Inquire Here

 

THANKS!

Steve

Link to comment
  • John_SQSP changed the title to Adding larger amount of text underneath images in Gallery Block V7.0 (Avenue)

Yes, that works for images that only have 2 lines of text in the description. The third example (Image 3 above) has 3 lines of description, and I think the first one is pushed up onto the image display (which you wouldn't see).

I added a 4th image, with the following in the title and description fields.  Check it out on desktop and mobile.

Note, it's now good with your code for the width (THX), but needs more code to take care of number of lines (Title and Description) that all need to be UNDER the images.
 

image.png.bc2c99ff07a5fca2787b6ab1e1b95c6c.png

Link to comment
14 hours ago, smdreyer said:

Tuan - thanks very much.

Is there a way to center the description/title under the image cell. And maybe start the first line a little higher?

Thanks!

Can you share url again? I see 1 line of text only

https://stevedreyer.com/slidetest

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

Tuan,

I appreciate the help. I thought I'd give you all the requirements in one response, so that you don't get many smaller responses - hope that is okay! Four things follow:

(1) Your code worked with regard to multiple lines (thanks!). I made a slight change to move the description closer (up) to the image with this - which I think works for me:

/*length of text under images per Tuan and moving text closer to image (margin-top) - was margin-top 0px*/
.sqs-gallery-block-slideshow.sqs-gallery-block-show-meta .sqs-active-slide .meta {
position: relative;
margin-top: -10px !important;
}

(2) If possible, I'd like the text centered (all lines) to the width of the image cell so that it's in the same location for all slides (see below). You can look at the way it is now at www.stevedreyer.com/slidetest.

It would be great if it was like the following. I think it would look better as the slides change.  Here's an example with one of the images to explain this (shows bottom portion of image). It should be the same of course on mobile.

image.png

BY THE WAY, I found another site that works exactly as I'd prefer it.  It's not Squarespace, but it looks great on desktop and mobile:

https://www.staleywise.com/artists/herbert-matter/selected-works?view=slider#3

3) For some reason the text lines (if 2 or 3) start to move into the footer area - especially on iPhone, but also on different size desktop/laptop screens. It would probably be better if the whole slideshow section pushed the existing footer down, rather than overlaying it. But it's fine if I only have one line of text - which is what I was testing when you looked.

(4) Lastly, I think. on the iPhone the arrows are right at the edge of the screen.  Ideally the arrows should be a little further away from the largest width image (and stay there for all images), BUT also leave a little room away from the sides of the iPhone screen edge (even if the image cell needs to be narrowed).

Tuan, I know there's a lot here. I appreciate the help!

I think your solution might be beneficial to anyone wishing to properly add text under slideshow images, which I believe should have been possible as a Squarespace feature.

 

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