how to append a CSS class to the feature image, per page, using custom fields?

  • brunomiguel

    (@brunomiguel)


    6 years, 3 months ago

    Hi.

    I’m trying to find a way to append a CSS class to the featured image if a custom field is present (the value of it being the CSS class). I want it to be a per post/page basis because disk space is an issue, so it needs to allow me to use the same image on two different posts/pages with different values for the custom field or even using only the custom field in one of the pages.

    So far, I was able to successfully check for the presence of the custom field:

    $ig_filter=get_post_meta($post->ID,'ig',true);

    The rest of it has been quite tricky. I’ve found an old plugin named ‘Custom Image CSS Classes’, but It doesn’t let me reuse the same image, in different pages, with different CSS classes.

    I’m not a programmer, but I looked at the code anyways. Although I can understand a bit of what the different functions do, I’m far from understanding it all or be able to adapt it.

    Can someone give me a help with this and/or point me in the right direction? Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • androidrobo

    (@androidrobo)

    6 years, 3 months ago

    WordPress adds default CSS classes to various elements on your website. A standard compliant WordPress theme must have the code required by WordPress to add CSS classes for body, posts, pages, widgets, menus, and more. A core WordPress function called post_class() is used by themes to tell WordPress where to add those default CSS classes for post.

    Moderator bcworkz

    (@bcworkz)

    6 years, 3 months ago

    androidrobo is not wrong, but what constitutes a “standard compliant WordPress theme” is not well defined when it comes to featured images. Featured image support is not even required. You might be able to target a featured image through a class name added to post_class(). It depends on the theme. If your code needs to work with any theme, post_class() is not going to be very reliable.

    I suggest that you add your class directly to the featured image’s img tag by using the ‘post_thumbnail_html’ filter hook. This is assuming the theme uses the_post_thumbnail() to output the img tag. This is a reasonable bet, but not a given.

    If you are not familiar with WP filter hooks, if there is one thing you should understand about coding PHP in WP, it’s how filter hooks work. Have a look at the Hooks Chapter in the Plugin Handbook.

    Michael

    (@alchymyth)

    6 years, 3 months ago

    example filter code, based on that the assumptions given by @bcworks are true:

    add_filter( 'post_thumbnail_html', 'add_post_thumbnail_custom_class', 10, 2 );
 
function add_post_thumbnail_custom_class( $html, $post_id ) {
 
if( $html == '' ) 
{
   return $html;
} 
elseif( $custom_class = get_post_meta( $post_id, 'ig', true ) ) 
{
   $html = str_replace( 'class="', 'class="' . $custom_class . ' ', $html );
}
	
return $html;

}
    Michael

    (@alchymyth)

    6 years, 3 months ago

    PS:
    you might want to sanitize the custom CSS class to avoid problems;

    change the one line to:

       $html = str_replace( 'class="', 'class="' . sanitize_html_class( $custom_class ) . ' ', $html );

    https://codex.wordpress.org/Function_Reference/sanitize_html_class

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘how to append a CSS class to the feature image, per page, using custom fields?’ is closed to new replies.