Adding caption underneath Card Layout image

I'd like to add a photo credit line underneath the image I'm using in a card image block - is this possible? It seems like it's not, but I'm imagining there's a CSS or HTML hack that would make this possible. I'm using the Bedford template.

Yes. You can. If you share link to page where you use card image block. We can check easier.

Hi @tuanphan I found this topic and have the same questions. Site is penderpr.com. Can you help please? Thanks!

Hi, just wondering if there is a solution here. Thanks in advance. 

cc @tuanphan

On 1/27/2021 at 8:52 AM, KellenMcG said:

Hi, just wondering if there is a solution here. Thanks in advance. 

 

cc @tuanphan

Hi. Sorry for the delay. Do you still need help on this? If yes, can you share link to page where you use card image?

Hi @tuanphan

Yes, I would still love some help here. Website is penderpr.com, and I am looking to add captions to the CARD image block. Thanks. 

@tuanphan I'd really appreciate your help here asap if possible. I'm stuck! 

Thanks in advance. 

On 2/5/2021 at 3:20 AM, KellenMcG said:

@tuanphan I'd really appreciate your help here asap if possible. I'm stuck! 

Thanks in advance. 

Add to Design > Custom CSS

/* Image caption */
body.homepage .design-layout-card .image-inset:after {
    content: "Photo by tuan";
    font-size: 16px;
}
body.homepage .design-layout-card .image-overlay {
    background: transparent;
}

On 2/6/2021 at 4:10 PM, tuanphan said:

/* Image caption */ body.homepage .design-layout-card .image-inset:after { content: "Photo by tuan"; font-size: 16px; } body.homepage .design-layout-card .image-overlay { background: transparent; }

Hey @tuanphanthanks for the reply, but I want to be able to add different captions to ALL card images which appear in many different pages/places throughout the site (homepage, portfolio pages). This code only applies to the one image, and we definitely don't want to have to add code for every single image - there are dozens. Is this possible? 

I think this will  require JavaScript code.

The script will find the alt of the image, then print out an html tag containing the alt, and insert it below the image.

Do you use Personal or Business Plan?

@tuanphan we have a business plan, thanks.

is there anything we can do here @tuanphan? Should I be asking someone else? Thanks. 

@tuanphansorry to keep bugging you here, but we're waiting on solution or might have to update the design entirely. Would really appreciate your update asap even if it's to say it's not possible, thanks. 

Hi. Sorry. I'm overloaded. This is a quite complex so I can't check it right now

You can also post this question on some FB groups

+ Squarespace Customization Resource Groups
+ Squarespace Community
+ Squarespace Entrepreneur
+ Squarespace Rockstars
 

@KellenMcG

Please see Image Block Image Caption Second Add.

You will need to edit each image block IMAGE ALT TEXT to get the caption to read the way you want.

Let us know how it goes.

Hi @creedon thanks so much for the response, and apologies for my delay here! I turned off notifications for some reason. 

It works, but can you please let me know how to add the CSS now? Or where? I'd like this to match the other image captions throughout the site which = Futura-pt, 1.1 rem/17.6px, italic. Thanks again! 

@KellenMcG

Add the following to Design > Custom CSS.

.image-card-secondary-caption {

  font-size : 1.1rem;
  font-style : italic;
  
  }

Let us know how it goes.

Hi @creedon,

This is amazing!

I was wondering if you could let me know how to make this work for 7.0 site with an image overlap?

Thank you!

5 hours ago, spenn421 said:

I was wondering if you could let me know how to make this work for 7.0 site with an image overlap?

I don't know for sure it can be done but I can take a look.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

@creedon

Thanks so much for taking a look. The website is live with no password, URL is:

https://www.stocktonavenue.com/blog-posts/neutrals-that-are-anything-but-boring

On 9/23/2022 at 6:16 AM, spenn421 said:

I was wondering if you could let me know how to make this work for 7.0 site with an image overlap?

I have updated my February 21, 2021.

Let us know how it goes.

On 9/24/2022 at 11:55 PM, creedon said:

I have updated my February 21, 2021.

Let us know how it goes.

This is amazing and works perfect! Thank you SO much!

Hi @creedon Im having trouble with this. Can you help? I'm working on 7.0 Brine - and following the page specific instructions for a Card Image Block. Added the line of code to the site header and the longer code to the page specific header. Then in the Alt Text I've added "Secondary Caption Test" etc to be the additional caption but this doesn't seem to show up at all. Any help appreciated! Thanks, Laura

https://blenny-begonia-wg6x.squarespace.com/config/pages

2 hours ago, LauraBennettDesign024 said:

Im having trouble with this. Can you help?

Your site is Private.

Please set up a site-wide password.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.