Jleibham Jleibham - 1 month ago 25
HTML Question

Building a HubL template with an array of objects editable by user in page edit

I'm trying to build a Hubl Template which my client can use to add additional podcast episodes to a list in page edit. I'm able to generate the code with a Hubl Template like so:

{% set episodes = [{
id: "1",
date: "9/12/16"
},{
id: "2",
date: "9/12/16"
},{
id: "3"
date: "9/12/16"
},{
id: "4",
date: "9/12/16"
}]%}

{% for episode in episodes %}
<h2 class="podcast-title">Episode {{episode.id}}</h2>
<h4 class="podcast-date">{{episode.date}}</h4>
{% endfor %}


My problem is that I don't want to have my client come into the page template every time to add additional episodes. I want the episodes to be editable by the "page edit" page.

I am able to do this with single images like so:

{% image "hero_image" label='Select a hero image',
src='imageurl', no_wrapper=True,
export_to_template_context=True %}


But I don't know how or if it is possible to do this with an array of objects.

Answer

Have you considered creating a separate "blog" in their HubSpot portal specifically for Podcasts? It may be labeled a blog, but it works well for managing any regular-cadence published content.

If that's not an option, I'd recommend using a Flexible Column in your template layout and using a custom module for each podcast.

This way, as your client is editing a page to post a new podcast, he/she can add any module desired to the flexible column -- you'll need to teach how to find+add your Podcast listing module, but it can't be any harder than you were attempting with template code :)