Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Gallery Grid Caption format


pirwin

Question

19 answers to this question

Recommended Posts

  • 1

@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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 1

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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
  • 0
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
  • 0
2 hours ago, Kas_ said:

I was wondering if you would share how to make the first line of the caption bold

You can do this with some CSS, referencing :first-line to affect the first line only. If you need more details, please share a working link to the page where you have these captions.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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
  • 0
1 hour ago, halenadrisns said:

Can you help me out too?

We need a working link to the page 🙂

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

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