HW Image Widget example

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?

WEB ARTISAN

Development by Håkan Wennerberg
HW Image Widget

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' => ''
)
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 :)

Comments

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!

Thanks!

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

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

Reply

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Stay up-to-date
Subscribe to the RSS-feed.
HW Image Widget example

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?