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

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

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.

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.

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.

The following are results of resizing quickly.

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

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.

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.

The following are results of resizing quickly.

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

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.

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?

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?