If you want to create a Blog in Hubspot, you will notice that it requires you to have two templates, one for listing pages and the other one for blog posts.
While it is great to have two templates for different types of pages, what if you want to have more than one template for your blog posts?
Imagine you want to have two different types of blog posts, one for company related news and another one for industry related news. And now imagine you want to have a different template for each type, so they look a bit different and include different elements.
While Hubspot doesn't allow you to choose the template for each blog post, this is something we can achieve using custom modules.
Create a template selector custom module
The first thing you need to do is create a module that will allow you to select what blog post template you want.
This will allow content authors to easily select the template they want for their blog posts, all they will need to do is select the template from a dropdown list that will appear in the modules sidebar.
There are different ways to create a module, but we will do it through the Design Manager as I think it's the easiest way to do it.
Go to the Design Manager, find/create a folder where you want to store your modules, right click on it and create a new file. Then select Module.
It's important to note that we will need a Local Module because the module's value has to be different for each blog post (or landing page as this can be applied to landing pages as well if needed). Your module settings should look like this:
Once you've created the module, we will add the options for all the blog templates you want to have in your page.
To be honest, we just need one field here, which in our case will be a Choice field as in my opinion is the clearest way for content authors to choose the blog template.
Let's keep it simple by adding just 2 template options. You can modify this module to add as many template options as you want, together with more module options if needed.
I will call the module "Blog template selector" (blog_template_selector) and it looks like this:
Since we will use this module just for "logic", we will not add any HTML, CSS or JS to it.
Create your main and partial templates##
The template logic will work like this:
- We will have a main template for Blog posts that will automatically be assigned to each new article. This template will include our template selector module.
- We will have two (or as many as needed) partial templates that will be loaded into the main template according to the selected template in the module.
To visually explain all of this, I've created a main global template (main_template.html) and two partial templates (blog_template_one.html & blog_template_two.html).
Add the template selector to your template
Our next step is to add the module we've created to our main template (main_template.html).
In order to add a module to a template, go to the module's options, scroll to the bottom and copy the code in Template Usage section. It should look like this:
{% module "module_16399418628793" path="/blog_template_selector/blog_template_selector", label="blog_template_selector" %}
The next step is to add this code to our main template.
Load partial templates based on the module
Now that our module is added to the main template, it's time to add the logic that will load our partial templates.
This logic is as simple as an IF statement. Our main template should look like this:
<!--
templateType: blog
isAvailableForNewContent: true
-->
{% module "blog_template_selector" path="/blog_template_selector/blog_template_selector", label="blog_template_selector", export_to_template_context=True %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ content.html_title }}</title>
<meta name="description" content="{{ content.meta_description }}">
{{ standard_header_includes }}
</head>
<body>
{% if widget_data.blog_template_selector.template == 'template_1' %}
{% include '/blog_template_selector/blog_template_one.html' %}
{% else %}
{% include '/blog_template_selector/blog_template_two.html' %}
{% endif %}
{{ standard_footer_includes }}
</body>
</html>
Some important things to mention here:
- It's important that your templateType is 'blog'
- Make sure your module has the export_to_template_context=True field
- Since 'module_16399418628793' is not an ideal name for a module in our code, I've renamed it to 'blog_template_selector'
Select the template for your blog post
Everything should be ready! Now content authors should be able to select the template while editing an article. It's as simple as selecting the template in our module as you can see below.
Top comments (0)