[Resolved] Add custom image class to featured images

Home Forums Support [Resolved] Add custom image class to featured images

Home Forums Support Add custom image class to featured images

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #604080
    forgemedia

    Is there an easy way to add a custom class to featured images on blog posts? For example, take my post here: https://woorkup.com/happyforms-vs-contact-form-7/

    Currently, it looks like this:

    <img width="1588" height="796" src="https://woorkup.com/wp-content/uploads/2018/05/contact-form-7-vs-happyforms-1.png"......

    I would like it to look like this:

    <img width="1588" height="796" class="mycustomclass" src="https://woorkup.com/wp-content/uploads/2018/05/contact-form-7-vs-happyforms-1.png"......

    I am using the Code Snippets plugin πŸ™‚ Perhaps some quick PHP?

    Thanks!

    Brian

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #604109
    forgemedia

    Nevermind… realized there was a "attachment-full size-full" further down I could target πŸ™‚

    I’m all good!

    Brian

    #604513
    Tom
    Lead Developer
    Lead Developer

    Glad you found a solution πŸ™‚

    You can always do this as well:

    .featured-image img

    #1304019
    Andy

    I would love a way to actually do this (to add a class not just select it for JS/CSS purposes)

    #1304058
    Leo
    Staff
    Customer Support

    Are you referring to the featured image on the posts page or single posts?

    #1304059
    Andy

    Hey Leo, on the single posts page

    #1304077
    Leo
    Staff
    Customer Support

    Doesn’t look like there is a filter there unfortunately.

    What are you trying to achieve?

    Just wondering if there is a workaround.

    #1304091
    Andy

    I want to add either a class or data attribute to the feature image (so I can exclude the image from being lazy loaded in A3 lazy load)

    #1304191
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You could try this:

    add_filter( 'wp_get_attachment_image_attributes', function( $attrs ) {
        if ( is_single() ) {
            $attrs['data-something'] = 'my-value';
        }
    
        return $attrs;
    } );
    #1730251
    Simon

    Hello to all,
    sorry to wake this old Post, but I didn’t want to open up a new one. I am looking for the exact same function, but I am not able to do it correctly.

    I tried this code:

    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 kind of 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 ragards

    #1730258
    Leo
    Staff
    Customer Support

    Hi Simon,

    Can you actually open a new topic for this?

    Thanks πŸ™‚

    #1730486
    Simon
    #1730488
    Elvin
    Staff
    Customer Support

    Hi Simon,

    Please see my reply to your topic:
    https://generatepress.com/forums/topic/add-custom-image-id-to-featured-images-and-nowhere-else/#post-1730487

    Thanks. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.