Style 7.1 Gallery Captions

Site URL: https://www.bethlehemsynagogue.org/photos-archived

Hi there everyone! Who's excited!? Squarespace made it possible to display captions on gallery pages! Woohoo!

Wondering if anyone knows how to change the styling of gallery captions. Specifically the font and font size, but would also love to know how to change positioning, etc. Thank you in advance!

Which position? Can you describe in detail.

This code will move text over images (overlay)

figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    left: 0;
    text-align: center;
}

I think she wants to center the captions  in relation to each image inside the gallery. At least this is what I've been wanting to do for a couple of days.
Using tuanphan code, I managed to increase the caption's size and its weight, but I still can't centralize it. Text-align: center did not work for me.

figcaption.gallery-caption.gallery-caption-grid-simple {
p {
  font-size: 110%;
  font-weight: 500;
  }
}

@tuanphan @jhmarsolla Thanks for your help, y'all.

I'm personally trying to center it, which I was able to do with your help. But the biggest thing I'm trying to do is switch the font family to the following. When I add it into your code, nothing happens. Would it need a separate callout?

      font-family: ltc-bodoni-175 !important;

font-family: ltc-bodoni-175;
font-weight: 500;
font-style: normal;
letter-spacing: 0em;
text-transform: none;

1 hour ago, kindandbrave said:

@tuanphan @jhmarsolla Thanks for your help, y'all.

I'm personally trying to center it, which I was able to do with your help. But the biggest thing I'm trying to do is switch the font family to the following. When I add it into your code, nothing happens. Would it need a separate callout?

      font-family: ltc-bodoni-175 !important;

font-family: ltc-bodoni-175;
font-weight: 500;
font-style: normal;
letter-spacing: 0em;
text-transform: none;

 

Can you share how you managed to center the captions? I haven't been able to do that yet.

@jhmarsolla That !important; tag isn't overriding the normal gallery caption text. Below is the code to center.

figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: absolute;
    text-align: center;
}

Thanks @kindandbrave! That helped a lot.

Anyone know how to switch the font family to LTC-Bodoni-175? When I add it into the codes listed above, nothing happens. Would it need a separate call-out?

@kindandbrave do you have this font added to your site? Do you have the font file or are you using something like Adobe Fonts?

LTC-Bodoni-175 is a font already supported within the Squarespace Design panels.

@tuanphan

how do you make the text in the center of the image?

currently it's at the bottom of the image and I would like it totally centered (up and down, left and right)

On 11/16/2020 at 4:44 PM, jonongec said:

@tuanphan

how do you make the text in the center of the image?

currently it's at the bottom of the image and I would like it totally centered (up and down, left and right)

Can you share link to page where you use gallery? We can check easier

https://www.jonathanong.com/

Currently I'm using this code

}
figcaption.gallery-caption.gallery-caption-grid-strips {
    position: absolute;
    top: 42%; 
    left: 50%;
    bottom: 0;
    background: rgba(0,0,0,0.0);
    color: white;
    left: 0;
    text-align: center;
}
p.gallery-caption-content {
  font-size: 120% !important;
}

I'm finding the captions sometimes centered, sometimes not.

Also top : 42% seems more centered than 50% for some reason.

Basically I just want the caption in the absolute center of the image.

And also if you have code for making the whole image and caption to be able to be clicked through. Currently you can't click on the caption but can click on the rest of the photo.

May I know where should I enter the codes? I need this too. Thank you. 

On 11/28/2020 at 9:06 AM, WengKien-IC said:

May I know where should I enter the codes? I need this too. Thank you. 

 

Design > Custom CSS

@tuanphan

It seems like the captions are not always in the center. See bottom photo especially.

https://www.jonathanong.com/stories

Are you able to help me with the code?

Also if you can help make the whole image + caption clickable, that would be great. Currently the area around the caption is not clickable.

I see center here...

To make clickable, add to Design > Custom CSS

figcaption {
    pointer-events: none;
}

@tuanphan thanks, now the text is clickable 🙂

See screenshot for the text always not being in the center (see the bottom 2 landscape photos)

Currently using this code  - can you help me check if there's anything wrong?

@media screen and (min-width: 640px) { h4 { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; position: relative; right: 10px; } 
}
figcaption.gallery-caption.gallery-caption-grid-strips {
    position: absolute;
    top: 42%; 
    left: 50%;
    bottom: 0;
    background: rgba(0,0,0,0.0);
    color: white;
    left: 0;
    text-align: center;
}
p.gallery-caption-content {
  font-size: 120% !important;
}

figcaption {
    pointer-events: none;
}

On 12/10/2020 at 4:03 PM, jonongec said:

@tuanphan thanks, now the text is clickable 🙂

See screenshot for the text always not being in the center (see the bottom 2 landscape photos)

 

Currently using this code  - can you help me check if there's anything wrong?

@media screen and (min-width: 640px) { h4 { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; position: relative; right: 10px; } 
}
figcaption.gallery-caption.gallery-caption-grid-strips {
    position: absolute;
    top: 42%; 
    left: 50%;
    bottom: 0;
    background: rgba(0,0,0,0.0);
    color: white;
    left: 0;
    text-align: center;
}
p.gallery-caption-content {
  font-size: 120% !important;
}

figcaption {
    pointer-events: none;
}

Add this CSS

figcaption.gallery-caption.gallery-caption-grid-strips {
    left: 50% !important;
    transform: translate(-50%);
}

Hi @tuanphan - I am also having issues with getting my descriptions on gallery centered - could you help please?

https://grouse-chartreuse-cjcr.squarespace.com/#contact#contact

It's the first orange section with the icons - you'll see that the captions are on the left. I have managed to change the font and size but I cannot get these centered. 

Any help would be massively appreciated! 

Thanks!

On 12/13/2020 at 11:45 PM, tuesdayroo said:

Hi @tuanphan - I am also having issues with getting my descriptions on gallery centered - could you help please?

https://grouse-chartreuse-cjcr.squarespace.com/#contact#contact

It's the first orange section with the icons - you'll see that the captions are on the left. I have managed to change the font and size but I cannot get these centered. 

Any help would be massively appreciated! 

Thanks!

 

Hi. Your site is private. Can you setup password & share url?

Hi @tuanphan - thanks 🙂

https://grouse-chartreuse-cjcr.squarespace.com/config/settings/site-visibility

Password is: Assemble

Thanks

On 12/16/2020 at 9:36 PM, tuesdayroo said:

Hi @tuanphan - thanks 🙂

 

https://grouse-chartreuse-cjcr.squarespace.com/config/settings/site-visibility

Password is: Assemble

 

Thanks

 

Assemble

Incorrect password

Hi @tuanphan - sorry try the below:

password: hello

Thank you - appreciate your help!