Add editable modules to blog template

[jedthehumanoid]

I have a blog template and I'd like to be able to add modules to it. Could someone help explain what I need to do? I'm new to Hubspot.

The page template is:

And here's the HTML:

The page looks like this. I'd like to add modules to the main blog post column and the right hand side.

Do I need to add some code to the HTML? Or amend the template. 

Thanks in advance!

[jzilch]

Hi, 

It does look like if you want to add any modules to the main content or the sidebar you will need to add the modules to the HubL and HTML you posted above. For any modules you want to have in the main body section you can add modules in the main-col div on line 20. If you want to add a module to the sidebar then there is a div with the class of sidebar and you will want to add the modules there. 

I would be careful that you're adding the modules inbetween the opening and closing divs if there end up being any syntax errors for the opening and closing divs the sidebar might fall to the bottom of the page. 

[jedthehumanoid]

Thanks for your help with this. I can see where to add in the module to the sidebar but I'm not exactly sure which code to insert.

I have a module that is set for page and blog type pages. In the module editor it gives me some code (below) but if I paste that into the blog post template (even surrounded by DIVs) I get an error. Any idea where I'm going wrong?

Thanks again!

[jzilch]

What is the type of error you're seeing? If this is a custom module you should be able to add it directly into your HTML template. If you can share the error or a link to your page I can a further look and see what might be the problem. 

[jedthehumanoid]

I get the pop-ip error below.

Is there additional code I need to add in here? My module is a custom module

Thanks again

[jzilch]

Hi, 

I was able to take a deeper dive into this and I was able to figure out what is going wrong and I did mention this to the team that some of the information should be updated as it's a bit confusing. 

The error message you were seeing when you tried to publsih the page was an error message saying that HubSpot couldn't resolve the module on the page that was added in. The weird thing that I noticied was that you can add the module to the listing template but the same module would fail validation on the post template. The reason this is failing validation is you cannot nest custom modules into the Design Manager and this is why it is failing the validation. You can read more about the validation here. 

https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-to-identify-and-upgrade-nested-mo...

The workaround for this would be to add the custom module to the template itself but not within the HubL section within the Blog Content module. The feedback I am going to bring to the team is to have more strict validation as the validation wasn't failing on the listing page but the module wasn't being rendered anyway. The second item which I would confusing is on the module is gives you a snippet and says you can add this module to a HTML/HubL template. I think this wording should be updated to be more accurate on where you can add these modules to the page or provide better error messaging for developers so we know why validation is failing. 

[jedthehumanoid]

Hi

Thanks for your help with this. I'm not sure how to implement your workaround solution as the blog template includes both the post and the listing. Editing the 'Blog Content' block in the Design Manager seems to affect both. For example, if I split the column it ruins the listing page as well as the blog post page. Or am I just not getting it?

The whole separation of blog posts to norma pages seems a bit odd. I migth need to create my own pahge template and use that for blogs as the blog template is so inflexible.

Thanks in advance

[jzilch]

Hi, 

This can be a bit tricky and at this point it's mostly a judgement call for the template. There are two solutions that I can see for you to get the desired results you're looking for. 

1. You can seperate out the blog post template and blog listing template into two different templates. This is fairly common and would involve just a single template for the post template and then another completely seperate template for the listing template. This would allow you to add modules to the template without having to worry about the modules being added to both templates. 

(This is a good solution for if the blog templates will have a lot of differents or layout differences. )

2. You can use conditional rendering to speific which page you want the module to display on. There is a section when you click on a module and you can add in wrapping html. This is where you can still set hubl to specify the page you want to render on. 

You can use that HubL of is_listing_view for the listing page and for the post page you can supply an else block. You can read more about this here. https://designers.hubspot.com/docs/hubl/blog-content-markup

[jedthehumanoid]

Hi

Option 1 definitely sounds like the best approach for me, I'd much rather have them separate and it would give me the extra flexibility I need. Is it just a case of creating a new page template and selecting 'Blog' as the template type?

Would the listing template be simply a 'Page' type?

Thanks so much for your help btw!

[jzilch]

Hi, 

It's actually a lot simpler which you should be able to do fairly quickly. On your current template when you're in HubSpot there is a file button on the left hand side. You can clone your current template and this will give you two identical templates. The file structure in your portal might look something like this once you rename your newly cloned template

Blog (Folder)

Blog Listing Template (Listing Template)

Blog Post Template (Post Template)

Then once you have both the files you can go into the blog content module in each template and delete the part of the code you do not want to use. This will avoid confusion in the future. For example on your Listing Template go into Blog Content and delete all the HubL for the the post template as this will be in the other template for the blog content. You can do the same for the Post Template except deleting the Post Tempate HubL. This will ensure that you only have code for the template you want to use. As a best practice I try and add a comment in the section that is empty. Such as the following

/* This template uses a seperate template for the blog post template */

The final step is to make sure that both templates are being used which you can find in the Settings of HubSpot. Navigate to Webste > Blog and then you will see a tab for templates. Ensure to uncheck the box for use the same template for the listing template and then you can set the two different templates in the settings so they will both be used. 

I think cloning the original template is abtter option so you won't need to rebuild anything and you can simply start to re-arrange or delete modules from the template. 

Hopefully this helps you get up and running. 

[jedthehumanoid]

Thanks for this! However if I clone my current template I just get a cloned template...i don't see the file structure you mention. I only get options for the templates if I click on the Blog Content module within the template, no separate files

I've created a new blog template separtely. If I go to Website . Blog > Templates and swap the current template for the new one it breaks the pages.

Any ideas? Thanks in advance

[jzilch]

Hi, 

I adjusted the template names for you so they should be more similar to my above recommendation. One will be named Blog Listing Template and the other Blog Post Template. If you also check in the settings in HubSpot you should see the seperate templates now being used in settings. 

You should be good to modify blog listing template or blog post template as you would like now. 

[jedthehumanoid]

Thanks so much! I can now see the separate files you've created. it makes it a bit easier.

However I'm finding that because I can't use flexible columns on a blog layout I can't make it as flexible as I like. Ideally I want a ight hand columns to my blog pages where I can drag in any additional modules, but it doesn't look like this is possible. is that correct?

[jzilch]

That should be possible. If you're not seeing the flexible column module I would try a module group. If you're trying to add a blog sidebar to only the blog post page it should look similar to the below image.