Images are an important component of most modern WordPress sites. You can easily diversify your content with images, and the better you do this, the more traffic you are able to get. Sometimes a picture says more than one thousand words.
For the use of images, most bloggers simply upload images to the media library and then embed them into posts or pages. This is enough for those who focus on content only. However, if you run a WooCommerce store, sell photographs online or host any other site that relies much on high-quality images for traffic or sales, the default image display and management features included in WordPress is not enough.
The embedding of high-resolution images is a headache for many bloggers because it usually breaks the reading experience. But in fact, there is a smart way for doing this. You can add a smaller image in the post content, and then zoom in it dynamically to meet the readers’ needs on details. While guaranteeing the layout design, the zoom effect makes viewers more engaged since there is no need to leave the page they are reading for a larger image.
In this tutorial, we will introduce two easy ways to zoom images in WordPress: adding zoom effects on hover, and zooming images in a popup. You can select either method depending on the effect you want to achieve.
Add Zoom Effects to Images on Hover
If you want to let viewers focus on the details of certain parts of your images without being distracted, you can enable zoom on hover so that only a small part of the image zooms in. This can be done by using a number of WordPress plugins, and the one selected in this tutorial is WM Zoom, a light-weight plugin which is responsive and cross-browser compatible.
WM Zoom is easy-to-use. After installing the plugin, you don’t need to deal with any setting, but instead, you have to know how the plugin works. WM Zoom supports several zoom effects, including Tints Zoom, Inner Zoom, Lens Zoom, Mousewheel Zoom and Gallery Zoom. To apply these effects, you need to:
- Prepare two images – a smaller one which is embedded into the post content, and a larger one used for the zoom effect.
- Upload the images to your WordPress site.
- Make use of the shortcodes on this page. Depending on the zoom effect you want, copy the corresponding shortcode, and then paste the image URLs where they should be.
A fully functional shortcode should be like this. Of course, you have to replace the image URLs with your own.
[WM_Mousewheel_Zoom small_img="/wp-content/uploads/2016/03/flowers-small.jpg" large_img="/wp-content/uploads/2016/03/flowers-large.jpg"]
With such a shortcode, you can get the following zoom effect when hovering over the image.
When you use another shortcode, you will see another zoom effect, too. Below is an example of the Lens Zoom effect.
When you use the plugin for the first time, you can try all the zoom effects one by one to see which can meet your expectation perfectly.
Zoom Images in a Popup
While zooming images on hover is good for most online stores, sometimes you do want to display the whole image in high resolutions to the viewers when parts of an image cannot bring the best visual appeal. In such a case, you can display the zoomed image in a popup with a lightbox functionality so that viewers can easily get the details they want without leaving the page they are on, which is good for user experience.
To achieve this kind of zoom effect, a plugin named Image Zoom can offer help. This plugin is well coded with a number of options. You are able to configure the max width and height of the zoomed image, the opacity of background, the delay of transition, etc. Besides, it is multisite compatible, and supports both WordPress posts and pages.
When Image Zoom is installed and activated properly, you will see a new menu item SL Plugins in the dashboard. Expand the menu item and click on Image Zoom. On the new screen, you need to deal with some parameters so that the plugin will work better in the way you like.
- The dimensions of zoomed images. Enter whatever dimensions you like, and choose whether to adjust the dimensions based on the browser size.
- The frontend texts. Keep the default values, or change the texts to whatever else you feel comfortable with.
- Theme. The plugin comes with 4 themes with previews, so that you can select the favorite one.
Also, you can decide the transition time, disable the navigation/slideshow buttons, and choose whether to show the image title and alternative text. After dealing with the options, click on “Update”. If you want to change back to the default parameters, you can also click on “Reset to default values”.
Now you can start uploading your high-resolution images to the media library and add them in posts or pages. All the images added in the following format will be zoomable automatically. No other setting is needed.
<a href="Image URL"><img src="Image URL" /></a>
When you click on such an image, you will get a lightbox of the zoomed image.
In the case that you want to exclude an image from the zoom effect, add “class=”exclude_image_zoom”” in the code above.
<a href="Image URL"><img src="Image URL" class="exclude_image_zoom" /></a>