Responsive Image

Images that automatically resize themselves

Adding images to pages is a core web development activity. However, it can often be difficult to add the image behaviors you need — responsive resizing, lightbox overlays, and wrapping images in links that open in a new window.

To help our users avoid these issues, we’ve created a powerful [image] shortcode. It ensures all your images correctly resize and look great on mobile devices. Add lightbox or clickthrough to a new window with just a couple of settings. Plus, it automatically uses the WordPress image resizer to reduce download sizes and improve performance. Pretty handy, right?

Image with Lightbox

[image src="http://junknjunk.com/wp-content/uploads/2012/12/img.png" url="http://junknjunk.com/wp-content/uploads/2012/12/img.png" width="100%" height="auto" title="Behold!" onclick="lightbox"]

Image with Clickthrough

[image src="http://junknjunk.com/wp-content/uploads/2012/12/img.png"  url="http://www.google.com" width="100%" height="auto" title="Behold!" onclick="clickthrough" new_window="true"]

Plain Image

[image src="http://junknjunk.com/wp-content/uploads/2012/12/img.png" width="100%" height="auto" title="Behold!"]

The Options

  • src – the web address of the image you want to display
  • url – the web address to open when the image is clicked. If “onclick” is set to “lightbox”, then this should be the address of the image to be shown in the lightbox.
  • width – the width of the image. Should be set to 100% to maintain responsiveness for mobile.
  • height – the height of the image. Should be set to auto to maintain responsiveness for mobile.
  • title – the title of the image
  • onclick – either “lightbox”, “clickthrough”, or none. Determines behavior when image is clicked.
  • new_window – only works if onclick is set to “clickthrough”. If set to “true”, will open the url in a new window.
  • gallery – only works if onclick is set to “lightbox”. All images with the same gallery name will form a lightbox gallery when one of them is clicked.
  • show_icon – whether to show an overlay icon in the top left of the image (will be a magnifying glass if lightbox is enabled, or a link if clickthrough is enabled).

Copyright © 2014 Junk N Junk. All Rights Reserved.