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

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

Image with Clickthrough

Behold!
[image src="http://www.aeropyrenees.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

Behold!
[image src="http://www.aeropyrenees.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 © 2013 AeroPyrénées Perpignan