Jump to content

Wells template: Styling image captions of Gallery blocks on only a few pages?

Recommended Posts

Site URL: https://philipus.com/chambersgallery

Hello everybody

I generally use pages with Gallery Blocks on my site and I am currently adding a few such pages for a specific photo project.

For this photo project I would like to include image caption overlays on all images, something I otherwise don't do.

How can I style the image captions in the Gallery blocks on the pages of this project only?

The styling I'd like to to is the following: 1) remove the title field, 2) change the font family and font size, and 3) either remove the black overlay or make it almost entirely transparent.

I have linked to a trial page I have created and also include a screenshot below which I hope helps explain what I seek to achieve.

Thank you very kindly in advance

Philip

sqspc.thumb.jpeg.a05357d93a121f7aba4592e107535d57.jpeg


philipus.com ◦▪︎◦ instagram

Link to comment
  • Replies 6
  • Views 771
  • Created
  • Last Reply

Add the following to Design > Custom CSS.

#collection-5f773c9aa0a58b6959273990 .yui3-lightbox2 .sqs-lightbox-meta {

  padding: 10px !important;

  }

#collection-5f773c9aa0a58b6959273990 .yui3-lightbox2 .sqs-lightbox-meta.overlay-description-visible {

  background: rgba( 0, 0, 0, .4 ); /* rgba( 0, 0, 0, .4 ) or "none" for a litle transpareny replace none with... rgba( 0, 0, 0, .1 ) and play with .1 */
  
  }

#collection-5f773c9aa0a58b6959273990 .yui3-lightbox2 .sqs-lightbox-meta h1 {

  display: none;
  
  }

#collection-5f773c9aa0a58b6959273990 .yui3-lightbox2 .sqs-lightbox-meta p {

  color: #fff;
  font-family: Georgia;
  font-size: 12px;
  
  }

You can change the font family and size to suit.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thank you very much Thomas, this code largely works.

Unfortunately the font family doesn't change, even if I add "important!". I also tried "Serif". Could non-serif be hardwired into Wells?

I notice now that the background is needed on mobile, where captions display in the white space below the images. Is it possible to make the transparency remain on mobile only?

How does #collection-xxxxx work – is a collection the images in one and the same Gallery Block? If so, I could perhaps stack several such #collection-xxxx tags at the beginning of the Custom CSS code to address those Gallery Blocks specifically?

 

13 hours ago, creedon said:

Add the following to Design > Custom CSS.


#collection-5f773c9aa0a58b6959273990 .yui3-lightbox2 .sqs-lightbox-meta {

  font-family: Times;
  font-size: 36px;
  
  }

#collection-5f773c9aa0a58b6959273990 .yui3-lightbox2 .sqs-lightbox-meta h1 {

  display: none;
  
  }

#collection-5f773c9aa0a58b6959273990 .yui3-lightbox2 .sqs-lightbox-meta.overlay-description-visible {

  
  background: none; /* for a litle transpareny replace none with... rgba( 0, 0, 0, .1 ) and play with .1 */

  }

You can change the font family and size to suit.

Let us know how it goes.


philipus.com ◦▪︎◦ instagram

Link to comment
On 10/4/2020 at 5:31 AM, philipus said:

this code largely works.

Unfortunately the font family doesn't change, even if I add "important!". I also tried "Serif". Could non-serif be hardwired into Wells?

Bad CSS is why the font-family isn't working. I've updated the CSS. Please see my previous post.

On 10/4/2020 at 5:31 AM, philipus said:

I notice now that the background is needed on mobile, where captions display in the white space below the images. Is it possible to make the transparency remain on mobile only?

We could try to do something with CSS but I think the problem is a little more fundamental. In my testing when the window is resized quickly the code can't keep up and messes up where the meta info is placed on the screen.

Here are some examples.

The following is normal on a desktop screen.

233581994_ScreenShot2020-10-04at2_41_02PM.png.43a7db0f6cdbc8b7b2042433c628e2f7.png

The following are results of resizing quickly.

213967621_ScreenShot2020-10-04at2_41_34PM.png.4bbc1f1c60f032f4b2b7fe06d379edf9.png

498742338_ScreenShot2020-10-04at2_42_45PM.png.06c804f79aa92ce8d5fdd185b020cbbf.png

1884176591_ScreenShot2020-10-04at2_42_59PM.thumb.png.a98993f175267c69ce5c92edcbf86544.png

1877024554_ScreenShot2020-10-04at2_43_19PM.png.b2273d7c26f52120272cc14e6d66a7f9.png

This last one is on a mobile size screen that was reloaded. Notice that the meta info is in a more proper location.

1662567766_ScreenShot2020-10-04at2_45_14PM.png.ef7fafd2f6c6d6c77964ff71b2ea5883.png

Most folks aren't resizing their screens so I recommend not trying to fix this issue with CSS.

On 10/4/2020 at 5:31 AM, philipus said:

How does #collection-xxxxx work – is a collection the images in one and the same Gallery Block?

Please see Collection pages. In short #collection-xxxxx are generated internally on some pages by SS that then can be targeted with CSS.

On 10/4/2020 at 5:31 AM, philipus said:

If so, I could perhaps stack several such #collection-xxxx tags at the beginning of the Custom CSS code to address those Gallery Blocks specifically?

If you want to target different styles to different galleries then yes. You'd need to find the unique #collection-xxxx for each gallery.

Let us know how the updated CSS goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi Thomas, once again thank you for helping me with such detail. Your CSS works perfectly now, wonderful. Thank you also for explaining how collections work and linking to that page which I had overlooked.

If I may just ask one more thing.

In an ideal world I'd like the caption to be below the images. This would make the gallery appear like it would in a book. Do you think that is possible with Gallery Blocks or will that interfere with the page containers somehow? 

The only alternative I've found when looking at page and layout options is the Gallery Page, where the caption appears to the left of the light-boxed image (unless the browser window is less tall than the sidebar, in which case they float to the right). See here for an example – https://philipus.com/chambers2/.

Best 

12 hours ago, creedon said:

Bad CSS is why the font-family isn't working. I've updated the CSS. Please see my previous post.

We could try to do something with CSS but I think the problem is a little more fundamental. In my testing when the window is resized quickly the code can't keep up and messes up where the meta info is placed on the screen.

Here are some examples.

The following is normal on a desktop screen.

233581994_ScreenShot2020-10-04at2_41_02PM.png.43a7db0f6cdbc8b7b2042433c628e2f7.png

The following are results of resizing quickly.

213967621_ScreenShot2020-10-04at2_41_34PM.png.4bbc1f1c60f032f4b2b7fe06d379edf9.png

498742338_ScreenShot2020-10-04at2_42_45PM.png.06c804f79aa92ce8d5fdd185b020cbbf.png

1884176591_ScreenShot2020-10-04at2_42_59PM.thumb.png.a98993f175267c69ce5c92edcbf86544.png

1877024554_ScreenShot2020-10-04at2_43_19PM.png.b2273d7c26f52120272cc14e6d66a7f9.png

This last one is on a mobile size screen that was reloaded. Notice that the meta info is in a more proper location.

1662567766_ScreenShot2020-10-04at2_45_14PM.png.ef7fafd2f6c6d6c77964ff71b2ea5883.png

Most folks aren't resizing their screens so I recommend not trying to fix this issue with CSS.

Please see Collection pages. In short #collection-xxxxx are generated internally on some pages by SS that then can be targeted with CSS.

If you want to target difference styles to different galleries then yes. You'd need to find the unique #collection-xxxx for each gallery.

Let us know how the updated CSS goes.


philipus.com ◦▪︎◦ instagram

Link to comment
11 hours ago, philipus said:

In an ideal world I'd like the caption to be below the images. This would make the gallery appear like it would in a book. Do you think that is possible with Gallery Blocks or will that interfere with the page containers somehow? 

This isn't easily done. As you mention there are issues with moving the meta block around. It would also require use of Javascript.

Perhaps someone has already explored in this area and would share their code?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi Thomas, my apologies for the delay in writing back. I was travelling for a few days.

I'll keep looking but I realise it's a Hail Mary because it would probably mess too much with the page layout.

I've really appreciated your help so thank you again very much for that.

Best

Philip

On 10/6/2020 at 12:19 AM, creedon said:

This isn't easily done. As you mention there are issues with moving the meta block around. It would also require use of Javascript.

Perhaps someone has already explored in this area and would share their code?


philipus.com ◦▪︎◦ instagram

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.