Change Default Image HTML

by

The question:

I am making a WordPress theme and want to change the default image html. For example if you upload an image using WordPress uploader it generates the following html for your images

<a href="image_url_goes_here" rel="nofollow noreferrer noopener">
    <img class="aligncenter size-full wp-image-100" src="your_src"/>
</a>

I want to change it to something like this

<div class="image-container">
    <img class="aligncenter size-full wp-image-100" src="your_src"/>
</div>

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

This will do:

<?php
/*
 * This filter only works with images, for all kind of media check: media_send_to_editor
 * The priority is set to 20 and it takes 8 arguments
 */
add_filter('image_send_to_editor', 'wpse_53577_img_wrapper', 20, 8);

// We are only working with the $html argument, but you can play with all of them 
function wpse_53577_img_wrapper($html, $id, $caption, $title, $align, $url, $size, $alt) 
{
    // If Link URL is set to "File URL" or "Attachment Post URL", the anchor tag gets replaced with the div tag
    $new_html = preg_replace("/<a(.*)>(.*)</a>/iU", "<div class="image-container">$2</div>", $html);

    // If no replacement was done (Link URL == None), wrap the image tag with the div tag
    $html = ($new_html == $html) ? '<div class="image-container">'. $html . '</div>' : $new_html; 

    return $html;
}

Reference snapshot:
snapshot

The replacement of the anchor tag is done with a Regular Expression (RegEx), which I’m not versed with… Found it doing this search.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment