[Support request] Add custom image ID to featured images (and nowhere else)

[Simon]

Hey Guys,
I am tying to add a Custom ID to the featured Image via this code (found in here):

function wpzeus_filter_gallery_img_atts( $atts, $attachment ) {
	global $post;
    if ( is_single() && (isset($atts['class'])) && (($attachment->post_parent) === ($post->ID)) ) {
		$atts['id'] = 'mycostumid';
    }
    return $atts;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpzeus_filter_gallery_img_atts', 10, 2 );

The problem is the following: I am using wp show posts (pro) to display some posts in my sidebar. This function is applying the mycustomid to all the posts shown by wp show posts AND the featured image.
-> Since I need the id to exclude only the featured image, it would be quite ineffective

I already tried to filter it by logical operators, but I couldn’t find something.

Also, I can’t use the selector (.featured-image img) because “rendering” it requires JS code, which doesn’t make sense when looking for page speed.

Is there any solution to add a custom ID attribute ONLY to the featured image of the current single post?

Thanks in advance and best regards

[Elvin]

Hi there,

Are you trying to add the id="" attribute directly to the img element or its fine if it’s just the parent element?

Also, are you trying to apply it on WPSP post images only?

Let us know.

Note: there’s no filter for the img element on WPSP, but there’s one on its parent element <a>. See the source code here: https://github.com/tomusborne/wp-show-posts/blob/35e410d7800273fc66f211c0f80d553e95d17f83/inc/functions.php#L191

[Simon]

Hey Elvin,

Are you trying to add the id=”” attribute directly to the img element or its fine if it’s just the parent element?

-> Directly to the img element

Also, are you trying to apply it on WPSP post images only?

-> No, i am trying to apply it NOT to the WPSP Post images.

[Elvin]

Ah i see.

Let’s try a different filter. Try post_thumbnail_html.

Try this out:

function add_id_to_featured( $html ) {
    $id = get_post_thumbnail_id();
 	if(is_single()){
    	$html = str_replace( 'src=', 'id="mycustomid-'.$id.'" src=', $html );
	}
    return $html;
}
add_filter( 'post_thumbnail_html', 'add_id_to_featured' );

Replace mycustomid- with your preferred id name. This code is structured so there’s a unique ID suffix because your ID attribute should always be unique. If you’re going to use custom_id w/ nothing unique in it, the ID fails is purpose and most likely won’t work.

[Simon]

Oh, now that you say it, it makes sense.

Since I need a non-unique identifier, could this code also be used to add a CSS Class to the img element?

And I’m afraid I have to tell you that the code also applies the custom ID (featured-image-s42) to the WPSP Images. (See Screenshot)

Thank you so far 🙂
Simon

[Elvin]

Ah I see. I think we need to use get_queried_object_id() and use it to check the current queried object’s ID and only apply if the current query(the current page) is equal to a reference.

Try this.

function add_id_to_featured( $html ) {
    $id = get_post_thumbnail_id();
	$currentquery = get_queried_object_id();
	$postID = get_the_ID();
 	if( is_single() && $currentquery == $postID){
    	$html = str_replace( 'src=', 'id="mycustomid-'.$id.'" src=', $html );
	}
    return $html;
}
add_filter( 'post_thumbnail_html', 'add_id_to_featured' );

See it in action here: Sandbox site

[Simon]

Thank you so much Elvin, works so far!

Is it also possible to add a custom CSS class with this code snippet?

[David]

Hi there,

you should be able to do this:

function db_custom_id_class_first_featured_img($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post && is_single() ) {
      $attr['class'] .= ' my-custom-class';
      $attr['id'] = 'mycostumid';
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'db_custom_id_class_first_featured_img' );

It will target just the first featured image of the single post.

[Author]

Posts