Rebuilding Image Tags When Adding Media

Update: I’ve written a new blog post about an improved method of applying the technique introduced in this blog post. Another Look at Rebuilding Image Tags gives you all of the code you need to remove width and height attributes from images in your posts, but also allows for captions and images that may be inside anchors. This post will be kept here for archival purposes, but I recommend using the improved technique.

——– Original Post ——–

Yes, WordPress does allow us to filter image tags when using the media uploader to insert images into a post, but when looking at the common solution, I have to wonder about a couple of things. First, is using preg_replace and regular expressions (regex) the best solution? Second, if you’re going to write a blog post that revolves around WordPress, which is a PHP application, then shouldn’t you know a little more about PHP or WordPress than the average person? Maybe I’m wrong, but it seems that many blog posts I checked out were more or less copies of the same one.

I’ll admit, I have not memorized every possible filter or action that WordPress offers. So when I needed to remove the width and height of image tags that are inserted into my posts by the media uploader, I went searching for the solution. With only a slight variation in regex, every solution I found was using preg_replace. I’m sure if my regex skills were at guru level I could have come up with something that worked for me, but I wanted to do more than just remove the width and height attributes. I wanted to remove most of the classes that WordPress applies to the img tag.

My Solution:

I chose to use SimpleXML. SimpleXML was designed to parse XML/HTML markup, so it’s a great solution for breaking down the img tag and getting at the data I wanted to use to rebuild the img tag. Unlike the preg_replace solution that strips unwanted stuff out of the tag, I’m using the stuff I want to make a new tag. Shown below is the code that I put in my functions.php file.

/**
 * Rebuild the image tag with only the stuff I want
 */
function recreate_img_tag( $tag )
{
  // Supress SimpleXML errors
  libxml_use_internal_errors( TRUE );

  try
  {
    $x = new SimpleXMLElement( $tag );

    // We only want to rebuild img tags
    if( $x->getName() == 'img' )
    {
      // Get the attributes I'll use in the new tag
      $alt = (string) $x->attributes()->alt;
      $src = (string) $x->attributes()->src;
      $classes = (string) $x->attributes()->class;
      $class_segs = explode(' ', $classes);

      return '<img src="' . $src .
                '" alt="' . $alt .
                '" class="' . $class_segs[0] . '" />'; 
    }
  }
  catch ( Exception $e ){}

  // Tag not an img, so just return it untouched
  return $tag;
}

add_filter( 'post_thumbnail_html', 'recreate_img_tag' );
add_filter( 'image_send_to_editor', 'recreate_img_tag' );

One thing to be aware of is that WordPress handles image insertion differently if a caption is used. WordPress also handles image updates through a javascript modal, so there is no filter that can be applied when an image is updated.