Creating a custom class for featured images

  • SadNinja

    (@sadninja)


    10 years, 7 months ago

    I followed this tutorial http://www.wpbeginner.com/wp-tutorials/how-to-add-additional-fields-to-the-wordpress-media-uploader/ and was able to create the field for the image custom class. Now I am just having trouble adding the class name to the image. The tutorial said you can get the field value using the following code.

    echo get_post_meta($post->ID, 'my-varible-name', true);

    unfortunalry I am not sure where to add it so that it shows up as part of the class. I tried adding it in the media.php file under

    function _wp_post_thumbnail_class_filter( $attr ) {
	$attr['class'] .= ' wp-post-image';
	return $attr;
}

    I inserted it as

    function _wp_post_thumbnail_class_filter( $attr ) {
	$attr['class'] .= get_post_meta($post->ID, 'my-varible-name', true);
	return $attr;
}

    This isn’t the right way to do it I know but I am not really sure what hook to use as that I am new to WordPress. My goal is for the featured image HTML to look like this

    <img width="150" height="150" src="http://www.mysite/image.jpg" class="wp-post-image myVariable" alt="image">

    I hope I have explained what I am trying to do correctly and any help would be greatly appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)
  • vjpo

    (@vjpo)

    10 years, 7 months ago

    This snippet in theme’s functions.php works (source & explanation)

    function add_image_class($class){
	$class .= ' additional-class';
	return $class;
}
add_filter('get_image_tag_class','add_image_class');

    But, if I try to add

    $additional = get_post_meta($post->ID, 'my-varible-name', true);
if($additional != '') $class .= ' '.$additional;
return $class;

    no any image code at all being inserted into post.
    If you will not get the answer here, try to ask this question on http://wordpress.stackexchange.com/

    Thread Starter SadNinja

    (@sadninja)

    10 years, 7 months ago

    Here is the code in my functions.php file I should have added it in the original post sorry

    function be_attachment_field_credit( $form_fields, $post ) {

    $form_fields['be-custom-class-name'] = array(
        'label' => 'custom class',
        'input' => 'text',
        'value' => get_post_meta( $post->ID, 'be_custom_class_name', true ),
        'helps' => 'Custom class for images',
    );
    return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );

function be_attachment_field_credit_save( $post, $attachment) {

if( isset($attachment['be-custom-class-name'] ) )
	update_post_meta( $post['ID'],
	'be_custom_class_name', $attachment['be-custom-class-name']

	);
if( isset( $attachment['be-custom-class-name'] ) )
update_post_meta( $post['ID'], 'be_custom_class_name',
( $attachment['be-custom-class-name'] ) );   

	return $post;
}	

	add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );
    vjpo

    (@vjpo)

    10 years, 7 months ago

    Hello, SadNinja! I understood that you used this code from WPBeginner, and this code works well. The problem is: how to add image custom meta as an img class.
    It seems possible to achieve by filter get_image_tag_class or get_image_tag as it described in this article. But when I try to add image custom meta value to the filter function, the “insert image” button doesn’t insert any html into post.

    vjpo

    (@vjpo)

    10 years, 7 months ago

    And… Where is do you want to get this class? In a post editor?

    Thread Starter SadNinja

    (@sadninja)

    10 years, 7 months ago

    I took a screenshot of where I want to enter the name of the class using the field I created in the tutorial here

    I would like the class to be on the images that gets pulled from a list of items via a category. I have a bunch of projects and I want to give them different hover effects based on the type of project it is. This is example of the shortcode that I am using to display the projects

    [catlist thumbnail=yes thumbnail_class=categories-image numberposts=50 id=11]

    the id is based off the category they are in but I want to have different effects for things in the same category. I may be barking up the wrong tree as to how to go about this, but from my Google searches I thought this was the right route. Again thanks for your help, this has been kicking my butt all day.

    vjpo

    (@vjpo)

    10 years, 7 months ago

    As I see, you are using the plugin List category posts. To achieve the task in this case is impossible without an editing of the plugin code.
    But it quite easy to do on standard WP archive pages.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Creating a custom class for featured images’ is closed to new replies.