The design trend in websites these days is to be heavily visually oriented. If you take a look at some of the most popular themes on WordPress, most of them have a strong focus on effectively displaying images within a magazine style layout. The “pure text” approach is only reserved for serious long length articles. The average person finds it much easier to tell a story using pictures– especially if they are self clicked. A lot of such storytelling functionality has been shifted to social media as companies like Facebook and Google+ provide specialized tools for zooming, panning, commenting, and telling stories. But with this ease-of-use, comes a lack of flexibility. You can’t intersperse photos with commentary for example. In the end, nothing beats a solid blog post with pictures.
However, the default WordPress display hides many of the visual details of high resolution photographs. Users can click through to see the full image, but this reloads the page and breaks the story immersion. What we need is a way to dynamically zoom in on images within the page itself. A kind of “lightbox” functionality. Fortunately, we have a great plug-in to do the job that – in my opinion – is the best way to zoom images in WordPress.
Using Image Zoom
For purposes of this example, I’m going to make use of the high resolution image sample from this URL. It’s at least double the screen size of the average laptop. Interesting details like the currency and prices of the fruits can easily get obfuscated due to the small size constraints of squeezing it into a regular blog post. The Image Zoom plugin allows us to bypass these limitations.
In my opinion the best part of this plug-in is that after downloading and installing it, you don’t need to take any special steps for inserting images. You still need to go through the standard “Add Media” interface on WordPress posts and the plug-in takes care of the rest. There are many options for how the zoomed image is displayed however. On the left-hand side of the WordPress administration dashboard, you will find the “Image Zoom” option under the SL menu.
The most important option is the one dealing with how much the image should zoom out to. The default is 1200 pixels, But it is automatically cropped to your browser size due to the checkbox option at the bottom as shown below.
This is great for adjusting it to various screen sizes. If someone is looking at your images on a netbook, you don’t want it to go offscreen. As such, keeping the checkbox ticked is a reasonable option. There might be circumstances where you want to have the image displayed in full however, in which case, simply delete both values in the “Max width” and “Max Height” boxes and leave them empty and uncheck the clipping option.
Save your post and preview it. As soon as someone moves their mouse cursor over an image, it will change to a magnifying glass and when they click it, it’ll expand into a light box with the dimensions of your choosing.
While the ability to expand out photographs to a larger size is great, you might not want this facility to be available for all of them on a given page. In which case, simply modify the HTML to assign the “exclude_image_zoom” class either to the image itself or to the hyperlink containing it. So for example, you’ll have something like this:
<a href="hyperlink"><img src="hyperlink" class="exclude_image_zoom"></a>
Any image with the exclude_image_zoom plus will not be expandable. This way, you have complete control over the story your images tell. You can use the keyboard buttons to scroll through all of the images on a given post. In the settings screen, you can configure the options for this functionality as well.
If your blog relies heavily on images to tell a story, the Image Zoom plug-in is essential for crafting an engaging experience for your users.