How to Create Image Galleries with Filtered Search for WordPress Websites

How to Create Image Galleries with Filtered Search for WordPress Websites
Like Tweet Pin it Share Share Email

How to Create Image Galleries with Filtered Search for WordPress Websites

I remember looking for filtered search solutions for niche sites many years ago.  The best I could come up with back then was hacking up a few real estate WordPress themes.  Obviously not idea.

Fortunately, WordPress plugins have come a long way, but it’s still not as easy as you’d like.

What is a filtered search image gallery?

It’s an image gallery that website visitors can narrow down an image search by selecting various search parameters… often drop-down menus or check boxes.  Another term for this is parametric search.

Two of my niche sites are image-centric, so being able to offer filtered search to visitors is a terrific user-experience tool for them.

Why would you want to offer filtered search on your website?

Not every site benefits from filtered search, but some types of sites do.  Real estate sites, for example, benefit big time.  Filtered search enables visitors to search for homes via multiple search criteria such as price, number of bedrooms, number of bathrooms and whatever other criteria (taxonomies) you offer.

When filtered search makes sense for your site, it’s a very useful tool your visitors will appreciate.

Over the years I’ve tried every tool I could find to set up filtered search.  Some are awesome; some not so great.

Which tools you choose also depends on how you want to set things up as well as what types of content you want your visitors to be able to search.  For instance, perhaps you want to offer filtered search for posts or custom post types of pages.  Me, I need to offer filtered image search.

Here’s what I did to make get filtered (parametric) search to work on my niche sites.

The following uses screenshots of an example gallery.

Jump to the example image gallery with filtered search!

Step 1: Custom Post Type UI Plugin

The Custom Post Type UI plugin is the leading plugin for creating custom taxonomies.  If you have a complex taxonomy set up, you’ll definitely want this plugin. If your taxonomy structure is simple, you may be able to get away with only the next tool.

Once you get this plugin installed, you need to create your taxonomies.  If complex, plan it out carefully.  Going back after you’ve assigned taxonomies to thousands of images or posts is a lot of work.

Here’s a screenshot showing you how to create a custom taxonomy with Custom Post Type UI plugin:

Custom Post Type UI Screenshot

Once a custom taxonomy is created, you go and add the various criteria / options for each custom taxonomy.

For example, if you’re building a car website, the custom taxonomy you’d create in the above screen would be “Color”.  The criteria/options you place for “Color” would be “red”, “white”, “blue”, etc.

Create custom taxonomies with Custom Post Types UI plugin

Step 2: Enhanced Media Library Plugin

  • Free and Premium versions

Enhanced Media Library plugin makes it possible to assign your custom taxonomies for each image in your media library.  It has built-in media categories and tags.  As stated above, if you you can organize everything taxonomy-wise with just media categories and tags, you don’t need the Custom Post Type UI plugin. If you need a more robust taxonomy structure, you’ll need both Custom Post Type UI and Enhanced Media Library Plugin.

Once you set up your taxonomies, assigning applicable taxonomies to each image is super simple.  You simply click the image in the media library and then check the taxonomies that apply on the right.  This is tedious if you have thousands of images like I do.  Hence I hired 2 VA’s here to do the job (and they do it very well).

In order to have the check boxes show up in the media library, do the following:

Settings => Media=> Media Taxonomies (it’s a Tab) => Scroll down the page to the “Options” section as show below:

Set up Enhanced Media Categories Plugin

 

Step 3: Upload images or create your posts

If you’re assigning taxonomies to images, upload your images and assign the taxonomies.  If you’re creating a filtered post grid, create and publish those posts and while doing so apply the applicable taxonomies.

This can be an enormously time-consuming task if you have hundreds or thousands of images/posts to tag with taxonomies.

However, in order to proceed to the next step, you need to have something to filter, so this must be done before you can set up your filterable galleries or filterable post grids.

Once you have your images uploaded, when you click an image in the media library, you custom taxonomies and media categories will show up on the right as follows (see screenshot below):

All you do is click each image and check all that apply.  You can imagine this can be very tedious if you have hundreds or thousands of images.

Assigning custom taxonomies and media categories to images in WordPress media library
WordPress media library with Enhanced Media Library Plugin showing custom taxonomies and media categories.

FYI, the pro version of Enhanced Media Library plugin does permit bulk tagging, but when you do that obviously you must apply the same options to all the images you select for bulk tagging.  I can say the pro version is worth the cost for this feature along.

Step 4: Content Views Pro Plugin (CVP)

  • Free and Premium versions

The final tool to get this all set up is the Content Views Pro plugin (read my full Content Views Pro review here).  While there is a free version, you’ll need the pro version if you wish to display your filtered search tool on your website.  FYI, CVP calls it’s filter tool “shuffle filter”.

Creating your filtered search image gallery or post grid is very, very easy with CVP.

Just do the following:

Set up Custom Views Pro filters

Notice in the above screenshot that for “Content Type” I chose “Media”.  That’s for images.  However, with Content Views Pro you can create these galleries with posts, custom post types, pages, and coupons.

Below you’ll set up exactly which images you wish to filter into or out of the gallery.

 

Assigning media categories and custom taxonomies to Custom Views pro

Next, toggle over to the display settings.  Customize to your preferences.  Many display options available.

Setting up Custom Views Pro display options

More Custom Views Pro display features

Custom Views Pro display options

Finally, set up the shuffle filter:

Setting up Content Views Pro Shuffle Filter

Will Content Views Pro filter by post or custom post type?

Yes it does.  It’s much more than just a gallery plugin.  It’s an amazing grid and filtered search and gallery plugin all rolled up into one insanely useful tool for WordPress websites.

Step 5: Inject your gallery in a post or page with CVP shortcode

The final step is taking the CVP shortcode and placing it in a post or page where you’re filtered search gallery / post grid will appear.

This is super easy. Just copy the shortcode generated by CVP.

Below is an example of an image gallery that can be searched via filters.

Step 6: Add Additional Content (Optional)

You might consider adding additional content to the posts/pages where you display your filtered search gallery or post grid.  It’s totally up to you.  I usually at a minimum add 150 words; more often adding 400 to 600 words of content before and after the gallery.

That’s all there is to it.

Example Filtered Search Gallery:

Here’s the resulting test gallery:

Loading...

=> Click here to get Content Views Pro

My approach is one of several.  There are other fantastic tools (plugins) you can use to get the same feature on your site.  Check them out (I’ve used both):

2 other solid options to try

If the above doesn’t appeal to you, there are other avenues to create filtered search features for your website visitors.  Check out the following:

1. FacetWP:  

This creates really nice parametric search pages, but it’s more complicated to use than Content Views Pro. You need to know a bit of PHP, but if you get it working, the result is amazing.  Here’s a demo.  Yes, you will be impressed.  You can get around the PHP requirement with Caldera Clarity for FacetWP.

I’ve used both FacetWP and Caldera Clarity.  They work well, but since Content Views Pro is easier to use and faster to create many filtered search galleries, I stuck with CVP.  That said, I can totally see why one would opt for FacetWP.  The search interface is awesome.

2. WP Types:  

This developer offers a full suite of plugins and themes you can buy to create extremely complex parametric search websites.  However, it has a steep learning curve.  I bought it and tried and gave up… it was easy to give up because I knew at this point how easy Content Views Pro is to use.  Here are some showcase sites.

Which do I suggest?

If you’re great with figuring out technology, CSS and coding, I believe WP Types is the most robust and complex filtered search plugin available.  It can do a ton, but it’s not so easy to learn.

If you like the clean and super user-friendly interface of the FacetWP filtered search display, go with that.  I can’t argue with that choice one bit.

I primarily use CVP and am very happy with it. The developer team is constantly adding new features.  I’m constantly suggesting features, some of which they’ve incorporated, so I believe this plugin has a very solid future with respect to helping more WordPress websites offer filtered search capabilities.

 

How to Create Image Galleries with Filtered Search for WordPress Websites
How to Create Image Galleries with Filtered Search for WordPress Websites

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *