CODEWITHSUNDEEP
phphtmlwordpressfilter
dungey_140
dungey_140

Reputation: 2802

Add data-attribute and class to all images in WP

I have created a custom field for images in Wordpress, which is created and saving correctly using the below code.

However, I need this field vimeo-id to be inserted into any <img> tag that is inserted into the WYSIWYG editor (as a data attribute), if a value is present for the field on that image. Also, if the value is present, I'd also like to add the class .video-thumb to the image.

Current Output is something like the following:

<img src="ImageURL.jpg" alt="Image Alt" width="1920" height="1080" class="size-full wp-image-0000">

Desired Output (if a vimeo-id is present):

<img src="ImageURL.jpg" alt="Image Alt" width="1920" height="1080" class="size-full wp-image-0000 video-thumb" data-vimeo-id="12345678">

Can anybody help be with this?

Custom Field Function 

/* Add custom field to attachment */
function image_attachment_add_custom_fields($form_fields, $post) {
    $form_fields["vimeo-id"] = array(
        "label" => __("Vimeo ID"),
        "input" => "text",
        "value" => get_post_meta($post->ID, "vimeo-id", true),
    );
    return $form_fields;
}
add_filter("attachment_fields_to_edit", "image_attachment_add_custom_fields", null, 2);

/* Save custom field value */
function image_attachment_save_custom_fields($post, $attachment) {
    if(isset($attachment['vimeo-id'])) {
        update_post_meta($post['ID'], 'vimeo-id', $attachment['vimeo-id']);
    } else {
        delete_post_meta($post['ID'], 'vimeo-id');
    }
    return $post;
}
add_filter("attachment_fields_to_save", "image_attachment_save_custom_fields", null , 2);

?>

Upvotes: 0

Views: 2893

Answers (2)

Sabari
Sabari

Reputation: 6335

I think what you need is this:

add_filter( 'image_send_to_editor', 'add_vimeo_data_to_image', 10, 2 );

function add_vimeo_data_to_image( $html, $attachment_id ) 
{
    if ($attachment_id)
    {
        //check if there is vimeo video id for the image
        $vimeo_id = get_post_meta($attachment_id, 'vimeo-id', true);

        //if there is a vimeo id set for the image, add class and data-attr
        if ($vimeo_id)
        {
            $document = new DOMDocument();
            $document->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

            $imgs = $document->getElementsByTagName('img');

            foreach ($imgs as $img)
            {
                //get the current class
                $current_image_class = $img->getAttribute('class');

                //add new class along with current class
                $img->setAttribute('class',$current_image_class . ' video-thumb');

                //add the data attribute
                $img->setAttribute('data-vimeo-id', $vimeo_id);
            }

            $html = $document->saveHTML();
        }
    }

    return $html;
}

This will get the attachment id and checks for the vimeo id in the database. If it finds vimeo id, then get the image using dom document and add the new class (video-thumb) and the data attribute (data-vimeo-id). to the image.

But if your PHP version less than PHP 5.4 and Libxml is less than Libxml 2.6, then $document->loadHTML does not have the second option parameter. In that you have to use:

# remove <!DOCTYPE
$document->removeChild($document->doctype);

# remove <html><body></body></html>
$document->replaceChild($document->firstChild->firstChild->firstChild, $document->firstChild);

$html = $document->saveHTML();

or 

$html = preg_replace('~<(?:!DOCTYPE|/?(?:html|head|body))[^>]*>\s*~i', '', $html);

to get the HTML without Doctype, head and body.

Hope this helps you :-)

Upvotes: 2

user5084957
user5084957

Reputation:

I'm not sure I completely understood your question but the most simplistic way that I can think of is.

First start by creating a custom function inside of your functions.php file.

add_theme_support( 'post-thumbnails' ); 
add_image_size( 'vimeo', 1920, 1080 );`

Then simply just paste this code <?php the_post_thumbnail('vimeo', array( 'class' => "vimeo-id")); ?> and you should be set.

You can of course edit around with the functions part but the output pretty much remains the same.

Upvotes: 0

Related Questions