Advertisement
  1. Web Design
  2. WordPress Plugins
Webdesign

Do More With Images on Your WordPress Website

by
Length:ShortLanguages:

As the old saying goes, “a picture is worth a thousand words.” In the case of web design, images of all types are used to help tell a story. Blog posts often use them to sum up a point, while more sales-oriented examples utilize images to illustrate why a product or service is worth buying. They’re an indispensable part of any website.

Lucky for us, then, that WordPress gives our images the royal treatment. Its built-in media capabilities allow us to catalog our images, search through them, and even make some minor edits.

While that provides us with quite a bit of power, the right plugins can help us do even more. Today, we’ll take a look at five such WordPress plugins that you can use to bring more flexibility and functionality to your site’s images. Each plugin is available for download with your yearly subscription to Envato Elements. Subscribers have access to over 450 WordPress themes and plugins, along with hundreds of thousands of top-quality design elements–all for one low price.

1. Build a High-End Image Gallery

WordPress does have a built-in way to create image galleries. But the end result is something very basic. Galleries have the potential to do so much more. They can showcase your subject matter (whether it be your photography skills, or your classic car collection) and add some serious interactivity to the mix. But you’ll need to use a plugin to create something that is both beautiful and functional.

Global Gallery - Wordpress Responsive Gallery
Global Gallery - Wordpress Responsive Gallery

Global Gallery is a plugin that can do it all. Use it to create highly-customized image galleries, sliders or carousels. You can import images from social media and photo sharing sites or upload them directly via the WordPress media gallery. The plugin also enables you to tag images, which you can use to build a filterable portfolio interface. You’ll also find that there are a variety of available layouts and settings to tweak. Plus, everything is responsive and will work on any screen.

2. Add Interactivity to Your Images

Image maps have been around for quite some time, and they’re still incredibly useful. For the uninitiated, an image map looks like any other image on your website, but its magic comes from the fact that you can custom-draw clickable “hotspot” areas onto that image. This means you can link different parts of an image to different places or add other effects. For example, you may have a group photo of your company’s staff. You could use an image map to place a link on each person’s face that directs to their specific biography.

Image Map Pro
Image Map Pro

By default, WordPress doesn’t handle image maps very well. And then there’s also the problem that they aren’t responsive at all, leading to hotspots not adjusting properly to smaller screens. That’s where Image Map Pro comes in so handy. Draw custom shapes onto your images which can be used for adding links or to display rich media tooltips. It’s also fully-responsive and supports touch events.

3. Make Comparisons a More Visual Experience

One of the most effective methods of demonstrating the difference between subjects is the classic before-and-after image. We see them everywhere for good a reason: they work. It’s highly-visual and often so easy to understand that no further explanation is necessary. They get the point across better than words alone.

Before  After Images Comparison WordPress Plugin
Before & After Images Comparison WordPress Plugin

Images Comparison not only provides an easy way to add before-and-after images to your WordPress website, it also makes them interactive. Users can drag a line of comparison (either horizontally or vertically - depending on your setup) to reveal hidden parts of a combined image. This brings that extra bit of user focus that better ensures their attention.

And if you’re interesting in getting your hands dirty with some JavaScript and building your own, take a look at this tutorial by Adi Purdila:

4. Create Stunning Special Effects

Adding special effects to images can give your site a unique look while also helping to draw a user’s eye to a specific area of a page. There are a variety of things you can do, from Instagram-like image filters all the way to implementing animation. The great thing is that you no longer need to be a Photoshop expert to do so. With CSS3, many of these effects are built right in.

Imager  Amazing Image Tool for WordPress
Imager – Amazing Image Tool for WordPress

With Imager, you can easily add over 60 special effects to your site’s images. Filters, animations, and mouseover effects are right at your fingertips. The plugin also serves as a full-blown image utility by enabling you to create custom image sizes, thumbnail regeneration, watermarks and more.

And again, here’s Adi Purdila to explain more about filters and CSS:

5. Make Audience Participation More Fun

If social media has taught us one thing, it’s that people love sharing images. Memes and GIFs make us laugh and are often used to help spread ideas. In the right situation, it makes sense to harness this technology to increase user engagement on our own websites. Yet, it seems like this is a relatively untapped resource outside of the social space.

WP Comment Images and Videos
WP Comment Images and Videos

For sites that encourage reader comments, WP Comment Images and Videos could be just the thing to spark more conversation. Not only does it allow for user media uploads, it also enables the sharing of media from sites like YouTube and Vimeo. This little bit of added fun could make a big difference when it comes to user participation.

More Than Just Decoration

Traditionally, images have been used to add a decorative element to websites. But, as we’ve seen, they are also capable of being an all-around effective tool. The plugins above will help you use them in ways that help to tell your story and add new levels of interactivity to your site.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.