MixItUp - sorting images by image tag
Permalink
Hey there!
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.
<ul id="Grid">
<li class="mix dogs"></li>
<li class="mix cats"></li>
<li class="mix krakens"></li>
<li class="mix dogs cats"></li>
<li ...
</ul>
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!
Best,
Janek
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.
<ul id="Grid">
<li class="mix dogs"></li>
<li class="mix cats"></li>
<li class="mix krakens"></li>
<li class="mix dogs cats"></li>
<li ...
</ul>
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!
Best,
Janek
Another way you could handle this is to take one of many existing gallery blocks that are out there, perhapshttp://www.concrete5.org/marketplace/addons/sortable-fancybox-galle... and create a custom block template for it.
You could also look at something like this as a starting point -https://github.com/jordanlev/c5_designer_gallery...
You could also look at something like this as a starting point -https://github.com/jordanlev/c5_designer_gallery...
Hey Ryan,
Thanks alot for your input. I will try these steps - if I should fail, I am looking forward to your post ;)
Best,
Janek
Thanks alot for your input. I will try these steps - if I should fail, I am looking forward to your post ;)
Best,
Janek
Hi janek,
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?
Thanks,
Konstantinos
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?
Thanks,
Konstantinos
Hey Konstantinos,
I moved to another gallery - gave up on Mixitup.
Sorry, can't help.
Good luck to you!
I moved to another gallery - gave up on Mixitup.
Sorry, can't help.
Good luck to you!
I would suggesthttp://isotope.metafizzy.co
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.
In terms of the blog post I mentioned, I didn't quite do what we're talking about here with Javascript filtering, but I did do a broader post about using file sets and the composer to create gallery pages - it would perhaps be a good basis for adding some sorting: http://www.mesuva.com.au/blog/concrete5/creating-a-composer-driven-...
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:
<script type="text/javascript"> var $container = $('.artwork-grid'); $container.isotope({ layoutMode : 'fitRows' }); $('#filters a').click(function(){ $('#filters a').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); </script>
In my block template, the output code for the filters list looked like this:
<ul id="filters"> <li><a href="#" data-filter="*" class="active">show all</a></li> <?php foreach($keywords as $kw) { echo '<li><a href="#" data-filter=".'.strtolower(str_replace(' ', '_', str_replace('/', '', $kw))).'">'.$kw.'</a></li>'; } ?> </ul>
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.
In terms of the blog post I mentioned, I didn't quite do what we're talking about here with Javascript filtering, but I did do a broader post about using file sets and the composer to create gallery pages - it would perhaps be a good basis for adding some sorting: http://www.mesuva.com.au/blog/concrete5/creating-a-composer-driven-...
Hi mesuva, sorry for the late reply and thanks for the input. I switched to Isotope, everything is setup and works nicely! Was sad to move away from MixItUp though as it is non commercial and I liked the website/documentation/demos a lot.
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.
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.
I've done something recently like this on a site:
http://www.missionarts.com.au/gallery-and-shop/...
(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.
-Ryan