After contacting support I was told to use the code below
<select id="blog-topics">
<option>Filter by topic</option>
{% for topic in contents_topics %}
<option value="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</option>
{% endfor %}
</select>
As you can see here the dropdown displays but nothing happens when a topic is selected. I think this could be because some code is missing but I am not sure what exactly.
{% set my_topics = blog_topics('default', 250) %}
<select id="blog-topics">
<option>Filter by topic</option>
{% for item in my_topics %}
<option value="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</option>
{% endfor %}
</select>
It seems that 'content_topics' might only be getting the list of tags used for the particular blog post you are currently landed on, whereas the above code retrieves the list of all used tags in blog posts. Keep in mind, I say "used" because I think the list will omit unused blog tags.
This seems to partly work. I have added the script and when a topic is selected it filters the blogs and shows those with the selected topic which is great. However, once you have selected a topic, if you click on the drop-down only that topic appears to choose from and all the other topics are no longer available. Please see here.
Do you know why this is? and is there a way to fix this?
I am copying the code used here for your reference
HTML
<select id="blog-topics">
<option>Filter by topic</option>
{% for topic in contents_topics %}
<option value="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</option>
{% endfor %}
</select>
JS
<script>
$(function(){
$('#blog-topics').on('change', function(){
var link = $(this).val();
if(link != "Filter by topic"){
window.location.href = link;
}
});
});
</script>
{% set my_topics = blog_topics('default', 250) %}
<select id="blog-topics">
<option>Filter by topic</option>
{% for item in my_topics %}
<option value="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</option>
{% endfor %}
</select>
It seems that 'content_topics' might only be getting the list of tags used for the particular blog post you are currently landed on, whereas the above code retrieves the list of all used tags in blog posts. Keep in mind, I say "used" because I think the list will omit unused blog tags.
I'd really like to see this working for Months too, with a select field which opens blogs from that month when clicked. This is because I'm using select and option tags for all the other navigation and I'd like to keep consistent styling. Any thoughts appreciated.