Gallery Grid Caption format

I would like to make the caption on a gallery grid 2 lines and have the first line be bold.  Can anyone suggest custom code to do this?

What template (or Squarespace version) do you use? or Can you share link to your site?

I am using Avenue template.  site is dirwinart.com but it is not public yet...pw is 2Begin.  Thank you. 

try adding this to caption

here is <br/>caption

or

here is <span>caption

Not sure where to add this code - could you provide a little bit more info?  I appreciate your help.

Any luck with this? I am wanting to accomplish something very similar. 

1 hour ago, olivianearle said:

Any luck with this? I am wanting to accomplish something very similar. 

10 hours ago, pirwin said:

Not sure where to add this code - could you provide a little bit more info?  I appreciate your help.

I just tested on my demo site. If you want to add 2 line, you can use CSS.

If you share link to your site, I can take a look

If you don't want to share link, you can try these code.

Could you post the CSS code you used?

18 hours ago, pirwin said:

Could you post the CSS code you used?

/* image 1 */ 
.sqs-gallery-block-grid .slide:nth-child(1) .image-slide-title:after { 
content: "Dinosaur line 2"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px; 
} 
/* Image 2 */ 
.sqs-gallery-block-grid .slide:nth-child(2) .image-slide-title:after { 
content: "Banana 02"; display: block; font-size: 13px; font-family: monospace; margin-top: -5px; 
}

Repeat to do other images (nth-child(3), nth-child(4),...)

Thanks for all your help.  I can't get it to work; probably some pieces of CSS I don't understand well enough.  Not going to dig deeper at this time.

18 hours ago, pirwin said:

Thanks for all your help.  I can't get it to work; probably some pieces of CSS I don't understand well enough.  Not going to dig deeper at this time.

Can you share link to gallery on your site?

The site is not public yet - the URL is dirwinart.com and the password is 2Begin.  (I assume this is what you mean by sharing a link?)

dirwinart.com/landscapes is a page that has one of the gallery grids.  I would like to have 2 caption lines for any picture on that page.

paul2009, thank you so much!  I had to put the code on the Page injection because it didn't work on the Site Code Injection (or I didn't go the the right place).  I'll push my luck and add one last question - is there an easy way to 'bold' the first line?  I'm familiar with Java code but not CSS - got a recommendation on a course, book, article, etc.  Thank you again for solving this!

UPDATE - Figured out how to modify your code make 1st line Bold.  Really appreciate your help.

Nice site, I am also an Avenue User, two sites. Its a great classic look, really good for photographers and artists, in my opinion. 

https://www.dcmrblueridge.com/

https://www.myrandomviews.com/

@pirwin @paul2009 Hey, I was wondering if you would share how to make the first line of the caption bold from the code you shared. Thank you!

On 3/1/2020 at 12:07 PM, pirwin said:

paul2009, thank you so much!  I had to put the code on the Page injection because it didn't work on the Site Code Injection (or I didn't go the the right place).  I'll push my luck and add one last question - is there an easy way to 'bold' the first line?  I'm familiar with Java code but not CSS - got a recommendation on a course, book, article, etc.  Thank you again for solving this!

UPDATE - Figured out how to modify your code make 1st line Bold.  Really appreciate your help.

 

On 3/1/2020 at 10:07 PM, pirwin said:

paul2009, thank you so much!  I had to put the code on the Page injection because it didn't work on the Site Code Injection (or I didn't go the the right place).  I'll push my luck and add one last question - is there an easy way to 'bold' the first line?  I'm familiar with Java code but not CSS - got a recommendation on a course, book, article, etc.  Thank you again for solving this!

UPDATE - Figured out how to modify your code make 1st line Bold.  Really appreciate your help.

 

Can you help me out too? how you bold 1st line? 

Hi @paul2009 I used the code injection from your website to split gallery grid titles into 2 lines -- and it worked! But how can I get the first line to be bold? And the second line to wrap?

site: heyfieldday.com/about
pw: test@FD

(They're team photos -- first line is name, second line is title.)

On 12/1/2021 at 5:39 AM, catalin said:

Hi @paul2009 I used the code injection from your website to split gallery grid titles into 2 lines -- and it worked! But how can I get the first line to be bold? And the second line to wrap?

site: heyfieldday.com/about
pw: test@FD

(They're team photos -- first line is name, second line is title.)

Add this to Design > Custom CSS

/*First line bold */
.image-slide-title:first-line {
    font-weight: bold;
}

Great advice as always!! Thanks so much for this solution @tuanphan!

This looks great and just what I need but when I add the script I can't get it to work on my site: https://www.gsmcs.co.uk/gasps

Am i doing something wrong? Thanks

23 hours ago, clockyer said:

This looks great and just what I need but when I add the script I can't get it to work on my site: https://www.gsmcs.co.uk/gasps

Am i doing something wrong? Thanks

I see text already bold here

Sorry, I meant how do I code it to appear on two lines? Thanks

14 hours ago, clockyer said:

Sorry, I meant how do I code it to appear on two lines? Thanks

Just sent the code in another your post