Updating Blog Listing Template from Drag and Drop to HubL HTML

Developer Support CMS Development
1

I’m trying to update our existing blog listing template: from a drag-and-drop layout to an HTML + HubL template.

I’ve created the new template, previewed it, and it looks correct. However, when I attempt to update the existing template during the preview step, it appears that the old template is being stacked on top of the new one.

Does anyone know why this is happening, and what the best approach would be to resolve it?

2

Would it be possible that your blog is using custom modules or sections that were saved with the DND template?

3

I’m using the blog tags filter and search bar by referencing the file paths of the custom modules from the drag-and-drop template. I’m also including the global header and footer modules used across the page using this syntax:

 {% dnd_area "menu", label="Global Menu" %}
 {% dnd_section background_color="#fff", full_width=True %}
 {% dnd_column %}
 {% dnd_row %}
 {% dnd_module
 path="/file/path/Menu.module"
 %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% end_dnd_section %}
 {% end_dnd_area %}

When adding custom modules from the saved drag-and-drop template, I wrap them in a <div> container for styling purposes using the following syntax:

{% module "post_filter" path="/file/path/to/modulename.module" %}

4

I think you need to avoid using dnd_* tags in HTML + HubL templates.

5

Hey @PYoganathan,

the stacking is a “feature” of HubSpot which dates back to the pre-dnd-days. Back when the only real dnd option was the so-called flexible column. Back in those days it was a whole different building process.

What HubSpot does is, it will look for the decendants of the flexible columns → dnd_area, dnd_section, dnd_row anddnd_columns. If HubSpot finds at least one in the template, it will try rebuilding the old layout into the new - because otherwise the risk of losing content is quite high and HubSpot wants to not let this happen.

If you don’t want to keep anything from the old template, my recommendation is to

  • create global partials for header and footer (if not done yet; always recommended)
  • create a dedicated base.html clone for the blog or drop the {% extend ‘path/to/base’ %} from the blog template(s) and put a custom setup into the template
  • Write plain HTML and use something like the author, tags, content and other blog tags in places you want them to display. As well as not using any dnd tags in the template.
  • The most important tag for the post template is {{ content.post_body }}
  • The most important tags for the listing are the is_listing_view statement and the {% for content in contents %} loop
  • Don’t forget to set the correct template type of each template

best,

Anton

6

Hi @PYoganathan,
@Anton is the GOAT around here, I’d take his word as gospel on this.

Just chiming in with something that might help.

I haven’t tested it out and I’m totally spitballing here, but if you change the names of your dnd areas, I don’t think hubspot would recognise it as the old areas and add in the old content.
So in your example I’d try changing it to

 {% dnd_area "menu_new_name", label="Global Menu" %}
 {% dnd_section background_color="#fff", full_width=True %}
 {% dnd_column %}
 {% dnd_row %}
 {% dnd_module
 path="/file/path/Menu.module"
 %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% end_dnd_section %}
 {% end_dnd_area %}

{% module "post_filter_new_name" path="/file/path/to/modulename.module" %}

I’m almost certain I’ve used this in the past to rid myself of some odd “ghosts”.
Again, totally speaking off the top of my head and open to correction.

profile2022a.jpg
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn