WP-Imagefit proportionally resizes images to fit your blog template

I’m happy to announce the release of my second ever WordPress plugin called . (My first, which I’ve neglected for sometime, is called WP-Microformatted-Blogroll).

WP-Imagefit is extremely simple and serves one purpose: to get images in blog posts to fit inside the columns that contain them. In fact, this plugin is used on this blog, so if you see ever images load wider than the column and then quickly snap to fit the container’s width, it’s this plugin that’s doing that.

I originally discovered this trick thanks to Oliver Boermans‘ NetNewsWire Ollicle Reflex style. Working together, he extracted the resizing code into a jQuery plugin called jquery.imagefit.js and made it available to me for use in my EasyReader NetNewsWire theme.

I had hacked it to work for my blog theme but decided that I should turn it into a WordPress plugin so I could use it elsewhere (and given that CSS’s max-width attribute not only wasn’t cross-browser, but also shrunk images horizontally, I needed a better solution). So, there you have it.

Go ahead and download it. Installation and setup is standard as long as you have an -compliant theme like K2 or .

I have a WordPress.org project page setup, the source is available (released under GPL), and if you want something to look at it, here’s the official homepage.

Feedback/feature requests/patches certainly appreciated and encouraged!

Author: Chris Messina

Head of West Coast Business Development at Republic. Ever-curious product designer and technologist. Hashtag inventor. Previously: Molly.com (YC W18), Uber, Google.

10 thoughts on “WP-Imagefit proportionally resizes images to fit your blog template”

  1. Nice work here Chris. This would solve the problem of post image and theme changes. Seeing that I’m constantly fiddling with my design/theme this plugin would eliminate one headache. I’d hate to say how much time I’ve spent changing the widths of my photos.

    Haven’t looked at the code yet but it must latch into hentry or entry-content? That’s why it’ll work on hatom only? In any event, thanks for the hard work and community love. You have my appreciation.

  2. @Amos: it only support hAtom blogs for two reasons: 1) to selfishly promote hAtom 2) because I don’t know how to add multiple search classes to the jQuery code (I simply need to do more research into jQuery!).

    If you’re not using hAtom, just sub out the containers’ classes for the hAtom-specific class (.hentry) on line 20 in wp-imagefit.php.

  3. I am trying this out on my blog, but it’s not working… Either for uploaded images or for linked images.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: