Jump to content

Gallery Grid Caption format

Go to solution Solved by paul2009,

Recommended Posts

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.

 

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
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),...)

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
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?

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

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.

 

Link to comment
  • Solution

@pirwin and @olivianearle, I wrote a guide some time ago that explains how to split Gallery titles into two lines. You'll find it here:

https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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.

 

Edited by pirwin
Link to comment
  • 2 weeks later...
  • 1 year later...
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.

 

 
@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!
Link to comment
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? 

Edited by halenadrisns
Link to comment
  • 1 month later...

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.)

Link to comment
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;
}

 

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
  • 6 months later...
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

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

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.