Blog Post Dropdown Filter by Archive

Developer Support CMS Development
1

I found a great post at https://community.hubspot.com/t5/CMS-Development/Blog-dropdown-topic-filter-not-working/m-p/193813 that explained how to create blog dropdown filters by topic, but I would like to create another that will work for archives by month/year. Preferably I would like to adapt the code below for the archive dropdown.

{% 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>

<script>
$(function(){
 $('#blog-topics').on('change', function(){
 var link = $(this).val();
 if(link != "Filter by topic"){
 window.location.href = link;
 }
 });
});
</script>
2

@mik3mitchell

I didn’t find in the documentation any function that would allow for looping through archive links so I think the only option here is to use the post_filter widget and ‘fake’ the select box.

<div class="select-archive">
 {% post_filter
 select_blog='34350790',
 expand_link_text='More',
 list_title='Archive',
 filter_type='month',
 order_by='date',
 max_links=250
 %}
</div>

<style>
 .select-archive {
 width: 200px;
 position: relative;
 }
 .select-archive h3 {
 display: inline-block;
 width: 100%;
 border: 1px solid;
 cursor: pointer;
 padding: 0.5em;
 box-sizing: border-box;
 }
 .select-archive .widget-module {
 width: 100%;
 position: absolute;
 display: none;
 border: 1px solid;
 box-sizing: border-box;
 }
 .select-archive .widget-module ul {
 padding: 1em;
 margin: 0;
 }
 .select-archive .widget-module li {
 list-style-type: none;
 }
 .select-archive .widget-module li a {
 display: block;
 padding: 0.5em;
 color: #000;
 text-decoration: none;
 }
</style>

<script>
 $('.select-archive h3').on('click', function() {
 $(this).next('.widget-module').toggle();
 });
</script>

Or if you want it to match the markup of your blog topic filter you can build out the urls yourself using an array, either by creating the array directly or using HubDB. However this will be more time exhaustive as you’ll have to add in every single month/year combo you want to show and it won’t update own it’s own.

{% set array = [
 {
 'label' : 'January',
 'month' : '1',
 'year' : '2019'
 },
 {
 'label' : 'February',
 'month' : '2',
 'year' : '2019'
 },
 {
 'label' : 'March',
 'month' : '3',
 'year' : '2019'
 }
] %}

<select id="blog-archive">
 <option selected>Archive</option>

 {% for date in array %}
 {% if date.month < 10 %}
 {% set month = '0' + date.month %}
 {% else %}
 {% set month = date.month %}
 {% endif %}

 <option value="https://yourblogurl.com/archive/{{ date.year }}/{{ month }}">{{ date.label }} {{ date.year }}</option>
 {% endfor %}
</select>

<script>
$(function(){
 $('#blog-archive').on('change', function(){
 var link = $(this).val();
 if(link != "Archive"){
 window.location.href = link;
 }
 });
});
</script>

Though you could possibly make it more dynamic by doing a for loop going through the years (ex: 2000 - 2019) and the months (01 - 12) but if you don’t have any posts for every single combo you’ll end up with 404 links in your select listing (I’d be interested to see if anyone has any ideas for checking if the link is active and skipping the combo if it’s not)

3

Thank you very much for your help! This worked great!

4

I have the dropdown working for months - nice - just needs styling.

Has anyone figured out the jquery to make the widget-module ul content close when you click away from it?