MixItUp - sorting images by image tag
I am currently trying to implement MixItUp (http://mixitup.io/) into Concrete5. Turns out to be more complicated than I am able to handle ;)
The script uses li elements and sorts them by their class.
<li class="mix dogs"></li>
<li class="mix cats"></li>
<li class="mix krakens"></li>
<li class="mix dogs cats"></li>
I want to be able to sort images by their tags.
The problem is:
i have no idea
- how to print the image tags into the class element - not even how to print them at all... the image helper does not seem to be able to do this?!
- how to place the images into a list at all...
Can anybody give me some directions on how to achieve this?
Thank you so much in advance!
I've done something recently like this on a site:
(it uses the jQuery plugin Isotope, but that's almost exactly the same kind of script as MixItUp it appears).
It's actually on my todo list to write a blog post sort of along these lines or do a quick video on it as it wasn't overly hard to do, it was just a case of know what components to use - concrete5 has some really nice features built in to handle a case like this, it's really just the output that needs to be customised. I'm hoping to do this in the next week or two (but I can't promise anything!)
It depends a little on how you want to actually manage the images and their metadata. On the link above each piece of artwork is actually managed as a (composer driven) page and the image and details are custom page attributes. In this case, I've created a custom template for a page list block, effectively outputting each page as list item, along with it's thumbnail and the classes it needs.
Alternatively, you could use a file set to group all your images and use the block,http://www.concrete5.org/marketplace/addons/list-files-from-set/... and create a custom template for it. These would give you a really good starting point template for outputting images -http://www.concrete5.org/marketplace/addons/image-list-templates/...
You'd use file tags (or maybe a select custom file attribute) to further tag your images and use this information to output your classes. You might even be able to simply use multiple file sets to do the tagging, I reckon there's a few ways you could manage this.
The file set approach as opposed to the page list approach is perhaps easier to develop - it just depends on whether you are just needing to just output the gallery, or if each image is actually some sort of link to a larger, more complex entity.
You could also look at something like this as a starting point -https://github.com/jordanlev/c5_designer_gallery...
Thanks alot for your input. I will try these steps - if I should fail, I am looking forward to your post ;)
I am trying to implement a mixitup gallery as well. You don't really have to put your images in a list. You can wrap them inside any html block. What I did is have a <div> container and then the entries were <table> blocks.
Did you first try out a simple example, like sorting a text list or something similar? In my c5 website the instantiation of MixItUp seems to brake the Dashboard and the filtering does not work properly.. At the beginning the items are correctly filtered, but as soon as the transition effect ends, all the items of the list appear again.
Did you have any similar problem? Is MixItUp working for you for simple lists?
I moved to another gallery - gave up on Mixitup.
Sorry, can't help.
Good luck to you!
I didn't have any conflicts or any other problems, it just worked well.
My jQuery to set it up looked like something like this:
In my block template, the output code for the filters list looked like this:
And then on the list items of my 'artwork-grid' UL, I output the classes for that specific item. I just had to make sure that I replaced any spaces with underscores.
I could post my whole template here, but it's a page list block template and a little intertwined with other things so I don't want to confuse things.
Isotope costs several bucks but is more powerful and integrates nicely with c5. Support is also provided by the developer team, which was missing with MixItUp.