- RSS フィードを購読する
- トピックを新着としてマーク
- トピックを既読としてマーク
- このトピックを現在のユーザーにフロートします
- ブックマーク
- 購読
- 印刷用ページ
How to add Featured Video functionality to a blog
05-17-2019 06:59 - 編集済み 07-30-2019 04:49
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 ScanlanHubSpot Developer Support |
- 新着としてマーク
- ブックマーク
- 購読
- RSS フィードを購読する
- ハイライト
- 印刷
- 友達へメール
- 不適切なコンテンツを報告