Extra Image Tags Plugin

This is a very minimalistic WordPress plugin, which finds all images you insert into your posts, and wraps them in extra span‘s, so you can style the hell out of them. The smart thing is that this is done “compile-time”, meaning when WordPress outputs your posts. That means you won’t see the extra tags on your edit screen, only on the published post, and indeed all your archives as well. It’s currently being used to add rounded corners to images inserted on my latest client website, which I’m currently working on.

Before:

<img class="alignright size-thumbnail" src="myimagefile.jpg" alt="" width="200" height="100" />

After:

<span class="pi alignright size-thumbnail">
 <span class="pib"> </span>
 <img src="myimagefile.jpg" alt="" width="200" height="100" />
</span>

The regex to find all the images in a post was graciously provided by Brian Meidell.

Download

Download from WordPress.org

9 thoughts on “Extra Image Tags Plugin”

  1. What the…I was just thinking about that yesterday!

    Very handy, thumbs up.

    1. Joen says:

      Thanks.

      I may try and get it on WordPress.org. I’ll update in the future with a version that removes the classes from the <img> tag.

      Oh, and “pi” is for “post image”, and “pib” is for “post image blob”, which can be used for whatever. Here’s a CSS example:

      span.pi.size-thumbnail .pib {
      display: block;
      width: 250px; /* WP  Thumbnail width */
      height: 170px; /* WP Thumbnail height */
      position: absolute;
      z-index: 1;
      background-image:url(imgoverlay.png);
      _background: 0 !important; /* IE can't show PNGs */
      }
      

      I seem to remember there being more code, but the above example should overlay 250×170px thumbnails with a PNG overlay.

  2. Joen says:

    Updated this plugin to remove the superfluous classes from the imgs after copying them.

  3. baron says:

    Works great, thank you

  4. Ella says:

    Hi…! This rocks. You rock. Thank you for sharing and helping people out. I send you a virtual beer 🙂

    1. Joen says:

      And I gladly accept it! Gulp.

  5. Dave says:

    Very useful little plugin – thank you for putting it together!

    However, it doesn’t work on galleries (i.e. the images outputted by the wp >2.5 gallery shortcode..) Any idea why that might be/how to remedy that?

    Thanks!
    Dave

    1. Joen says:

      Currently it’s not designed to mess with the galleries, at all. However, for someone with regex knowledge, it shouldn’t be very hard to tweak things.

Comments are closed.