1

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?

Thanks!!

Improve this question
2
  • Do you want to page to refresh or not? – Johnathan Waters Feb 27 '14 at 19:47
  • It doesn't particularly matter, ideal would be no refresh, but it's fine if it has to. – ajmajmajma Feb 27 '14 at 19:51
3

For your drop down,

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

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.

Improve this answer
5
  • 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 Feb 27 '14 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. – Johnathan Waters Feb 27 '14 at 20:49
  • This is an old video but this may be more up your ally youtube.com/watch?v=jTV51dOySVg – Johnathan Waters Feb 27 '14 at 20:52
  • So something like - if selected then show else hide? – ajmajmajma Feb 27 '14 at 21:01
  • Correct. Or go with the video – Johnathan Waters Feb 27 '14 at 21:26
0

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

<select class="group">
  {exp:channel:categories
    category_group='1'
    channel='gallery'
    disable='category_fields'
    show_empty='no'
    style='linear'
  }
    <option value="{path='gallery/view'}"{if segment_3 == category_url_title} selected{/if}>{category_name}</option>
  {/exp:channel:categories}
</select>

<section class="gallery">
  {exp:channel:entries
    channel='gallery'
    disable='pagination|member_data'
    require_entry='yes'
  }
    {if no_results}
      {redirect='404'}
    {/if}

    <img src="{gallery_img}" alt="{title}">
  {/exp:channel:entries}
</section><!--/.gallery-->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
  $('select.group').change(function(){
    window.location = $(this).val();
  })
</script>

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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