Filtering posts on the listing page after applying a custom choice object

[russelltnails]

Hello,

I'm trying to set up a portfolio page by re-writing the blog post and listing page fuctionality using the methods described here

http://designers.hubspot.com/blog/creating-a-portfolio-with-hubspot-cos

The only thing i've done differently is added a "choice" custom field because I saw this as a way for the user to define the type of post they were creating (whether for residential or commercial customers) - and so the values of the "choice" string are the aforementioned.

Now id like to filter the results between those two options on the listing page, in either a tabber or dropdown selector.

Is a choice or boolean field the best way to devise a "post type" here? How would i create filtering on the listing page? The above article suggests they would write how to do exactly that, but i dont think they got around to it.

Thank you for any help you may have to offer

[Shamash]

I'm not sure about your JS skills, but I made something similar for one of my blogs. This solution is filtering posts by topic however.

The filter function is using js and hides all posts that do not contain the chosen topics.

<script type="text/javascript">
    var cases = $('.post-item');

function updateContentVisibility() {
  var checked = $("#filterControls :checkbox:checked");
  if (checked.length) {
    cases.hide()
    var checked = $('#filterControls :checkbox:checked');
    $(checked.map(function(i,a){return '.'+a.value;}).splice(0).join('')).show()
  } else {
    cases.show();
  }
}

$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();
</script>

Then there is the actual list of topics that you can filter by, which is generated as a list of checkboxes, using this HubL code.

{% set blog_topics = contents_topics %}
<div id="filterControls">
    {% for blog_topic in blog_topics %}
        <label>
            <input type="checkbox" value="{{ blog_topic.slug }}" />{{ blog_topic }}
        </label>
    {% endfor %}
</div>

If you only need to filter between two different types of posts you can probably make it even simpler. Let me know if this was helpful whatsoever.