Custom HTML template for images you insert in posts
First of all lets insert an image into a post. Click on «Add Media», choose an image, configure it, click on «Insert into post». And then switch to the «Text» tab in editor.
What I get:
In this example I selected Link to Mediafile, but if i would like to select Link to none, then the image HTML would be like this:
Okay, is there a way to change this default html code?
- What if I use lighbox plugin (fancybox for example) and I want to add «fancybox» class or gallery attribute to the link?
- What if I need to add a wrapping div to this link?
- What if I just want to remove default class attribute
class="alignnone size-thumbnail wp-image-65"?
Do not worry, you do not need to do this operations manually each time. WordPress image_send_to_editor filter will help you to automate it.
Filter: image_send_to_editor
Insert this hook into your theme functions.php file or another one if you know what to do:
function rudr_custom_html_template($html, $id, $caption, $title, $align, $url, $size, $alt) {
/*
$html - default HTML, you can use regular expressions to operate with it
$id - attachment ID
$caption - image Caption
$title - image Title
$align - image Alignment
$url - link to media file or to the attachment page (depends on what you selected in media uploader)
$size - image size (Thumbnail, Medium, Large etc)
$alt - image Alt Text
*/
/*
* First of all lets operate with image sizes
*/
list( $img_src, $width, $height ) = image_downsize($id, $size);
$hwstring = image_hwstring($width, $height);
/*
* Second thing - get the image URL $image_thumb[0]
*/
$image_thumb = wp_get_attachment_image_src( $id, $size );
$out = '<div class="rudr-image">'; // I want to wrap image into this div element
if($url){ // if user wants to print the link with image
$out .= '<a href="' . $url . '" class="fancybox">';
}
$out .= '<img src="'. $image_thumb[0] .'" alt="'.$alt.'" '.$hwstring.'/>';
if($url){
$out .= '</a>';
}
$out .= '</div>';
return $out; // the result HTML
}
add_filter('image_send_to_editor', 'rudr_custom_html_template', 1, 8);Let’s look on the result now:
Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
I’ve been looking for a way to do this, and found several solutions using the image_send_to_editor filter, however, in every case it’s wrapping ALL of the post content in divs, not just the images. Any idea why this might be?
Do that divs have classes or id attributes?
What about the title?
I have tried all possibilities and title always returns empty?
Hello Eduard,
I did so. I think it is some type of a WordPress bug.
Yeah, it is possible. I was working on a plugin and i need to change all the code for that, ended up using custom button to load WordPress media frame with
wp.media.framesAnd i was able to get the title only by JSON by using:
By the way nice post!
Thank you!
You can share your light box plugin
PhotoSwipe