Custom HTML template for images you insert in posts

This post can help you if you use lightbox plugin and want to add additional class to images automatically or if you just want to remove default attributes.

#attachments  /  August 18  /   8

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:

Image html in the post

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:

Image html withoud a link in the post editor

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:

The result of changing default HTML template for image attachments

Only the best of WordPress

Subscribe to this weekly newsletter to receive the latest blog posts by email.I respect your privacy. Your email is safe with me.

Comments 8

  • 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?

  • Eduard Milushi August 12, 2016 at 12:44

    What about the title?

    I have tried all possibilities and title always returns empty?

    • MishaAuthor August 15, 2016 at 11:04

      Hello Eduard,
      I did so. I think it is some type of a WordPress bug.

      • Eduard Milushi August 15, 2016 at 11:13

        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.frames

        And i was able to get the title only by JSON by using:

        var selection = myPopUp_frame.state().get('selection');
        var first = selection.first().toJSON();
        wp.media.editor.insert('[mypopupIMG id="' + first.id + '" title="' + first.title + '" desc="' + first.description + '" alt="' + first.alt + '"]');

        By the way nice post!

  • You can share your light box plugin

Leave your question or feedback

phpjsHTMLCSSSQLCode
Please, enter a comment
Please, enter a name
Incorrect email