WPMU DEV's Blog - Everything WordPressWordPress Tutorials - WPMU.org http://premium.wpmudev.org/blog The WPMU DEV WordPress blog provides tutorials, tips, resources and reviews to help out any WP user Fri, 22 Aug 2014 16:30:00 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.2 The Best Places to Find Free Stock Images for Your WordPress Site http://premium.wpmudev.org/blog/best-free-stock-images-wordpress/ http://premium.wpmudev.org/blog/best-free-stock-images-wordpress/#comments Fri, 22 Aug 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=131326 A picture paints a thousands words, or so the old adage goes.

Images can tell a story in a quick glimpse more than endless paragraphs on a page. This is even up by data that shows 90 per cent of information transmitted to the brain is visual, and visuals are processed 60,000 times faster in the brain than text.

Online, visuals are even more important. Research has found 46 per cent of people say a website’s design is the number one criterion for discerning the credibility of a company.

But how do you find the right images for your website? Fortunately, there are plenty of resources available. If you’re tired of the usual boring stock photography and cliche pictures that cost too much, check out the round-up below. This is a fairly comprehensive collection of my go-to sites for whenever I’m searching for a stock or feature image. These quality images are by real photographers who take photos of real people and beautiful scenery.

If you do download from any of these sites, make sure you check the license associated with any of the images you use and always credit the author.

Unsplash

bear

Unsplash is usually the first site I visit when I’m looking for an image. It features hundreds of beautiful photos in a variety of styles, from landscapes to product images.

Ten new images are uploaded to Unsplash every 10 days. All images on Unsplash are covered under Creative Commons and have no copyright, which means the photographers have dedicated their work to the public domain and waived all rights to the work worldwide under copyright law.

My only gripe with Unsplash is that it’s not possible to search the image archive to quickly find what you want.

Creative Commons

creative-commons-search

The Creative Commons website features a handy search tool that allows you to look for free images on several third-party sites, including Google Images, Wikimedia Commons, Flickr and Pixabay.

The search tool includes options to look for images available for commercial purposes, and images that are available to modify, adapt or build upon.

This site offers a quick way to search multiple sites containing professional and amateur photography, video and illustration.

picjumbo

picjumbo

picjumbo offers free images for commercial and personal works. The site includes a category listing, which makes it easy to filter the types of images you’re looking for and quickly find what you need.

There is a wide variety of different high resolution images covering food, nature, people, technology and fashion, among other categories.

All photos are free to use, but the author asks for attribution.

Free Refe

Feature image

Free Refe is a collection of natural looking and modern photos from the premium Refe website.

The photos are mostly of high resolution street scenes and landscapes that are all free to download and use.

This site is a free version of the Refe site.

IM FREE

im-free

IM FREE is a curated collection of free images, all for commercial use.

The photography covers a wide range of subjects, including people, technology, sport and fitness, and education.

The images have been sourced from different third-party sites, such as Flickr, so make sure you check the licenses on individual images before downloading and using them.

Gratisography

gratisography

If you’re looking for quirky images to spice up the content on our site, Gratisography is the place to go.

The site offers a free high-resolution collection for use on personal and commercial projects. All images are free of copyright restrictions.

Unfortunately, the site doesn’t feature a search function so you will need to scroll through the images and pick out what you want.

Picography

picography

Picography offers beautiful, natural-looking photos that are free of copyright restrictions.

The site is similar to Unsplash in its design and the inability to search images for specific keywords.

Jay Mantri

jay-mantri

Jay Mantri is a relatively new stock photography site, which has been around since March. It features natural-looking photos, mostly of outdoor city and coastal scenes.

The photos have been made available for free under Creative Commons and come with no copyright restrictions.

Public Domain Archive

public-domain-archive

Public Domain Archive offers a one-stop-shop for finding free public domain images. The site has been created as a repository where the site’s author archives free, high quality images he finds across the internet.

The site is easy to navigate and includes categories that allow you to filter the kinds of images you are searching for to you can quickly find product images, landscapes and other kinds of photography.

Magdeleine

magdeleine

Magdeleine is a free high-resolution photography site that features work submitted by photographers. The photos generally features a vintage style.

Some great features of this site are the ability to search for images, filter images by category and even look for images by dominant color. All photos are also tagged.

The images are mostly photos shot outdoor, but there are also some product images.

Photo Pin

photo-pin

Photo Pin has been designed to help bloggers find photos for their posts.

The site uses the Flickr API and search Creative Commons photos that are available for free. It’s quick and easy to search for any kind of image. Keep in mind that most of the images are by amateur photographers for the quality is often lacking, though it’s not hard to find a quality image that fits your needs.

Pixabay

pixabay

Pixabay lets you find and share images that are free of copyright restrictions. All pictures are available to download under Creative Commons public domain dee CC0.

The license lets you copy, modify, distribute and use the images, even for commercial purposes and without attribution.

The site includes sponsored images from Shutterstock.

So Where is the Best Place to Go for Free Images?

Finding the perfect image for a post or a site header depends on the kind of image you want. Each of the site I’ve mentioned above offers different kinds of images and caters to different styles of photography.

It’s best to search several of these sites and once you’re familiar with the styles and image subjects they offer you will know which ones best suits your needs.

Many of the sites in this collection have been created or are curated by photographers and designers who were frustrated with the lack of stock images available for their work.

As I mentioned above, my go-to site for images is Unsplash. The high-resolution images offered there are top-notch and there are new images uploaded every week covering a variety of different subjects. Plus, the images are always stunning.

IM FREE is also a great site and covers a wide range of subject matter.

There are a few other quick ways to find images, which I haven’t covered above. Wikimedia, Google Images and Flickr all offer search functions that allow you to search for free images that are available for personal and commercial use.

Compfight and Little Visuals offer some great images, and Compfight in particular lets you easily search for any kind of image topic. Foodies Feed is a fantastic site for designers looking for images for restaurant and hospitality sites.

If you’re not in a rush to find an image, Death to the Stock Photo is a service you can join for free and you’ll receive weekly emails with access to collections of high-resolution stock images.

Summing Up

Whatever kind of image you’re look for, there is a plethora of free resources available to help you build your site.

The sites above provide high-resolution, professional and stunning photography and other images perfect for commercial and non-commercial uses.

Feel free to bookmark this post – chances are you’ll find exactly what you’re looking for on one of these sites.

Do you have a go-to site for stock photography? If there’s a site you use that hasn’t been mentioned in the list above, please share it in the comments below.

]]>
http://premium.wpmudev.org/blog/best-free-stock-images-wordpress/feed/ 2
The Best WordPress Caching Plugins and Why Testing Them is So Important http://premium.wpmudev.org/blog/best-wordpress-caching-plugins/ http://premium.wpmudev.org/blog/best-wordpress-caching-plugins/#comments Thu, 21 Aug 2014 12:00:23 +0000 http://premium.wpmudev.org/blog/?p=131388 Reducing the page loading time of your website pages improves your visitor’s user experience and reduces the chance of them hitting the back button on their browser. Search engines such as Google have also confirmed the speed of a website is a contributing factor in how they rank it in their search results, therefore it pays to have a fast loading website.

There are a number of ways in which you can improve the speed of a WordPress website, however a caching plugin will make the biggest difference. Caching is the process of creating a static HTML page of every page on your website. This means that visitors don’t need to retrieve data from your database, or execute PHP code, in order to display your page.

As a result of this, the number of your requests from your server greatly decreases. This also lowers CPU load and reduces the risk of bottlenecking.

Caching plugins boast many other features that can improve your page speed. These include CSS, HTML, and Javascript file minification, deferring the loading of Javascript to the end of pages, and GZIP compression. Some caching plugins also offer support for content delivery networks (CDNs) so that you can reduce server response times.

There are a lot of caching solutions available to WordPress users. In this article, I would like to show you what I consider to be six of the best.

WP Super Cache

wp-super-cache

With more than 6 million downloads, WP Super Cache is by far the most popular caching solution available to WordPress users.

This plugin offers three different options for speeding up your website: you can choose to use mod_rewrite to deliver static pages, serve static pages using PHP, or use a legacy caching mode that caches pages for logged in users.

Don’t worry if this sounds complicated – WP Super Cache is one of the simplest WordPress caching plugins to use.

The settings area is divided into seven sections: easy, advanced, CDN, contents, preload, plugins, and debug.

I have used WP Super Cache on one of my websites in the past with the default settings, however the plugin does offer advanced settings such as page compression, dynamic caching, and a scheduler that allows cached pages to be deleted and re-cached at certain intervals.

The plugin offers support for content delivery networks and has an option to load certain plugins before others so they load quicker. Pages are normally cached once a visitor lands on a page, however WP Super Cache allows you to preload all content on your website beforehand so that visitors are always served static pages.

W3 Total Cache

w3-total-cache

W3 Total Cache is a highly configurable WordPress caching plugin that is recommended by many respected hosting companies. It supports content delivery networks, GZIP compression, and minification.

This plugin’s settings area is split into a whopping 16 pages, which are then further divided into several sections (though a few of these pages are information pages). The number of configuration options available can be a little daunting, however the plugin should work out of the box. All you have to do is go to the General page and switch the option “Toggle all caching types” to “on”.

W3 Total Cache has a dedicated settings page for each type of caching. This includes minification, page caching, database caching, object caching, and browser caching. The default life of cached objects can be changed in the settings area. You can also adopt different rules for user agents. For example, you could apply one set of rules to Android devices. Four premium extensions are also available for the plugin that further extend its functionality.

While W3 Total Cache should work correctly out of the box, you may need to ask your hosting company for help in order to configure the plugin correctly. All good hosting companies should be familiar with the plugin, therefore they should have a lot of experience in using the plugin. Once you have configured the plugin to your liking, you can export the settings to another website you own using the plugin’s built-in import and export tool.

WP Rocket

wp-rocket

WP Rocket is a new caching plugin released earlier this year. It is also the only caching solution in this article that can’t be downloaded free of charge.

The plugin offers page caching, cache preloading, GZIP compression, and lazy image loading that ensures images are only downloaded by a visitor once the image is visible. HTML, JavaScript, and CSS minification are also supported.

Like WP Super Cache, WP Rocket divides its settings area into seven sections. The plugin will function correctly after activation, therefore you don’t need to spend a lot of time configuring it. You can, however, choose what features are enabled and disabled.

WP Rocket is one of the most user-friendly caching solutions available as there are no advanced settings to be concerned about. There is an Advanced Options tab, however this is only used for excluding pages and files from caching and minification.

The plugin also has support for CDNs and your plugin settings can be exported to another website you own using the plugin’s import and export tool.

A license for WP Rocket is available for $39 for one website and comes with one year of support and updates. A license for three websites costs $99 and is $199 for an unlimited number of websites. All licenses come with a 30 day money back guarantee.

Hyper Cache

hyper-cache

Hyper Cache is a basic caching plugin that was specifically developed for websites that do not have a lot of available resources (e.g. those on shared hosting). It only has one settings area; which is divided into three separate pages.

The General tab allows you to define the period that pages are cached and whether you want to enable page compression. The Bypasses tab allows you to specify pages to be excluded from caching. Cookies, user agents, and comment authors, can also be bypassed.

The last tab relates to mobile settings. The plugin allows you to bypass caching for mobile devices or use a separate cache. You can also change the theme that is displayed to mobile visitors.

Hyper Cache also supports 404 error page caching and works with plugins that add custom post types, such as bbPress.

If you have tried another caching plugin and have been concerned about the load that it put on your server’s CPU, you may want to take a closer look at Hyper Cache.

WP Fastest Cache

wp-fastest-cache

WP Fastest Cache promotes itself as being “the simplest and fastest WP Cache system”. The plugin uses mod rewrite in order to create static files on your website. It also offers minification, GZIP compression, browser caching, and an option for combining Javascript and CSS files together to reduce requests from your server.

The plugin lives up to its reputation of being simple. It only has one small settings page with three tabs. The first tab displays settings, the second tab allows you to delete cache and delete minified files, and the third tab allows you to define the rate at which cached files are deleted.

The settings tab lists all of the plugin’s features. All you have to do is click the checkbox for each feature so that it is enabled.

Due to this simplicity, WP Fastest Cache has become popular with many WordPress users.

Quick Cache

quick-cache

Quick Cache is a feature-rich caching plugin that supports caching of RSS feeds, 404 error pages, and get requests. It also supports browser caching and GZIP compression.

This plugin helps beginners by displaying a long and detailed explanation about what each feature can and can’t do. This is a great addition to the plugin as most caching solutions assume that you know what each feature will do.

A pro version of Quick Cache is available for only $15. It adds another 9 settings options to the existing 9. This includes additional options for logged in users, exclusion patterns, and a “Clear Cache” button in the admin bar. Import and export functionality is also added.

What is the Fastest Caching WordPress Plugin?

With all WordPress plugin lists, readers want to know which is the best plugin. Or in the case of caching plugins, which plugins will improve their website speed the most. It is a difficult question to answer as there are so many factors to consider.

The page loading time produced by a caching plugin can be influenced by:

  • The type of hosting used (sharing, VPS, dedicated etc)
  • Whether the server has been configured correctly
  • Whether the cache plugin has been configured correctly
  • The number of images displayed on the page
  • The type of content displayed on the page (e.g. tables, videos, text etc.)
  • The number of CSS and Javascript files used by the theme and by plugins

These factors are why there are so many conflicting reports online about which WordPress caching plugin is the best. I could test all caching plugins and rank them one through six. Someone else could do the same on their website and rank the plugins in a completely different order.

This is perhaps why Kyle Robinson Young from Tutorial 9 found that Hyper Cache was the best caching plugin, while Kim Tetzlaff from Dashboard Junkie found that W3 Total Cache was the quickest.

Bhagwad Park from WebHostingHero found that W3 Total Cache was quicker than WP Super Cache if minification was enabled, but WP Super Cache was marginally quicker if it was not. More recently, WPSeer found that WP Rocket was quicker than WP Super Cache.

As you can see, different WordPress users are producing different results. In general, WP Super Cache and W3 Total Cache seem to be the quickest in these tests, though the results are far from conclusive.

Therefore, the most accurate way of seeing which caching plugin will speed up your website the most is to test them yourself and compare the results.

GTmetrix Report
Testing the speed of your website using a benchmarking service such as GTmetrix is essential for knowing how a caching plugin has improved your page loading times.

The best way to test the performance of a WordPress caching plugin is to test your website performance using a speed benchmarking service such as GTmetrix (my favorite), Google PageSpeed Insights, Pingdom Website Speed Test, WebPageTest, or YSlow.

First, test your website with no caching plugin activated and then test your website with your chosen caching plugin configured. In order to get an accurate result, test your website two or three times and then take an average score. This is necessary as benchmarking services tend to produce a slightly different result every time you test the speed of a URL.

You should also remember to clear the cache after activating or deactivating any other plugins during this period. This ensures that all active plugins are displayed in your cached files.

To give you a better understanding of how much a caching plugin has improved the speed of your website, you should test the following pages:

  • Your home page or blog index
  • A long blog post with many images
  • A short blog post with few images
  • A page (e.g. about page or contact page)

It may seem overkill to test four different URLs before and after activating a caching plugin, but it is the most accurate way of testing performance as caching plugins handle different types of pages in different ways.

You should also be aware that different speed benchmarking services will give different results. For example, GTmetrix might say that a page loads in 0.9 seconds whereas Google PageSpeed Insights might say it takes 1.1 seconds. To remove this issue from the equation, be sure to use the same service to test your pages before and after activating your caching plugin. Otherwise, your figures may be skewed.

Overview

If you are not already using a caching plugin on your website, I recommend installing one of the above plugins listed in this article. Doing this will cache your content and deliver faster loading pages to your visitors.

Those of you who already have a caching plugin activated on your website will be familiar with a few of the plugins shared in this article, however you may want to consider testing another to see if it performs better.

I have tested all plugins listed in this article, however I have only used W3 Total Cache, WP Super Cache, and WP Rocket, on live websites. The quickest solution that I found for my own blog was W3 Total Cache, however I used the plugin in conjunction with four or five other optimization plugins in order to achieve that speed. On its own, I did not find W3 Total Cache to be any quicker than other solutions.

I currently use WP Rocket without any other optimization plugins installed and have been very happy with its performance. I also love how easy the plugin is to use.

If you are looking to further improve the speed of your website, you may want to consider using a CDN such as MaxCDN or Amazon CloudFront. For reference, WP Super Cache, W3 Total Cache, and WP Rocket, all support content delivery networks. Hyper Cache, WP Fastest Cache, and Quick Cache, do not.

Do you use a caching plugin? If so, which caching plugin have you had the most success with? Let us know in the comments below.

Image credit: Dan DeChiaro

]]>
http://premium.wpmudev.org/blog/best-wordpress-caching-plugins/feed/ 40
Snapshot, Clone, Copy, Template: The WPMU DEV Multisite Copying Toolkit http://premium.wpmudev.org/blog/snapshot-clone-copy-template-the-wpmu-dev-multisite-copying-toolkit/ http://premium.wpmudev.org/blog/snapshot-clone-copy-template-the-wpmu-dev-multisite-copying-toolkit/#comments Tue, 19 Aug 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=131443 WPMU DEV’s recent release of the Cloner plugin put another powerful site copying tool into the hands of WordPress multisite network owners’ hands.

Cloner, together with Snapshot, Multisite Content Copier and New Blog Templates, provides a suite of multisite tools that cover the bases when it comes to copying data from one site to another, even multiple, destinations.

But which tool should you use when?

Montage of promo images for Snapshot, Multisite Content Copier, Cloner and New Blog Templates
WPMU DEV offers a suite of tools to meet all of your site duplication needs

With 4 tools, all concerned with copying a site’s data, there’s almost inevitably going to be some hesitation over which tool to use when. So let’s step through each tool and find out what its focus is and how it can help you better manage your WordPress multisite network.

Snapshot - Time Machine For Your Website

snapshot

Snapshot is the ultimate WordPress backup plugin: it really is Time Machine for your website.

The plugin allows you to schedule a backup of a single install, a single site on a multisite network or the entire multisite network at an interval of your choosing from immediately to once-a-month.

You can create multiple backup jobs and the data can be stored locally or preferably on a host of external service providers including DropBox, Amazon S3 and Google Drive.

The plugin allows you to select the data that will be backed up allowing, for example, to backup the database at more frequent intervals than the files (media).

And once the Snapshot schedule is created, you can sit back comfortable in the knowledge that Snapshot and WP-Cron will be automatically creating the backups that can easily be restored to help you recover from disaster virtually stress-free.

Multisite Content Copier - Copying To Multiple Destinations

mcc-main

If you want to copy posts, pages, custom post types, users and even plugins to a single site, all sites or a group of sites on your WordPress multisite network then Multisite Content Copier (MCC) is a prime candidate.

MCC’s strength lies in its fine grained control – you can copy just a single post – and its Blog Groups – a definable grouping of related sites.

When copying posts and pages, MCC ensures that all images are also copied across, making it a perfect tool for syndicating content from one site to any number of others.

MCC also integrates with New Blog Templates enabling a Super Admin to also update the templates used for the creation of new sites.

If you regularly copy content or users across a network then Multisite Content Copier is the tool for the job.

New Blog Templates - A Head-start For New Sites

new-blog-template

New Blog Templates is all about providing absolute control over multisite’s built-in site creation functionality.

New Blog Templates allows a network owner to ensure that every new site is created using a pre-defined set of content, themes, plugins and settings by specifying an existing site to be used as a template.

Multiple templates can be created and categorized to build a library of templates to be selected by site admins and network members when creating a new site.

As the templates are based on existing sites, the site can be updated and any subsequent new sites will incorporate those changes.

New Blog Templates is a must-have tool for any WordPress multisite network owner who wants to ensure consistency and quality, especially for those networks that allow members to create their own sites.

Cloner - Site Replication Your Way

Cloner, the perfect solution for troubleshooting, staging, copying users and creating leg-up sites

The latest tool in the Multisite Copying Tool Suite, Cloner brings site replication to a multisite network.

Choose your own combination of 9 site components, or all of them for complete site replication, and get an clone of any site on the network (except the root site).

Clone a site for troubleshooting or staging, give users from one site access to another or simply copy content (including attachments) from one site to another in just a few clicks.

So, to summarize:

You want to...then use...
Control the structure, contents and look of new sites created on your multisite networkNew Blog Templates
Copy one or more posts, pages, plugins or users to one or more network sitesMultisite Content Copier
Create regular backups of a site or networks' critical data for restoring as part of disaster recoverySnapshot
Replicate a site to a private area for troubleshooting, updating Cloner

Using the right tool for the job is always important and this suite offers many possibilities when it comes to copying a site’s essential data.

Whilst each is available individually, WPMU DEV members have access to all 4 tools as part of their membership. If you find yourself regularly trying to duplicate aspects of a site on your WordPress multisite network, then you may well find that this suite of tools saves you a great deal of precious time.

]]>
http://premium.wpmudev.org/blog/snapshot-clone-copy-template-the-wpmu-dev-multisite-copying-toolkit/feed/ 3
How To Add Feature Images To Your WordPress Categories http://premium.wpmudev.org/blog/how-to-add-feature-images-to-your-wordpress-categories/ http://premium.wpmudev.org/blog/how-to-add-feature-images-to-your-wordpress-categories/#comments Sun, 17 Aug 2014 14:00:00 +0000 http://premium.wpmudev.org/blog/?p=131279 Featured images for categories is one of those ideas that’s so obviously beneficial that you’ve probably not thought about it before.

A Featured image can, and does, make a huge positive impact on the the post pages so it’s only natural, when you think about it, to extend that impact to our category pages with the added bonus of giving the visitor an instant visual cue as to the topic.

In this Weekend WordPress Project, I’ll show you how to specify a featured image for a category and give you some tips on how to update your theme to display them.

Screengrab of a Bosco theme category page with a featured image and title and description overlayed.
Who wouldn’t want their category pages to look like this?

Adding featured images to your category pages requires 3 steps:

  1. Install and activate the WPCustom Category Images plugin
  2. Add images to your categories in the Admin interface
  3. Update your theme to display the images on the category page

Step 3 is going to depend on your theme but I’m going to walk you through adding the updates required for Twenty Twelve (which has a category template) and Bosco (which uses a catch-all archive template) so this should cover most cases.

So, let’s get started.

Step 1: Install The Plugin

Easiest way to install the plugin is to simply search for it on the Plugins > Add New page using the search term “WPCustom”.

There’ll likely only be one result, click on Install Now and then Activate Plugin.

There’s nothing to configure, so on to Step 2.

Step 2: Add The Category Images

Images are added to new categories via the Add Category form or for existing categories on the Edit Category form under Posts > Categories.

Pick a category and click on Edit and you’ll see an Upload/Edit Image button at the bottom. Clicking on the button opens the Media dialog where you can select an existing image or upload a new one, just like adding a featured image to a post.

Screengrab of the category edit screen showing an uploaded image
Adding images to categories is just the same as adding them to posts

Add an image to a few categories and move on to Step 3.

Step 3: Update Your Theme

Okay, well the first 2 steps were easy: this step is where it gets a bit trickier as you now need to update your theme to output the category featured image.

To a large extent this is going to depend on your theme and how it is utilizing the WordPress Template Hierarchy. Generally, themes will either have a specific category template (category.php) or let a more generic archive template (archive.php) handle all listings, not just categories.

You might also need to look out for specific category pages. You can recognize these templates as they will be named category-[category-slug].php. If you’ve got lots of these then you might want to reconsider.

I’ll walk through updating Twenty Twelve, which uses a category.php template and Bosco, which uses an archive.php template.

Regardless of which approach you need to take, you should create a child theme for your changes. If you’re not sure about how to create a child theme then check out Rae’s excellent how to.

Adding Category Featured Images To Twenty Twelve

This aging but hugely popular WordPress default theme is still a great theme to practice on.

It uses a category.php, so the first thing to do when you’ve created your child theme is copy the original category.php template to your child themes folder. Now open it up so we can edit it.

There are 3 main updates here:

Getting The Image’s URL

At the top of the page, a function provided by the plugin is used to fetch the URL (src) of the featured image. There’s an initial check just to make sure that the function exists (that is the plugin is activated) just so the template will work without the plugin being activated.

1
2
3
4
5
if (function_exists('category_image_src')) {
$category_image = category_image_src( array( 'size' => 'full' ) , false );
} else {
$category_image = '';
}

Adding A Class To The Header

As the image is going to be contained in the <header>, it’s going to be much easier to style both the image and the title itself, if an unique class is added to the <header> tag.

This simple if statement will add the category-image class is a category image exists for this category.

1
<header class="archive-header <?php if ($category_image==true) echo 'category-image'; ?>">

Outputting The Image

The final update for this template, this is where the image HTML is actually inserted into the page.

An if statement just checks that there’s an image to work with and if there is a single <img> tag is generated with the src set to the category images URL we grabbed earlier, the alt attribute set to the category title and the desc attribute set to the category description.

1
2
3
4
5
6
<?php if ($category_image) : ?>

<!-- category featured image -->
<img src="<?php echo $category_image; ?>" alt="<?php single_cat_title();?>" desc="<?php echo wp_strip_all_tags( category_description() );?>"/>

<?php endif; ?>

Here’s the whole template:

If you visit a category with an image you’ll see and immediate difference but the category image and the category title needs some TLC.

Giving The Category Image And Title Some TLC

Open up the style.css file that you created when you created the child theme and add the following css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
header.category-image img {
width: 100%;
padding: 0;
margin: 0;
position: relative;
}

header.category-image h1.archive-title,
position: absolute;
color: #ffffff;
font-size: 48pt;
margin-top: -140px;
margin-left: 25px;
}

This CSS ensures that the image itself has a width of 100% (making it responsive) and we removed any padding or margins so that it fills as much of the space as possible.

The archive-title is quite radically overhauled: it’s color is changed to white, the font-size is greatly increased and the positioning and negative margin ensure that it gets displayed over the featured image like this:

Screengrab of a Twenty Twelve category page with a category image
A pretty impressive improvement for a Twenty Twelve category page

Not bad at all and a vast improvement on this:

Screengrab showing out-of-the-box Twenty Twelve category page header
Pretty bland compared to the featured image version

Note: I did remove all the widgets from the main sidebar to ensure a full-width display.

That’s Twenty Twelve, how about Bosco?

Adding Category Featured Images To Bosco

Bosco is great theme from the Automattic stable and it uses an archive.php template for all its listings, so category, date, author, tag, etc.

Despite this, the changes are not overwhelmingly different to Twenty Twelve. To start, copy the existing archive.php to your child theme folder and open it in your favorite editor.

The grabbing of the category image URL is still at the top of the page but this time there’s an additional check just to make sure that a category page is being generated.

1
2
3
4
5
if ( is_category() && function_exists('category_image_src')) {
$category_image = category_image_src( array( 'size' => 'full' ) , false );
} else {
$category_image = '';
}

The unique class is add to the <header> tag, just like in Twenty Twelve (note, there’s no need to check for being in a category now as it’s just a matter of whether we have a URL or not).

1
<header class="page-header <?php if ($category_image==true) echo 'category-image'; ?>">

And the injecting of the category image <img> tag is also the same, again relying on the presence of a URL to determine whether or not to output the tag:

1
2
3
4
5
6
<?php if ($category_image) : ?>

<!-- category featured image -->
<img src="<?php echo $category_image; ?>" alt="<?php single_cat_title();?>" desc="<?php echo wp_strip_all_tags( category_description() );?>"/>

<?php endif; ?>

Here’s the full modified template:

Not surprisingly, the CSS is slightly different for Bosco although it is only slightly. The major difference is that category title has a class of page-title in Bosco rather than Twenty Twelve’s archive-title (despite the fact that it’s Bosco that uses the archive.php template).

There’s also some styling for the category description to bring it up and under the title.

Again, the end result is pretty good:

Screengrab of a Bosco theme category page with a featured image and title and description overlayed.
Big improvement again and this time the category description is included

Certainly more eye-catching than the original:

Screengrab of the Bosco category page without a category image
The original Bosco category header

These two examples certainly show how featured images can enhance a category page in your WordPress site. As always, a lot will depend on the quality of those images but pick the right image and the results are impressive.

]]>
http://premium.wpmudev.org/blog/how-to-add-feature-images-to-your-wordpress-categories/feed/ 0
How to Bulk Upload Files to the WordPress Media Library Using FTP http://premium.wpmudev.org/blog/bulk-upload-files-to-wordpress-media-library-using-ftp/ http://premium.wpmudev.org/blog/bulk-upload-files-to-wordpress-media-library-using-ftp/#comments Sat, 16 Aug 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=131330 Copying multiple files to the WordPress media library is easy enough. However, copying hundreds to your website is another story.

Unfortunately, you can’t just simply copy files into the Uploads folders in your WordPress directory. While the files will appear in your folder, they will not appear in your media library. WordPress doesn’t not recognize files that are not uploaded via the dashboard uploader.

In today’s Weekend WordPress Project, I’ll show you a straightforward way to transfer media to your site via FTP.

Feature image
Bulk upload images with the Add From Server plugin.

Uploading with Add From Server

The Add From Server plugin offers a simple solution to bulk uploading media to your site. The plugin lets you import media and files into the WordPress Uploads folder from any location on your server.

To use the plugin, install and activate it. Then go to either the Plugins interface and click on Add From Server > Import Files or in the admin sidebar go to Media > Add From Server.

The plugin will display folders in your WordPress directory. Choose the location of your files and check each of the files you want to upload to your media library. If you want to select all files, check the box next to “File” at the top.

Add From Server plugin
Select the server folder where your media is located and check the files you want in your media library.

While testing this plugin, I uploaded 500 images from my desktop to the Uploads folder in my WordPress site. Next, I opened Add From Server and selected “Uploads Folder.” Then I selected all files and at the bottom of the page I clicked “Import.”

It took a little while for the plugin to do its thing (I had 500 files, after all), but sure enough the files all appeared in my media library.

The plugin was last updated in May 2013, but still works fine and I had no problems using it with WordPress 3.9.1. Even with thorough testing and hundreds of files I didn’t receive any errors.

]]>
http://premium.wpmudev.org/blog/bulk-upload-files-to-wordpress-media-library-using-ftp/feed/ 6
How To Properly Add Background Images To Your WordPress Site http://premium.wpmudev.org/blog/how-to-properly-add-background-images-to-your-wordpress-site/ http://premium.wpmudev.org/blog/how-to-properly-add-background-images-to-your-wordpress-site/#comments Sun, 10 Aug 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=131264 Adding a background image to your WordPress site is easy. Right?

Not if your theme doesn’t support it. And wouldn’t it be nice if the background image was full-screen? Be good to have different background images on categories too. And while we are at it, how about using a post’s featured image as the background image?

In this Weekend WordPress Project, I’ll show you how to do all the above and add a visual finishing touch to your WordPress site.

Featured iamge
Add visual punch to your site with fine-grained control over background images

Before You Start…

Before we get into adding background images to your site, something to think about and two plugins to install.

Think About Your Images

Background images can bring many advantages to your WordPress site from visual enhancement to subtle branding. Here’s a recent example from the Australian Federal Government, no less, that adds a visual cue as to the content subject matter.

But you can’t just use any old image as a background; you must choose carefully and, especially make sure that the image is a suitable size.

Before applying these techniques to a live WordPress site check your analytics and, in particular, the screen resolutions of those visiting your site. This will give you a rough indication of the size your images will need to cover.

Install The Plugins

There are a couple of plugins that you’ll need to install to get background images working properly on your WordPress site:

  1. Background Images – this is my small plugin that will ensure that custom background images are supported by your theme and will generate the appropriate URL for the page being displayed (more on this later).
  2. WPCustom Category Image – this plugin adds featured images to categories. You only need to install this plugin if you want to change the background image for each category

Now that you have the plugins installed, let’s start adding some background images.

Adding A Global Background Image

Background images are provided by the custom background theme option. Not all themes support custom backgrounds so the background images plugin ensures that support is switched on which also means that the custom-background class is added to the body tag.

You can set up the background image either through the via Appearance > Background (left) or the theme customizer (right).

Screengrab of the Background settings page and the Background Image tab in the theme customizer
Two ways to add a global background image

Regardless of the method, use the following settings:

  • Position: center
  • Repeat: no repeat (backgrounds rarely, if ever, look good when tiled)
  • Attachment: fixed
  • Background Color: leave as is

Adding Featured Images For Categories

If you want to use a specific background image for a category then you’ll need to install the WPCustom Category Image will allow you to add a featured image for a category.

Once you’ve installed the plugin, go to Posts > Categories, select a category and you’ll see the Add Image button which will allow you to select an existing image from the Media Library or upload a new image.

Screengrab of the category edit page showing the featured image
The WPCustom Category Plugin brings featured images to WordPress

Configuring The Background Images Plugin

So, now you’ve set up your global background image and possibly featured images for your categories: you are now ready to configure how background images operate on your site.

In your WordPress admin interface, click on Appearance > Background Images to get to the plugin’s settings page. Let’s step through the options, one by one.

Screengrab of the settings page
Just four settings provides fine grained control over your background images

Display background on home page only

This setting will restrict the use of the background image to the homepage only. Effectively this means that the options for posts and categories will be ignored.

Make images fullscreen

Having fullscreen background images (essential stretching them if necessary) is essential but I’ve added it as an option so that you can control it. If checked, the plugin will inject this simple CSS that will ensure that your images are full-screen, no matter what the visitors screen size or device:

1
2
3
4
5
6
7
8
body.custom-background {

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Note that this is CSS3 and so any visitors using an older browser such as IE8 or less will simply see the normal image.

Using featured image on posts

If this option is checked, then the post’s featured image will be used as the background image instead of the global background image.

If you decide to use this feature then make sure that the featured image you load up for posts are large enough to act as background images. Too big is fine as they will get resized for use as a featured image on the post.

If your theme does not support featured images then this option will be disabled.

Use featured image on categories

When checked, the plugin will check for a featured image for the category and if there is one this will be used instead of the global background.

If the WPCustom Category Image plugin is not active then this option will be disabled.

Further Tweaks

When testing this plugin across a couple of themes, it certainly seemed to be the case that not enough of the image was visible for it to be very effective.

The answer was to tweak the opacity of the main content container’s background to allow enough of the image to be visible to maintain continuity but not enough to make the content difficult to read.

For example, here’s a page with an opacity of 0.9: not a huge tweak but a massive difference in the impact:

Screengrab of a page showing the impact of changing the container opacity and letting the background image shine through
A small tweak to the content container background opacity brings visual continuity

To make this tweak to your site, you will take a look at the source of any page and find the classes for the first tag after the body tag. For many WordPress themes this is a div tag with the class site.

To set the opacity, use the following CSS:

1
2
3
4
5
div.site {

background-color: rgba(255,255,255,0.90);

}

Changing just the background opacity (the last setting) ensures that the font and images remain at full opacity.

You can add this CSS by either using a custom styling plugin (such Jetpack) or by creating a child theme (a bit overkill just for this tweak). Do NOT edit the main style.css file in your theme!

If, of course, you wanted your background image to be completely visible (as is the case with example I mentioned at the beginning of the article) then just set the opacity on the background-color to 0.

Get Creative In The Background

Adding backgrounds to your WordPress site, if done properly, can greatly enhance its visual impact. With these couple of plugins and the odd CSS tweak it’s possible to have pretty fine-grained control on what images are used where.

Time to get creative with your backgrounds.

]]>
http://premium.wpmudev.org/blog/how-to-properly-add-background-images-to-your-wordpress-site/feed/ 0
How to Upgrade WordPress Themes – Even If They Are Customized http://premium.wpmudev.org/blog/upgrade-wordpress-themes-even-if-they-are-customized/ http://premium.wpmudev.org/blog/upgrade-wordpress-themes-even-if-they-are-customized/#comments Mon, 04 Aug 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=131084 Upgrading your website’s theme to the latest version is highly recommended, not only because it ensures you have all the latest features, but you’ll also be up-to-date with any security patches.

There are many ways to upgrade a WordPress theme. In this post we’ll look at a few different methods, from automatically upgrading to ensuring a customized theme isn’t unintentionally over-written.

Upgrading WordPress
Follow the steps below to easily upgrade your WordPress theme.

Back Up Your Theme Files

First thing’s first – before we get started you need to back up your database and your current theme. Since we’re replacing and updating theme files, there’s a chance something could go wrong so it’s best to play it safe and have a backup.

Use whatever method you feel most comfortable with. You may want to simply copy your entire WordPress directory to your computer using FTP and backup your database with a plugin. You may have a VaultPress account or a membership with some other third-party backup site that does all the hard work for you.

Automatic Upgrades

Automatically upgrading your theme is easy and straightforward. There are a couple of ways to take advantage of automatic upgrades:

  • In your WordPress dashboard, go to Appearance > Themes. Any themes that have updates available will display an alert banner. Click on the theme you want to upgrade and click on “update now.”
New version available
Automatically upgrade your WordPress theme.
  • In your WordPress dashboard, go to Dashboard > Updates. The themes that have updates available will be listed. Select the theme you want to update and click “Update Themes.” This is also a quick way to update multiple themes.

WordPress 3.7 introduced automatic background updates for themes and plugins, which is disabled by default. To turn this feature on for themes, add the following snippet to your theme’s functions.php file:

1
add_filter( 'auto_update_theme', '__return_true' );

This feature will only work for themes downloaded from the WordPress Theme Repository. It you are using a premium theme, it will not automatically update. Premium theme providers usually offer their own instructions for upgrading themes.

Uploading and Replacing an Existing Theme

Most theme providers require that you manually upload a new version of a theme and replace an older version in order to upgrade it.

However, if you go to Appearance > Themes > Add New and try to upload a new version of a theme that is already in your site’s themes directory, it will fail and you’ll get an error message telling you the destination folder already exists.

Replacing Twenty Fourteen
Avoid this error by renaming the old version of your theme.

The reason for this error is due to the fact you can’t have two folders in your themes directory with identical names (obviously!).

There are a couple of simple solutions:

  1. Login to your site via FTP or cPanel and delete the old theme and then upload the new version. Make sure you make a backup of the old version of your theme just in case something goes wrong.
  2. If deleting your old theme makes you nervous, another option is to rename the old version of the theme. This will allow you to successfully upload the new version of the theme.
    • Login to your site via FTP or cPanel and navigate to wp-content/themes/ and find your old theme.
    • Rename your old theme something like “theme-old” (replacing “theme” with the name of your theme).
    • Upload your new theme.

The old and new versions of the theme will both appear in the themes interface, but you will be able to distinguish them by their folder names and version numbers.

Old and new themes
The old and new versions of your theme will sit side-by-side.

Upgrading a Customized Theme

Have you ever spent countless hours customizing your site, only to lose all of your hard work after updating the theme?

You probably discovered afterwards that you should have created a child theme.

A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify or add to the functionality of the parent theme.

Most importantly, creating a child theme lets you make changes to your site without touching your original theme’s code, allowing you to update your site without the threat of lost all the customizations you’ve made.

You can find out more about how to create a child theme in our article How to Create a WordPress Child Theme.

If you want to upgrade your theme but made customizations without using a child theme, read on.

Uploading Only Changed Files

If you’ve made changes to your theme’s code, you may want to see if the updates in the new version of your theme are extensive.

If your theme’s developer has published a list of changes in the new version in a changelog or a readme file and only a file or two have been changed, you may opt to just upload and overwrite the files in the older version via FTP or your cPanel.

If any of the updated files happen to be ones you’ve customized and you remember which lines of code you’ve changed, you can make the customizations again via Appearance > Editor.

Re-customizing Your New Theme

If you remember all the customizations you made to your theme or you’ve saved them somewhere, the easiest way to re-customize it to automatically upgrade it as per the methods above and then make the customizations to your site again.

Yes, it’s annoying to have to make all the customizations a second time, but at least this time you can implement a child theme so you don’t have to worry about doing this again.

Make sure you make a backup of your site before doing this so you can revert to your old theme if something goes wrong.

What If I Can’t Remember My Customizations?

If you haven’t saved your customizations somewhere or you can’t remember what changes you made, don’t stress! It makes it harder to upgrade your theme, but it’s still possible.

There are programs that can help you compare two version of your themes, i.e. your old version versus your old customized version, or your old customized version versus the new version.

If you use OS X, Kaleidoscope is a great premium program that lets you compare text in two different files. WinMerge is a popular free and open source alternative for Windows users.

Let’s take a look at how to compare two versions of a theme using Kaleidoscope. Since this program isn’t free, you may want to search for free or cheaper alternatives, though Kaleidoscope does have a 15-day trial period if you want to try it out.

1. Copy your old theme and the updated version to your desktop so you can easily access your files. Open Kaleidoscope and drag and drop in the files you want to compare.

Kaleidoscope
Drag and drop your files into Kaleidoscope.

2. The program will display the text in both files side-by-side so you can compare changes.

In this example, I discovered a code snippet I had added to the bottom of my old functions.php file.

Kaleidoscope compare changes
Compare the differences between the new and old versions of your theme.

3. You can change copy any code in the old file into the new file. Click on a block (the section in pink) and at the bottom of the window click on “Copy to right.” The text from your old file on the left will automatically copy over to your new file on the right.

Kaleidoscope copy left to right
Easily copy code from your old version on the left to your new version on the right.

4. Repeat these steps until you have copied over all customizations. When you’re done, zip up the old theme and upload it to your site via Appearances > Themes > Add New.

Summing Up

Upgrading themes to the latest version ensures you have not only the most feature-rich version, but all the most secure.

Whenever you do update your themes, always make a backup of everything – your old theme, database and new theme. If something does go wrong while you’re editing you’re file, you will have a backup available so you can start the process again without losing any important files.

]]>
http://premium.wpmudev.org/blog/upgrade-wordpress-themes-even-if-they-are-customized/feed/ 3
How to Change the Default WordPress Uploads Folder http://premium.wpmudev.org/blog/change-default-wordpress-uploads-folder/ http://premium.wpmudev.org/blog/change-default-wordpress-uploads-folder/#comments Sun, 03 Aug 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=131064 There are many different reasons why users might want to change the default upload directory in WordPress.

In terms of performance, it makes it possible to host images on a subdomain, also making backups more efficient. Changing the directory can also create a different URL structure and organization for media files.

Prior to WordPress 3.5, you could change the upload directory path from the Settings menu in the backend, but this is no longer possible.

In today’s Weekend WordPress Project, I’ll show you how to easily change your default uploads folder.

Media folder
Create a custom media uploads folder for your site.

Change Default Media Folder

Open your wp-config.php file, locoed at the root of your WordPress installation, and add the following snippet:

1
define('UPLOADS', 'wp-content/myimages');

Make sure you add this code before the line:

1
require_once(ABSPATH.’wp-settings.php’);

If the directory doesn’t already exist, WordPress will automatically create it as long as the wp-content folder is writeable. Otherwise you can great the folder yourself via FTP, cPanel etc.

Media folder
Create a custom media folder for your WordPress site.

You can also change the way uploads are organized. If you open your uploads folder you’ll notice that files, by default, are sorted into years. You can change your file organization so that all media files are dumped in the one folder. Go to Settings > Media and uncheck “Organize my uploads into month- and year-based folders.”

Not only will it make your URLs simpler, it will also make it easier to see all your files in one place instead of having to sort through month and year directories.

]]>
http://premium.wpmudev.org/blog/change-default-wordpress-uploads-folder/feed/ 2
How to Remove the Date from Your WordPress Posts http://premium.wpmudev.org/blog/remove-date-from-wordpress-posts/ http://premium.wpmudev.org/blog/remove-date-from-wordpress-posts/#comments Sat, 02 Aug 2014 15:30:00 +0000 http://premium.wpmudev.org/blog/?p=131039 If the content on your site isn’t time-oriented, you may want to remove the dates from your posts since this information isn’t relevant.

Removing the date may also be helpful if you don’t regularly update your site – posts with older dates can give the impression that your content is outdated.

In today’s Weekend WordPress Project I’ll show you a couple of methods for removing the date from your posts.

Remove date
Remove the date from your WordPress posts.

Removing the Date With a Plugin

The easiest way to remove the date is with the WP Post Date Remover.

While this plugin hasn’t been updated since 2012, I tested it and it still works fine.

There are no options with this plugin. Just install and activate it and it will remove the dates from your homepage, pages and posts.

The only problem with this plugin is that for newer themes like Twenty Fourteen and Twenty Thirteen it doesn’t remove the clock icon. If this is an issue with your theme, you may want to try implementing the code below.

Removing the Date With Code

It’s quick and easy to remove the date from your posts. Simply create a child theme and add the following snippet to your newly created stylesheet:

1
2
3
.entry-date {
display: none;
}

This code will remove both the date and the clock icon that displays next to the date on themes such as Twenty Fourteen and Twenty Thirteen.

I tested this code with all the default WordPress themes. While it completely removes the dates on all themes, it doesn’t remove words such as “Posted on”, which is usually published before the date on the Twenty Ten and Twenty Eleven themes.

To remove the extra words for Twenty Eleven, click on Editor in the admin sidebar and open functions.php. Search the text for “Posted on” and you’ll find this code:

Twenty Eleven code
Remove the associated text in your functions.php file to completely remove the date from your posts.

Delete “Posted on.” You may also want to capitalize “By” so it looks correct on the front-end.

 

]]>
http://premium.wpmudev.org/blog/remove-date-from-wordpress-posts/feed/ 2
Making Your WordPress Images More Than Just Eye Candy http://premium.wpmudev.org/blog/making-your-wordpress-images-more-than-just-eye-candy/ http://premium.wpmudev.org/blog/making-your-wordpress-images-more-than-just-eye-candy/#comments Thu, 31 Jul 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=131036 Why do you include images in your WordPress posts?

Is it just to break up the text, make it look a bit prettier, a bit more inviting? Or are they an integral part of the story you are trying to tell?

Here’s how to elevate your WordPress images from eye candy to storytelling juggernauts with descriptions that overlay on click, automatically appear when the image is visible or form a CSS-inspired image maps.

Featured image
Make your images an integral part of your storytelling

I’ve mentioned The Brief before, the tablet-based digital magazine from the Innovation unit of the Australian public broadcaster, the ABC, when I wrote about horizontal-scrolling content.

What’s fascinating about the product is that every issue seems to incorporate yet another novel way to deliver content. The Brief’s treatment of images is the inspiration for this post and whilst I’m only going to scratch the surface, it does show just how unnecessarily boring and static traditional web content can be.

I’m going to show how to better integrate your images into your content by providing on-image information.

Using a small plugin, jQuery and CSS, we’ll add the capability for your WordPress site to:

  • Overlay a description on an image by clicking on the image
  • Create a CSS image map to allow displaying of multiple items of information by clicking on hotspots in the image
  • Automatically overlay a description on an image when the image is scrolled fully into view in the browser window

How It Works

The solution makes use of the caption shortcode so obviously the images have to have captions.

Extra attributes are added to the img tag to describe how the information is to be styled, the effect to be used to reveal the information and how the reveal is triggered.

A simple WordPress plugin adds the necessary scripts and CSS to the page output using the wp_enqueue_scripts action and also hooks into img_caption_shortcode to rewrite the HTML adding a description if necessary.

For the sake of compatibility I’ve used pretty much the same HTML as the default shortcode but really this solution should use the HTML5 figure and figcaption tags.

That’s all that takes place in WordPress itself; the rest of the solution is client-side, where a small script sets up event listening and handling. The inview trigger is provided by the Inview jQuery plugin, so a big thank you to author Christopher Blum.

The CSS is all fairly straight-forward but it’s probably worth pointing out that the image wrapper, div.wp-caption has its position set to relative whilst the description wrapper, div.wp-image-description is set to absolute. This makes it possible to keep the description within boundaries of the image.

Walking Through The Examples

Let’s walk through an example of each of the 3 techniques. Before doing anything else, though, install the plugin.

A Simple Overlay

Screengrab of an image with the description overlayed
Click on the image to reveal the description; click again to hide

This is the simplest technique and so is a good introduction.

First, jump into the WordPress Admin interface, go to Media, select an image to edit and some content to the Description. Make it of a reasonable length so that you’ve got something to work with.

Now go and create a post, click on Add Media, select that image you just edited and select none for the link. Insert the image.

Swap to Text view and on the <img> tag add the following attributes:

  • data-desc-style=”box-overlay”
  • data-desc-reveal=”fadein”
  • data-desc-trigger=”click”

Publish the post and view it. Clicking on the image should display your description in a 75% opaque box that’s probably the full-width of the image.

Go back to the post edit screen and add another attribute:

  • data-points=”10px,10px,60%”

Your caption shortcode should look something like this:

Click Update, refresh the post view and click on the image. This time you should find that the box only goes two-thirds of the way across the image and is slightly indented.

If you supply the data-points attribute, then the client-side script uses it to create a style attribute (top, left, width, height) which it then adds to description <div> thus overriding the box-overlay styling.

Not bad. Let’s get a little more complicated and build an image map.

Building A CSS Image Map

Screengrab showing the hotspot and the information displayed
Hotspots on the image control the information displayed

Remember the old HTML image maps? You could define hotspots on an image that could be hyperlinked. Well, this is providing the same sort of functionality but with CSS and jQuery and we are just going to use it to display different information depending on where the visitor clicked on the image.

Go to Media and pick a different image and edit it. Add some content to the Description but this time wrap it in a <div> as follows:

1
<div data-points="1%,1%,100px,100px">Your content....</div>

The data-points attribute defines the hotspot: in this case you’ll find it near the top left corner of the image. It’s very much trial and error to get the hotspot in the right place but doesn’t take long to get the hang of. I would recommend using % for top and left, otherwise you’ll find that any scaling of the image will throw out your hotspots.

Add as many hotspots as you like, coded exactly as above.

OK, back to the post, add the image via Add Media (making sure there’s a caption and the image is not linked) and then in text view add the following attribute to the img tag:

  • data-desc-style=”map”

Here’s the caption:

Update the post, refresh the view and scroll to the image. Now as you move your mouse over the image, the hotspots will show up as you mouseover. Click on a hotspot and the description will appear in the box-overlay at the bottom of the image.

This is a simple but really engaging technique. it works best for images where you’ve got a lot of points of interest. For example, The Brief used it to provide short bios on 7 new politicians by hotspotting their faces.

Those two examples were both based on the reader taking action but what about an automatic reveal?

Revealing A Description When The Image is In View

Screengrab showing the description on a fully viewable image
Description is only displayed when image is fully in view

So the idea here is to use the same box-overlay as the first example but for it to automatically appear when the image has fully scrolled into view (i.e. both top and bottom are visible).

It’s really like a lazy load but instead of loading the image, we are displaying a description, thanks to the Inview jQuery plugin.

If the image you used on the first example is a reasonable size then let’s reuse it; if not set up a new image. Remember, the image should be of a size where the whole image can fit in the viewport.

Once you’ve got the caption shortcode in your post, go to the Text view and ensure the <img> tag has the following attributes:

  • data-desc-style=”box-overlay”
  • data-desc-reveal=”fadein”
  • data-desc-trigger=”inview”
  • data-points=”10px,10px,60%”

The caption looks like this:

As you can see, it’s very similar to our first example, the only difference is that the trigger is now inview rather than click.

Update the post, refresh the post view and start scrolling. When the image first comes into view, the description should not be visible but as the bottom of the image comes into the viewport, the description will fade in.

If you keep scrolling (so that the top moves outside the viewport) then the description will disappear.

Extending The Solution

This solution is just begging to be extended, especially the reveals. The value of the data-desc-reveal gets added as a class to the div.wp-image-description when the trigger takes place, so adding new transitions is just a matter of adding the appropriate class.

There’s no rocket science here just some simple but effective techniques for elevating your images from eye candy to an integral component of your storytelling.

]]>
http://premium.wpmudev.org/blog/making-your-wordpress-images-more-than-just-eye-candy/feed/ 3