Getting Creative with Images in WordPress: How to Tag & Pin, Edit, Add Borders & Filters + More …
Uploading images and inserting them into posts and pages in WordPress is a pretty simple process and is something that has been refined over the different iterations of the platform.
WordPress now allows images to be uploaded using a drag and drop interface, after which they can then be resized or copped from within your blog without the use of any third party apps.
But you can do a lot more with images than what is possible with a standard installation of WP. This article will highlight some of the more interesting things you can with images on your blog as well some tools that can help improve your productivity when using images in posts including:
- Add Facebook-style tagging to your images
- Pin notes to your images
- Add borders and Instagram style filters to your photos
- Drag and drop images into WordPress
- Auto resize images on upload
Tag and Pin Stuff to Your Images
Pinning icons and adding text areas to your images is a creative way to annotate your images. These tags could be used to identify people in photos similar to the way they work in Facebook. Other uses could include pinning text to a certain part of a product photo to highlight a specific feature.
One premium plugin that allows you to do this is the iMapper WordPress Image Mapper / Pinner available at Code Canyon. This plugin allows you to set pins in three easy steps and comes with five different pins, although you can upload your own icons. The design is fully responsive for use with mobile-friendly themes.
wpStickies is another premium plugin that can help you achieve this effect. This plugin lets you tag images and add icons with pop text boxes to display additional information. You can even let your readers add their own tags and text notes to images posted on your blog, which is an excellent way to encourage discussion based around the photos on your website. You can add any HTML inside the text areas so they are perfect for creating your own custom navigation systems using your photos.
Add Frames, Borders and Filters to Your Images
If you want to go all Instagram on your images then using a plugin that can add filters and frames to the pictures used in your posts is a quick way to achieve this.
- FrameIt: this premium plugin allows you to get creative with your images on WordPress and choose from a selection of styles and frames. It comes with over 25 frames and borders or you can use this plugin to create your own. The design is responsive making it ideal for use on responsive themes that have been designed for maximum compatibly with mobile devices.
- InstaFX: this is a free plugin that lets you add Instagram style filters to the images used on your blog posts. The plugin comes with a range of popular filters for giving your photos that Instagram effect when inserting them into your WordPress blog.
- ImageFX: this is another free plugin which can add Instagram effects to your images.
- Styles with Shortcodes: this is a premium plugin that allows you to add many great custom styles to your site. These include a range of frames for images and videos that can be combined with a lightbox effect for displaying larger versions of your images. There is also a free bundle available for this plugin which adds more picture frame styles to this plugin.
- WP Image Borders: this is a relatively new plugin and has yet to gain much of a following but it has been designed to make it easy to add or remove image borders for the pictures used on your blog.
- Faded Borders on Images: this is a basic free plugin that allows you to add a faded border to your images. You can see the colour of the border but that is about all you can customise with this plugin.
If you are already using Instagram on your phone and want to display those images in your blog posts check out these Instagram WordPress plugins.
Tips for Increasing Productivity
Adding images to your posts is easy but there are a couple of ways which you can speed up the process and make it less time consuming when producing posts. Here are a few free image plugins that should help you become more efficient when publishing with WordPress.
Drag and Drop Images into Posts
While adding images to WordPress posts and pages in very simple, there are a few almost redundant steps along the way. These steps involve clicking on the ‘Add Media’ button, waiting for the window to load, and then browsing for the file or dragging it into the ‘Insert Media’ area. While these steps aren’t going to cause too many problems, they can get tedious when creating a blog post with numerous images.
These plugins allow you to add the ability to drag images from your computer for use in your posts, almost just like you can with Gmail:
- Magn WP Drag and Drop Upload: this free plugin creates a meta box under the post editor where you can drag images onto which are then inserted straight into your post. This is a basic plugin which is easy to use and is a great time saver if you don’t need image resizing capabilities.
- Image Pro: this free plugin adds drag and drop functionality to your post editor although it doesn’t automatically insert those images into your posts. However this plugin also makes it very easy to resize any images you add to your post. If you don’t need the resizing capability of Image Pro, the above WP Drag and Drop Upload plugin has a better interface and is easier to use.
- Drag & Drop Featured Image: this plugin doesn’t allow you to drag and drop images into your posts but does make it quicker to add a featured image to your posts. This one is ideal if you don’t want to add drag and drop to your posts for whatever reason.
Auto Resize Images on Upload
As most blog posts on a site will have a standard width, it is a good idea to resize images to fit within that width to avoid uploading images with a larger file size than is necessary. By doing this you can help your site load faster and reduce the space your large images take up.
While it is possible to resize the images you have uploaded to your blog from within WordPress, it’s an extra step along the way of creating a new blog post. Thankfully there are a few free plugins available for automatically resizing images when they are uploaded:
- Imsanity: this free plugin automatically resizes images as they are uploading helping you save storage space and prevent your readers from having to wait for large images to download. You set the default size for images and Imsanity will ensure all images uploaded will be resized to these dimensions. It is also possible to bulk resize images that have already been uploaded to your blog.
- Hammy: this image plugin creates a number of smaller images based on the files you upload. These images are then displayed to users depending on the size of their browser window. This makes this plugin a great choice for enabling your blog to display the most appropriately sized images for users on mobile devices such as tablets and smartphones.
It would be nice if someone could create a plugin combining the features of drag and drop image insertion with the auto resize capabilities of these plugins.
Hopefully these tools will allow you to work more efficiently and creatively with images on your blog. If you’ve seen any other creative ways to displaying images and photos on a WordPress blog or ways of working with them more efficiently please leave a comment below.