Topic: Adding image HTML title attribute

MelParker
May 23, 2023 at 2:46 am

Hi,

I would like to add the image HTML title attribute for a GB Image Block.

Is this ok to enter “title” for data-attribute and can the text entered for value have ” ” ?

Please see screenpic https://snipboard.io/uikmWc.jpg

Is this necessary to set the image HTML title attribute if there is already an image title set in th emedia library?

Thanks
MelParker
May 23, 2023 at 2:53 am

Featured images don’t show the tooltip with the image title in the browser (GB Image Blocks do.)

Is is possible to enable this for featured images too?

Is is possible to also set the image HTML title attribute for featured images?
Fernando
May 23, 2023 at 4:40 am

Hi Mel,

The title is just for the tooltip. It’s your premonition if you want to add one or not. You can add it in the Image Settings section as opposed to the advanced section. Reference: https://docs.generateblocks.com/article/image-overview/

How are you adding your Featured image? Can you share a link to a post?
MelParker
May 24, 2023 at 6:01 pm

Thanks for the tip how to add the image title for the image block in the page editor.

My settings were a bit different please see here: https://snipboard.io/TVJzlU.jpg

Thats also a great way to set the ALT tag. The great thing is that these values set in the page editor also update automatically in the media library.

Re: Featured Images

Is it also possible to add a caption for the featured images?

I add the featured image in the page editor. Please see screenpic here https://snipboard.io/CxvAkB.jpg

Most pages and all posts on the website have featured images at the top of the page. Home page image and the other images further down on some pages are GB image blocks.

Please see link info in Private Information window.
Fernando
May 24, 2023 at 7:22 pm

Yes, there were some changes when GB was updated, thus the slight difference.

Yes, if you’re using a GB Image Block, you can add a caption. Just click on cc in the toolbar. Example: https://share.getcloudapp.com/P8uXxAjB
MelParker
May 24, 2023 at 11:53 pm

Thanks, I know how to add captions in the GB image block.

I would like to know how to enable captions and image titles (to get the browser tool tip to show them on hover) for featured images.

Fernando

May 25, 2023 at 4:03 am

For the featured image, try adding this snippet to add a title:

add_filter( 'wp_get_attachment_image_attributes', 'tl_add_img_title', 10, 2 );
// Add title attribute to featured image
function tl_add_img_title( $attr, $attachment = null){
	$attr['title'] = get_post( $attachment->ID )->post_title;
	return $attr;
}

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

For the caption, try adding this snippet:

add_filter( 'post_thumbnail_html', 'custom_add_post_thumbnail_caption',10,5 );
 
function custom_add_post_thumbnail_caption($html, $post_id, $post_thumbnail_id, $size, $attr) {
 
if( $html == '' ) { 
  
    return $html;
  
} else {
  
    $out = '';
  
    $thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment'));
  
    if ($thumbnail_image && isset($thumbnail_image[0])) {
  
        $image = wp_get_attachment_image_src($post_thumbnail_id, $size);
 
        if($thumbnail_image[0]->post_excerpt) 
            $out .= '<div class="wp-caption thumb-caption">';
  
        $out .= $html;
  
        if($thumbnail_image[0]->post_excerpt) 
            $out .= '<p class="wp-caption-text thumb-caption-text">'.$thumbnail_image[0]->post_excerpt.'</p></div>';
   
    }
 
    return $out;
   
}
}

MelParker
May 25, 2023 at 5:54 pm

Thanks so much for providing the code and link for instructions!

I am trying to save the first code snippet you provided to the Code Snippets Plugin.
Please see sreenpic https://snipboard.io/EvPc0y.jpg

Do I have to add <?php at the beginning of the code snippet? If yes, what needs to go at the end?
Fernando
May 25, 2023 at 6:14 pm

No, you don’t need to add that. Code Snippets already adds those for you.
MelParker
May 25, 2023 at 8:35 pm

WOW it works for both the image titles and the image captions! Thanks so much!

I would like to add some styling to the featured image captions so they match the other ones I already created for the image blocks. So they need to be 16px font size, left aligned, and have 5px top padding.

Please see the page “Trainingsorte”.

Thanks!
Fernando
May 25, 2023 at 10:14 pm

I’m not seeing the caption. Did you remove it?
MelParker
May 26, 2023 at 12:44 am

My client just asked me to remove the captions as she changed her mind.

So no need for any more styling.

Sorry I didn’t add this info to my previous post early enough.

Thanks for your help with this topic.
Fernando
May 26, 2023 at 4:14 am

I see. You’re welcome, Mel!

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Adding image HTML title attribute