Free WordPress Plugin: Responsive Image Widget - KEOKEE

by Benjamin Robinson

Here is the first freely available plugin we’ve produced! We developed this for the new Living Litehouse blog, but it can be useful in many WordPress deployments.

This is a very simple WordPress widget that displays a single responsive, rationally proportional image in a widget area. It helps make adding images with accurate proportions to sidebar areas quick and easy, and thus avoid a stretched or distorted appearance — without requiring any knowledge of HTML or even an image editing program.

Its key feature is that it allows proportional adjustment on the fly, so the user can easily change the proportion of the image inside of WordPress, instead of needing to resize the image in an editor (a problem for many WordPress users who do not have a lot of experience resizing/cropping images, or who simply don’t have image editing software available.)

It takes in a title, image URL, height to width ratio and target link URL. It outputs a rationally proportional frame (“div”) with the image set as a background. The image always fills the whole horizontal space (100%) of the widget, and can be cropped from the left, right, top, bottom, or centered.

Download the Widget! »

Screenshots of the widget output:

An example of a vertically rational image (height is 200% of the width)

An example of a vertically rational image; the height is 200% of the width.

Here it is sized at 100% but in square format.

Here’s the same image sized for a very horizontal image — the height is 40% of the width..

Installation

Download the widget.
Go to “Plugins > Add new > Upload” in WordPress, and upload “responsive_image_widget_11.zip” from your computer. Or, unzip and upload “responsive_image_widget.php” to the “/wp-content/plugins/” directory.
Activate the plugin through the ‘Plugins’ menu in WordPress
Place widget(s) in your sidebar areas through ‘Appearance > Widgets’ in WordPress
Change the settings to your desiring and save!

(Expected) Frequently Asked Questions

Help! The image is gigantic and/or pixelated!The image always fills 100% of the width of the containing element (widget area). In other words, if the widget/widget area where the image is placed is large, the image will be large. So if your original image is only, say 200 pixels wide but the widget is 300 pixels wide the plugin will blow the image up to fill the 300 pixels and create the pixelation.To avoid this kind of pixelation, use an image that is at least as large as the widget area, or preferably larger than the widget area you plan to use it in.
Can the image only be placed on the side of the WordPress site like in the screenshots?Absolutely not! Just like all widgets, the Responsive Image Widget can be placed in any widget areas available in the active theme. In the future, we may also update it to include a shortcode feature, too.

Don’t hesitate to shoot us more questions in the comments! With any luck, the widget will soon be officially available through the WordPress Plugin Directory, in addition to here.

UPDATE: The plugin is now officially available on the WordPress plugins directory! — http://wordpress.org/plugins/responsive-image-widget/ That means it can be added directly from WordPress!

9 Comments

Reply Debra
July 30, 2013, 10:46 PM

I am having a difficult time using your plugin. Do you have any tutorials? Or possibly a more detailed explanation of how to use it? It shows the banner I want to ad but it has a bunch of code above it and below it. Thanks, Debra P.S. I used to live in Hope – love it up there!
Reply Benjamin Robinson
July 30, 2013, 11:03 PM

Hi Debra,

Is this the website where you’re trying to use it?: http://healthyandfitwoman.com/

I can take a look and see why it might be doing that if you’ll place a widget somewhere briefly. It should only display the title and the image, otherwise there shouldn’t be anything to it! If I can see what it’s outputting, I can probably tell what’s causing it.

And make sure you’ve got the most recent version! I have updated it some on the official repository to resolve a couple of bugs: http://wordpress.org/plugins/responsive-image-widget/

You can send me an email directly and I can give you a hand, my email is [email protected].
Reply Caroline
October 25, 2013, 3:06 PM

I am getting this error with the widget on the free responsive wordpress install – any idea as to what is happening here?

Warning: Division by zero in /home4/kobidog1/public_html/wp-content/plugins/responsive-image-widget/responsive_image_widget.php on line 99

Thank you!
- Reply Benjamin Robinson
  May 20, 2014, 7:08 PM
  
  Hi Caroline — this is a very long time after the fact, but I think your message originally got sorted into spam, sorry about that! This error seems like it could have been as a result of one of the ratio fields being unfilled or filled with “0.” If you’re still interested in working with the plugin, you can send me ([email protected]) your website’s address and I can look further into why it might be giving you this error.
Reply Deborah Delin
December 3, 2013, 11:07 AM

Please could you give me an example of the image URL you are supposed to add to the widget. I get a 404 error message.

Where am I going wrong?

Thank you.
- Reply Benjamin Robinson
  March 31, 2014, 5:02 PM
  
  Hi Deborah,
  
  Sorry for the delayed response, this message got sorted into spam. It looks like the image that was there might have been moved/removed, I get a 404 page when trying to visit that URL, so maybe the location of that image file changed? I would say try with another file URL which you know exists and see if you can get it to show up. Let me know if that doesn’t work.
  
  Thanks!
  Ben
  - Reply Deborah Delin
    November 9, 2014, 2:49 PM
    
    I am very sorry to bother you with this. Would it be possible to remove the link to the website Photomobil in my above comment made on December 3rd, 2013? We have been penalised for unnatural links and this is one of the links in our profile.
    
    Again, many apologies and thank you in advance for your help.
Reply Brian Lacouvee
March 30, 2014, 6:01 AM

Was going to try your image widget, are you planning on supporting it further?
Last updated in July. Just wondering before I jump in. All the best.
I now have Image Widget and am disappointed it messes up showing the alt tags.
- Reply Benjamin Robinson
  March 31, 2014, 5:13 PM
  
  Hi Brian,
  
  I may be making improvements to the plugin soon, but as far as I know it still works with the most recent version of WordPress. It’s a relatively simple plugin and I don’t think it’s likely to go out of date soon. That being said, there are additions I’d like to make to it when I get a chance.
  
  On alt tags — this might not be the right plugin for you. It actually uses a background image rather than an actual element to display. This allows it to flexibly scale and to be given a rational width and height (so that you can get all of the images in a widget to be the same dimensions without needing to crop them in Photoshop — that’s the purpose of this plugin,) but because it isn’t an img, this plugin will not show an “alt” tag. I may actually write an even simpler plugin that simply places an with a desire alt tag in a widget area — it seems that there’s enough demand for this plugin that a version for elements instead would also be useful. But my goal with this plugin was to allow the placement of images that are rationally scaled in a way that is also responsive, so that you could place three square boxes, and fill them with images that are not necessarily square, similar to placing images in frames in layout software like InDesign.
  
  I will let you know if I write a plugin for elements. Also, this is the company blog for Keokee, and we could certainly develop a simple custom solution for your website if you needed something specific. You can email me at [email protected] if you’re interested in anything like that.
  
  Thanks!
  Ben