Free WordPress Plugin: Responsive Image Widget

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.

screenshotThis 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.

100% -- Square

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

Very horizontal image -- the height is 40% of the width..

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

Installation

  1. Download the widget.
  2. 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.
  3. Activate the plugin through the ‘Plugins’ menu in WordPress
  4. Place widget(s) in your sidebar areas through ‘Appearance > Widgets’ in WordPress
  5. 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!

Share Button

9 thoughts on “Free WordPress Plugin: Responsive Image Widget

  1. Debra

    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
  2. Benjamin Robinson Post author

    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 ben@keokee.com.

    Reply
  3. Caroline

    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
    1. Benjamin Robinson Post author

      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 (ben@keokee.com) your website’s address and I can look further into why it might be giving you this error.

      Reply
    1. Benjamin Robinson Post author

      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
      1. Deborah Delin

        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
  4. Brian Lacouvee

    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
    1. Benjamin Robinson Post author

      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 ben@keokee.com if you’re interested in anything like that.

      Thanks!
      Ben

      Reply

Leave a Reply to Deborah Delin Cancel reply

Your email address will not be published. Required fields are marked *