Custom HTML template for images you insert in posts? First, let’s add an image to a post. Click on “Add Media,” select an image, adjust its settings, and then click “Insert into post.” After that, switch to the “Text” tab in the editor.
Here’s what you’ll see:
In this example, I chose “Link to Mediafile,” but if I wanted to select “Link to none,” the image HTML would look like this:
Is there a way to modify the default HTML code for images?
- What if you’re using a lightbox plugin like Fancybox and you want to add a “fancybox” class or a gallery attribute to the image link?
- What if you need to wrap this link in a div? Or perhaps you simply want to remove the default class attribute “class=”alignnone size-full wp-image-9”?
No need to worry! You don’t have to do these tasks manually each time. WordPress provides the “image_send_to_editor” filter to help you automate these changes.
Filter: image_send_to_editor
Add this hook to your theme’s functions.php file or another suitable file if you’re familiar with how to do it:
function diwakar_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="diwakar-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', 'diwakar_custom_html_template', 1, 8);Now, let’s see the outcome:
Related Articles
Leave a Reply