Hola! ¡Tenemos nuestra Comunidad en Español!

How to add Featured Video functionality to a blog

Highlighted
HubSpot Moderator

I came across a case recently where it was suggested I document some of the methods we used (cc @mnonnamaker who also did a lot of work here). Maybe this will help people building something similar in the future. The goal here was to build a module for a blog that enables the blog post author to use a featured video instead of a featured image on the post. And in the case where they were using a featured image, to have a separate field for custom alt text for the featured image.

 

You'll need to create a module and add it to the blog template. It should have fields for a featured video and also for custom alt text.

 

Then in the blog post template you'll need to loop through the module data. These are stored in the content.widgets dictionary. So if you loop through like this:

 

 

{% for module in content.widgets %}
  {# in each loop iteration, module will represent the data for a different module on the post #}
{% endfor %}

 

 

...you can access each module in a loop iteration. You can look for a specific module by using something that identifies that module. So for example, each module will have an ID stored in module_id . So if we're looking to see if our featured video field has been filled out, let's first look for the module by its ID:

 

 

{% if module.module_id == "XXXX" && !module.deleted_at %}
  {% we've now found the module we're looking for, so let's search for the field we want %}
{# endif #} {# end if module.module_id == "XXXX" #}

 

 

I've also added a check ^here to make sure you're only finding a non-deleted version of our module. Otherwise whatever you're trying to do might print multiple times. And after we've found our module, we need to search for the field. Then we can print our field to the page with something like: {{ module.body.featured_video }} . And then also we can add an else statement for when we don't find a value in our field:

 

{% if module.module_id == "XXXX" && !module.deleted_at %}

  {% if module.body.featured_video %}

    {{ module.body.featured_video }}

  {# else if our module doesn't have a featured video value #}
  {% else %}

    {# print an img tag #}
    {# if the module has a featured_image_alt value, use that for the alt text. if not, use content.featured_image_alt_text #}
    <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{% if module.body.featured_image_alt %}{{ module.body.featured_image_alt }}{% else %}{{ content.featured_image_alt_text }}{% endif %}">
  
  {% endif %} {# end if module.body.featured_video #}

{# endif #} {# end if module.module_id == "XXXX" #}

So in total our code would look like this:

 

{# loop through the modules #}
{% for module in content.widgets %}

  {# look for our specific module, and also the non-deleted version of it #}
  {% if module.module_id == "XXXX" && !module.deleted_at %}
    
    {# we've now found the module we're looking for, so let's search for the field we want #}
    {% if module.body.featured_video %}

      {# print that value #}
      {{ module.body.featured_video }}

    {# else if our module doesn't have a featured video value #}
    {% else %}

      {# print an img tag #}
      {# if the module has a featured_image_alt value, use that for the alt text. if not, use content.featured_image_alt_text #}
      <img src="{{ content.post_list_summary_featured_image }}" class="hs-featured-image" alt="{% if module.body.featured_image_alt %}{{ module.body.featured_image_alt }}{% else %}{{ content.featured_image_alt_text|escape }}{% endif %}">
    
    {% endif %} {# end if module.body.featured_video #}

  {# endif #} {# end if module.module_id == "XXXX" #}

{% endfor %} {# end for module in content.widgets #}

I hope that's helpful to someone. Feel free to leave comments with any questions.

 

 - Leland

Leland Scanlan

HubSpot Developer Support
2 Replies
Esteemed Advisor

@lscanlan ,

 

This is awesome. I did not know you could access module data that way in the template and that has a ton of applications. Thanks for sharing.

- Jonathan Sumner
Reply
0 Upvotes
HubSpot Moderator

Thanks Jonathan! I figured it could give us something helpful to reference, and then others could build off it. Glad you found it useful.

Leland Scanlan

HubSpot Developer Support
Reply
0 Upvotes