Forums

Sorting/Filter Gallery Images by Keyword or Tag?

Permalink 1 user found helpful
Dearest C5 community,

I am trying to set up a Filter navigation bar above a gallery set of images. The images are for a list of furniture inventory that I would like to be able to "Filter" by category (i.e. couches, living room, bedroom, etc). Is there someway to A) add keywords or tags or alt id's to each individual image AND B) write some kind of code to only display those particular images? I know the general basis of the JS code that would do this if I had coded the gallery, but with the Add-On, I have no idea how to do this.

Is there a different gallery add-on that does this kind of thing? Or, is there some other way to make this happen?

Thanks for your help!
sethrr
 
jordanlev replied on at Permalink Reply
jordanlev
I imagine it wouldn't be too difficult using file attributes. Create a new file attribute (Dashboard -> Files -> Attributes), then create a custom template (or override the default view.php template) for the block and output the file's attribute as some kind of html element attribute (e.g. <img src="..." data-category="<?php echo $theAttributeValue; ?>" ... />).

I could try giving you some sample code but I am not sure which addon you're referring to specifically (there are a lot of gallery addons) -- if it's a free on, please post a link to its marketplace page so I can take a look at its code.

-Jordan
sethrr replied on at Permalink Reply
sethrr
Thanks for your help Jordan.

I am using the basic free gallery add-on:
http://www.concrete5.org/marketplace/addons/gallery/...
jordanlev replied on at Permalink Reply
jordanlev
Since you say you know the general basis of JS code to make this work, I'm assuming you're a designer, and familiar with HTML and CSS. (Let me know if I'm wrong about this and I can try to give a less jargon-y answer).

First, create a new attribute (via Dashboard -> Files -> Attributes) -- give it the handle "gallery_category", and the name "Gallery Category".

Then, override the template for the gallery block by copying this file:
SITEROOT/packages/gallery/blocks/gallery/view.php

...to here:
SITEROOT/blocks/gallery/view.php

(you'll probably need to create that new "gallery" directory under your site's top-level "blocks" directory first).

Now edit that file, and around line #88 find this code:
<td id="file_<?php echo $imgInfo['fID'];?>" class="galleryImages">

...and change it to this:
<td id="file_<?php echo $imgInfo['fID'];?>" class="galleryImages" data-category="<?php echo $f->getAttribute('gallery_category'); ?>">


Now you can access the category names with jquery like so:
$('.ccm-gallery td.galleryImages').attr('data-category')


If you want to target just the elements for one category, you could do this:
$('.ccm-gallery td.galleryImages[data-category="whatever"]')


If you wanted to get a list of all possible category names (for creating a menu of available choices, for example), you could use some javascript like this:
var categories = []
$('.ccm-gallery td.galleryImages').each(function() {
  var category = $(this).attr('data-category');
  if ((category !== '') && !$.inArray(category, categories)) {
    categories.push(category);
  }
});


Two things to note:
1) Don't set the "Max Number of Thumbnails" setting in the Options pane when adding/editing the block -- this will cause some of the thumbnails to be hidden, and hence you can't ever show/hide them with your own jquery.
2) It's going to be tricky to make this work visually because the images are outputted inside an HTML <table>. (tsk tsk c5 developers!). You might need to modify the overall output in your custom view.php file so it doesn't use tables at all.

Hope this helps!

-Jordan