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.

Download

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

Templating

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.

Support

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.

FAQ

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:

array(
    'title' => '',
    'text' => '',
    'src' => '',
    'display_size' => 'responsive',
    'display_width' => '',
    'display_height' => '',
    'original_width' => '',
    'original_height' => '',
    'keep_aspect_ratio' => true,
    'alt' => '',
    'url' => '',
    'target_option' => '',
    'target_name' => ''
)

7 thoughts on “HW Image Widget

  1. 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!

    Thanks!

    1. Hi Steven,

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

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

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

    Thanks,

  3. Hi

    I am working on a website for my local council and I wanted to find out whether the HW image widget plugin met the minimum standards for accessibility?

    The accessibility of the plugin should be based off the Web Content Accessibility Guidelines (WCAG) 2.0.

    Thanks

Leave a Reply

Your email address will not be published.