[Resolved] adding classses to images on posts page based on filetype

Home Forums Support adding classses to images on posts page based on filetype

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1047731
    eric

    Hi there,

    I’ve been using the code below to add the “style-svg” to featured images on the posts page. Style-svg is the default flag used by the SupportSVG plugin to turn linked SVGS to inline SVGs. I’m running into an issue where this applies to all images and I would like it to apply to SVGs only. Is that possible? Thanks in advance,

    add_filter( 'generate_featured_image_output', function( $output ) {
        return sprintf( // WPCS: XSS ok.
    		'<div class="post-image  featuredImage">
    					<a href="%1$s">
    						%2$s
    					</a>
    				</div>',
    				esc_url( get_permalink() ),
    				get_the_post_thumbnail(
    					get_the_ID(),
    					apply_filters( 'generate_page_header_default_size', 'full' ),
    					array(
    						'itemprop' => 'image',
    						'class'=> 'style-svg'
                 )
             )
        );
    } );
    #1048215
    David
    Staff
    Customer Support

    Hi there,

    found this on Stackoverflow that gets the image extension of the featured image:

    https://wordpress.stackexchange.com/a/152354

    You could use that define a condition for returning your HTML.

    #1048252
    eric

    Thank you. Getting the extension isn’t the thing that is throwing me. The issue is adding logic to this section of code. I was unable to add even a basic “echo” command to this.

    #1048313
    Tom
    Lead Developer
    Lead Developer

    If you’re able to get the extension, you can replace this:

    'class'=> 'style-svg'

    With this:

    'class'=> $is_svg ? 'style-svg' : ''

    This assumes $is_svg is set to know whether the image is an SVG or not.

    #1049106
    eric

    OK. Thanks very much. I’m learning this as I’m going along and the use of filters represents a new and important area to figure out. I’ll try to take it from here.

    Thank you again.

    #1049226
    Tom
    Lead Developer
    Lead Developer

    No problem! Let me know if you have any questions 🙂

    #1049244
    eric

    I was preparing a prolonged session to get this figured out but I was able to do in just a few minutes. Usually it is the other way around. Thanks for your help and for an awesome theme!

    #1049838
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.