Noscope is a bi-weekly journal serving up snacksized portions of pointless stuff since 2001.
I also do freelance design and usability via dejligt.com

Extra Image Tags Plugin

    16:08 on January 29th, 2009 , ,

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 Comments

Pings

  1. Atomic Playboy » Bookmarks for 26/01 through 02/02

Comments

  1. James John Malcolm says:
    January 29th, 2009 at 17:32   (Quote)

    What the…I was just thinking about that yesterday!

    Very handy, thumbs up.

    Reply to this thread
    • Joen says:
      January 29th, 2009 at 18:56   (Quote)

      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:
    March 08th, 2009 at 18:07   (Quote)

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

    Reply to this thread
  3. baron says:
    March 09th, 2009 at 17:56   (Quote)

    Works great, thank you

    Reply to this thread
  4. Ella says:
    June 04th, 2009 at 06:54   (Quote)

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

    Reply to this thread
  5. Dave says:
    September 14th, 2009 at 01:44   (Quote)

    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

    Reply to this thread

Leave a Reply

Have something to say? Jump right in!

(required)
(required)