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

Adding caption underneath Card Layout image


Recommended Posts

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.

Link to comment
  • 5 months later...
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?

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
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;
}

 

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

Link to comment

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?

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

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
 

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

@KellenMcG

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      begin add secondary image caption to every image card for v7.1 site
      
      SS version: 7.1
      
      */
      
      $( '.design-layout-card' ).each ( function ( ) {
      
        let $this = $( this );
        
        const s = $( 'img', $this ).attr ( 'alt' );
        
        let $e = $( '<div>' )
        
          .addClass ( 'image-card-secondary-caption' )
          
          .text ( s )
          
          .appendTo ( $( '.image-inset', $this ) );
          
        } );
        
      // end add secondary image caption to every image card
      
    } );
    
  </script>

This is for a v7.1 site.

I've added a class (.image-card-secondary-caption) so that the secondary caption can be styled.

You will need to edit each image card image file name to get the caption to read the way you want.

93111523_ScreenShot2021-02-21at6_52_24PM.png.155e486cafce3253e85eccc2ed940c41.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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! 

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