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 […]

April 20, 2015

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

once a week, no spam

Comments 6

  • 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 MilushiAugust 12, 2016 at 12:08

    What about the title?

    I have tried all possibilities and title always returns empty?

    • MishaAuthorAugust 15, 2016 at 11:08

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

      • Eduard MilushiAugust 15, 2016 at 11:08

        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!

Leave your question or feedback

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