HW Image Widget example

This is an example of the responsive, user friendly HW Image Widget available for WordPress 3.5 and up. Its free for download from WordPress.org.

Did you know it sports the TinyMCE WYSIWYG editor for the text?


Development by Håkan Wennerberg

HW Image Widget

I created the HW Image Widget because I was frustrated on the existing free image widgets available for WordPress. Some of the key features include:

  • Responsive or fixed size behavior.
  • What you see is what you get (WYSIWYG/TinyMCE) text editor of the widget text.
  • Choose an image from the media library, in any available size.
  • Use a remote image (by URL).
  • Templating.
  • Works with Carrington Build.
  • Translated into English and Swedish.


You can get the latest version of this plugin directly from the official WordPress plugin directory or install it directly from the WordPress admin.


If you don not like the default template used by the widget to display it, you can create your own HTML-template for it. To get started quickly you copy the /plugins/hw-image-widget/html/hwim-template.php file and put it into your active template folder. If this file exists, it will be used instead of the default template.

An example. If you are currently using the Twenty Thirteen theme, then your template file should be located here: /themes/twentythirteen/hwim-template.php.


Free support is available at the official WordPress Plugin support forum. I try to answer questions there when I get the time for it. If you need premium support you can contact me.


Can I change the way the widget is displayed?

Yes you can! See the templating section above.

Can I put the title below the image instead?

Yes, it can be done! First you need to remove the default title position by adding this filter to your theme functions.php:

add_filter( 'hwim_title', function( $title ) { return ''; } )

Then you create a HW Image Widget template (see section above) and add your new title position in that file at the desired location.

Why does not my image stretch to fit?

The widget shrinks the image added to fit within the widget area by default using max-width: 100%. But it does not stretch small images to fill out the widget area width.

The reason for this behavior is because image stretching really is the responsibility of the active theme. In some themes stretching images might make sense, in others it does not. In some themes some widget positions should be stretched, and in some other position it should not. Therefore, the actual widget itself does not enforce stretching.

If you want change the behaviour so that images are streched to fill the widget area width, then add this CSS to your theme style.css file:

.hwim-image {
    width: 100%;

Can I change the default settings of the widget?

Yes, you can change the widget default settings by using the hwim_get_defaults filter. It takes a single parameter (array).

Default values are:

    'title' => '',
    'text' => '',
    'src' => '',
    'display_size' => 'responsive',
    'display_width' => '',
    'display_height' => '',
    'original_width' => '',
    'original_height' => '',
    'keep_aspect_ratio' => true,
    'alt' => '',
    'url' => '',
    'target_option' => '',
    'target_name' => ''
Written by Håkan Wennerberg

Håkan (also known as PuffyThePirateBoy) is a systems architect based in Lundsbrunn, Sweden. Currently focusing on web development, Håkan is passionate about all aspects of web engineering ranging from back-end system infrastructure to front-end UX.

Outside of work, Håkan has a (slight) obsession about motorcycles and constantly trying to figure out how to get money for a bike, and what model it should be :)


Feel free to leave a comment using the form below.

Steven Walker
February 11, 2014 at 1:19 PM

Hi there,

Great plugin! We use it a lot…

Just one thing… When you set the ALT tag it generates it on the A-tag as well as the image rather than a title=””.

Just incase you hadn’t noticed!


HÃ¥kan Wennerberg
February 13, 2014 at 8:19 AM

Hi Steven,

Thank you for your feedback! I will make sure to take a look at that title attribute in the next release.

HÃ¥kan Wennerberg
February 25, 2014 at 8:54 AM

I added the title-attribute to the IMG-tag only in version 2.6 now available for download. How this attribute should be used is a bit unclear while reading about it.

May 11, 2015 at 9:11 AM

Hey, I got a strange error while using the plugin in column of pagebuilder. Widget gets added to the column but I am not able to click on ‘select image’. I get js error as “Uncaught ReferenceError: hwim is not define”. I use the same plugin in footer and it works with no error.
Any inputs will be of great help.


Linus Gidstedt
May 11, 2015 at 5:28 PM

Hi! Is there a way to center the image in the widget?


March 24, 2017 at 4:37 PM

How to insert two horizontally aligned and responsive images?


Leave a Comment

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