I am going to try an explain this as best as I can, it is a pretty broad question of which I a still working out the logic (before I try coding). I figure I will ask in here to see if anyone has dealt with anything of the like.

I am creating a photo gallery with a small select list at the top that lets you switch between designated sections of photos (I was thinking I could apply categories or something like that). I'm wondering if there is some kind of way to do this with EE logic, have a select list with the category names in them that feed into an entries channel below it with the pictures themselves maybe? Anyone have a foot in the door with something like this?


  • Do you want to page to refresh or not? Commented Feb 27, 2014 at 19:47
  • It doesn't particularly matter, ideal would be no refresh, but it's fine if it has to.
    – ajmajmajma
    Commented Feb 27, 2014 at 19:51

2 Answers 2


For your drop down,

{exp:channel:categories channel="whateveryourchannelis" style="linear"}
<option value="{category_id}">{category_name}</option>

Then when you are outputting the images put the category id's for the entries in a data attribute. Bind a on change event to the select field. Then used jquery to hide all the entries that are not in the newly selected category.

There are many other ways to do it with if you wanted a page refresh. I would recommend studying the documentation a little more and maybe browsing around on this site to get a handle on how ee categories work. Once you understand there are some really cool things you can do with ee.

  • This is great thank you very much for your help. I'm taking baby steps here, as this is new to me. How do I pass the category selected to the channel I'm opening for the images below?
    – ajmajmajma
    Commented Feb 27, 2014 at 20:43
  • You would not pass the category in. When the page first loads, just list all the images out. Then using javascript you could hide or show the elements based on the category you have selected. Commented Feb 27, 2014 at 20:49
  • This is an old video but this may be more up your ally youtube.com/watch?v=jTV51dOySVg Commented Feb 27, 2014 at 20:52
  • So something like - if selected then show else hide?
    – ajmajmajma
    Commented Feb 27, 2014 at 21:01
  • Correct. Or go with the video Commented Feb 27, 2014 at 21:26

Assuming each photo is a channel entry, and you are grouping them based on category, this should be pretty easy.

<select class="group">
    <option value="{path='gallery/view'}"{if segment_3 == category_url_title} selected{/if}>{category_name}</option>

<section class="gallery">
    {if no_results}

    <img src="{gallery_img}" alt="{title}">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    window.location = $(this).val();

This will reload the page to the updated category URL, and the channel entries tag will dynamically display only photo entries that are in that category.

If you wanted to get fancy, you can use ajax to load the updated photo listing without a page refresh.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.