Creating a Menu for Blog Posts by Tag
SOLVEHi there, I am VERY new to Hubspot and can't for the life of me figure out how to create a menu on my blog listing page that allows the user to filter by blog post type. I see in my theme template that it shows it being done, but I can't figure out how to do it myself. Can anyone advise?
For reference, I am using the Lagom template. I have attached an image of what I am trying to accomplish.
Thanks for any help!
1 Accepted solution
Creating a Menu for Blog Posts by Tag
SOLVEHi @VHoddenbagh,
the filter navigation is build into the "blog listing" module and generated automatically by your tags. If it's not visible in the "real" blog listing, open the blog listing by navigating to Content -> Blog, clicking on Blog Post in the top left corner and select Blog Listing. Once there open the blog listing you'd like to edit(if you have several blogs, otherwise there should be just one), click on the listing module and check if the option "enable tag filter" is enabled.
If you want to create your own filter navigation, there are several ways how you can achieve this.
1. Create a custom module
Create a custom module which contains at least the follwing code
{% set my_tags = blog_tags("default", 250) %} {# the "default" is grabbing the tags from the default blog #}
<div class="post-tag-nav">
{% for tag in my_tags %}
<a class="post-tag" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
{% endfor %}
</div>
It's the so-called blog-tag function.
With a little bit of CSS you can style it to your needs.
Tip:
If you have several blogs you can add a blog select function(I call it "Blog selector" in this example) to your custom module and change the code to this:
{% set my_tags = blog_tags(module.blog_selector, 250) %}
<div class="post-tag-nav">
{% for tag in my_tags %}
<a class="post-tag" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
{% endfor %}
</div>
2. Create a "static" navigation
Technically you can use or create a menu/navigation yourself. While the method above is the most easiest one which will work without a lot of headaches there might be some cases where you'd like to create a manually generated version of it.
There are also several ways you can go
2.1 Use an existing simple menu or regular menu module to create basically the same logic as above with the link/URL being the link to the tag page and the label being the tag name
2.2 Create your own custom module with a (simple) menu.
3. Completly custom code everything
This is by far the most overengineered solution which shouldn't be used in production (unless you have some very specific custom requirements) since you will be investing a lot of time to recreate basically what's already existing... But for completion.. Here's how you could do this;
- Create a custom module
- create two text fields(not rich-text) or one URL and one text field
- group those two elements in a group
- enable the repeater option in the group
- write a for-loop for this group
- Congratulations, you've recreated a menu function 😁
In all seriousness, there might be a few use-cases for something like this. Like mega menus and such if your portal doesn't have HubDB, but for a simple tag navigation - completly overengineered.
hope this helps
best
Anton
Creating a Menu for Blog Posts by Tag
SOLVEHi @VHoddenbagh,
the filter navigation is build into the "blog listing" module and generated automatically by your tags. If it's not visible in the "real" blog listing, open the blog listing by navigating to Content -> Blog, clicking on Blog Post in the top left corner and select Blog Listing. Once there open the blog listing you'd like to edit(if you have several blogs, otherwise there should be just one), click on the listing module and check if the option "enable tag filter" is enabled.
If you want to create your own filter navigation, there are several ways how you can achieve this.
1. Create a custom module
Create a custom module which contains at least the follwing code
{% set my_tags = blog_tags("default", 250) %} {# the "default" is grabbing the tags from the default blog #}
<div class="post-tag-nav">
{% for tag in my_tags %}
<a class="post-tag" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
{% endfor %}
</div>
It's the so-called blog-tag function.
With a little bit of CSS you can style it to your needs.
Tip:
If you have several blogs you can add a blog select function(I call it "Blog selector" in this example) to your custom module and change the code to this:
{% set my_tags = blog_tags(module.blog_selector, 250) %}
<div class="post-tag-nav">
{% for tag in my_tags %}
<a class="post-tag" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
{% endfor %}
</div>
2. Create a "static" navigation
Technically you can use or create a menu/navigation yourself. While the method above is the most easiest one which will work without a lot of headaches there might be some cases where you'd like to create a manually generated version of it.
There are also several ways you can go
2.1 Use an existing simple menu or regular menu module to create basically the same logic as above with the link/URL being the link to the tag page and the label being the tag name
2.2 Create your own custom module with a (simple) menu.
3. Completly custom code everything
This is by far the most overengineered solution which shouldn't be used in production (unless you have some very specific custom requirements) since you will be investing a lot of time to recreate basically what's already existing... But for completion.. Here's how you could do this;
- Create a custom module
- create two text fields(not rich-text) or one URL and one text field
- group those two elements in a group
- enable the repeater option in the group
- write a for-loop for this group
- Congratulations, you've recreated a menu function 😁
In all seriousness, there might be a few use-cases for something like this. Like mega menus and such if your portal doesn't have HubDB, but for a simple tag navigation - completly overengineered.
hope this helps
best
Anton
