Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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">
    <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>
share|improve this question
add comment

1 Answer

up vote 3 down vote accepted

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.

share|improve this answer
    
Thanks dude you are a legend. Would it be possible if you could tell me how the code works. –  Css Tube May 30 '12 at 5:25
    
That was Will Smith, wasn't it :?) - Answer updated with extra references. Cheers! –  brasofilo May 30 '12 at 9:46
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.