topic Re: Show rich text value in blog listing page in CMS Development

Show rich text value in blog listing page

HiroTahara — Wed, 22 Apr 2020 09:50:18 GMT

So I set several tags for each blog posts when i publish it, but I want to show only one selected tag name for each in the blog listing page as marked below.

Currently it shows one of the tags by Hubl, but instead I want to insert values set in a text module.

In order for that, i created a rich text module named "Blog Tag Replacer" whose variable name is "tag_text_field". And i put it in the blog template.

Now in the Blog Content module, I wrote the code below

but the page only shows the tags registered to the blog posts even if the text module has values.

{% for module_item in content.widgets %}
  {% if module_item.body.tag_text_field %}{# If text module has a value/ value is not null #}
      <p class="topics-link">{{ module_item.body.tag_text_field }}</p>
  {% else %}{# If not, fetch tag names from the tag list of each blog post #}
      {% if content.tag_list %}
        {% for tag in content.tag_list %}
           <p class="topics-link">{{ tag.name }}</p>
        {% endfor %}
      {% endif %}
   {% endif %} {# if module_item.body.tag_text_field #}
{% endfor %} {# end for module_item in content.widgets #}

I would appreciate your help! Thank you in advance.

Re: Show rich text value in blog listing page

alyssamwilie — Wed, 22 Apr 2020 23:23:56 GMT

Hey @HiroTahara ,

Unfortanetly Hubspot Bog Listing templates aren't able to pull info from blog posts that are set in Custom Modules. You would need to use Hubspot's default Rich Text or Text module instead. And then the variable would be something like {{ widget_data.module_name.body.value }} .

Re: Show rich text value in blog listing page

HiroTahara — Thu, 23 Apr 2020 01:14:16 GMT

Hi, thank you for the response.

I dont really know if i really cannot get the text value that was set in blog post editor, it does seem like it is possible according to the article below.

https://community.hubspot.com/t5/CMS-Development/Add-module-to-blog-listing-template/td-p/270639

To here:

Is there any other ways to show text module value in blog template?

Or what should I change in the code?

Re: Show rich text value in blog listing page

alyssamwilie — Thu, 23 Apr 2020 02:17:35 GMT

Interesting! I didn't know content.widgets was a thing. Did a little testing on it and it definitely works. Can you show me a screenshot of your Blog Tag Replacer module ? Just want to check that the correct field name is being called.

Re: Show rich text value in blog listing page

HiroTahara — Thu, 23 Apr 2020 02:32:51 GMT

Thank you for testing it!

Here is the snnipet of Blog Tag Replacer module

{% inline_text field="tag_text_field" value="{{ module.tag_text_field }}" %}

and its screenshot.

Re: Show rich text value in blog listing page

alyssamwilie — Thu, 23 Apr 2020 02:51:38 GMT

Thanks! Hm, you're definitely using the right field name so not sure why it wouldn't be showing your custom tags. May seem like a dumb question, but did you go into any of your posts and add a custom tag to them with the Blog Tag Replacer module?

One thing I did find in testing though is that we won't want our if/else statement happening within the for loop because when it loops over fields that aren't your tag_text_field it's going to run your else statement. So what we'll want to do is create a variable that we can send our tag_text_field value into and then write our if/else statement outside of the for loop.

{% set custom_tag = [] %} {# create variable for tag #}

{# loop through widgets #}
{% for module_item in content.widgets %}
    {# If tag_text_field is not null, append it to our variable #}
    {% if module_item.body.tag_text_field %}
        {% set custom_tag_append = custom_tag.append(module_item.body.tag_text_field %}
    {% endif %}
{% endfor %}

{# If text module has a value/ value is not null #}
{% if custom_tag %}
    <p class="topics-link">{{ module_item.body.tag_text_field }}</p>
{% else %}
{# If not, fetch tag names from the tag list of each blog post #}
    {% if content.tag_list %}
        {% for tag in content.tag_list %}
            <p class="topics-link">{{ tag.name }}</p>
        {% endfor %}
    {% endif %}
{% endif %}

Also, if you want to test if your blog listing is seeing your field at all and contains a value you can try adding the following to your content loop and see if it tag_text_field shows up in the outputted json.

{% for module_item in content.widgets %}
    {{ module_item.body }}
{% endfor %}

Re: Show rich text value in blog listing page

HiroTahara — Thu, 23 Apr 2020 09:42:26 GMT

Thank you for the code.

I tried some patterns based on yours, but none of them worked.

It seems like:

1. It doesn't properly give text module value to the variable

2. Text module value doesn't show when embeded in an <a> tag

The codes I tried are below:

1. Use text as variable

{% set custom_tag = [] %} {# create variable for tag #}

{# loop through widgets #}
{% for module_item in content.widgets %}
{# If tag_text_field is not null, append it to our variable #}
  {% if module_item.body.tag_text_field %}
    {% set custom_tag_append = custom_tag.append(module_item.body.tag_text_field) %}
  {% endif %}
{% endfor %}

{# If text module has a value/ value is not null #}
{% if custom_tag_append %}
  {% for module_item in content.widgets %}
    <a class="topics-link" href="https://cookie.bizrisk.iij.jp/blog/tag/{{ module_item.body.tag_text_field }}">{{ module_item.body.tag_text_field }}</a>
  {% endfor %}
{% else %}
  {# If not, fetch tag names from the tag list of each blog post #}
  {% if content.tag_list %}
    {% for tag in content.tag_list %}
      <a class="topics-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
    {% endfor %}
  {% endif %}
{% endif %}

2. Use boolean as variable

{% set custom_tag = [] %} {# create variable for tag #}

{# loop through widgets #}
{% for module_item in content.widgets %}
{# If tag_text_field is not null, set the variable to True #}
  {% if module_item.body.tag_text_field %}
    {% set custom_tag = True %}
  {% endif %}
{% endfor %}

{# If text module has a value/ value is not null #}
{% if custom_tag %}
  {% for module_item in content.widgets %}
    <a class="topics-link" href="https://cookie.bizrisk.iij.jp/blog/tag/{{ module_item.body.tag_text_field }}">{{ module_item.body.tag_text_field }}</a>
  {% endfor %}
{% else %}
  {# If not, fetch tag names from the tag list of each blog post #}
  {% if content.tag_list %}
    {% for tag in content.tag_list %}
      <a class="topics-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
    {% endfor %}
  {% endif %}
{% endif %}

>did you go into any of your posts and add a custom tag to them with the Blog Tag Replacer module?

Yes, in fact I saw the text modul value shown when I tired this code alone.

So the Blog Content module does recognizes the input value.

{% for module_item in content.widgets %}
    {{ module_item.body }}
{% endfor %}

Re: Show rich text value in blog listing page

alyssamwilie — Thu, 23 Apr 2020 13:40:52 GMT

Urgh I had a typo in my code. It's supposed to use the custom_tag in the if statement not the module_item.

{% set custom_tag = [] %} {# create variable for tag #}

{# loop through widgets #}
{% for module_item in content.widgets %}
    {# If tag_text_field is not null, append it to our variable #}
    {% if module_item.body.tag_text_field %}
        {% set custom_tag_append = custom_tag.append(module_item.body.tag_text_field) %}
    {% endif %}
{% endfor %}

{# If text module has a value/ value is not null #}
{% if custom_tag %}
    <p class="topics-link">{{ custom_tag|join() }}</p>
{% else %}
{# If not, fetch tag names from the tag list of each blog post #}
    {% if content.tag_list %}
        {% for tag in content.tag_list %}
            <p class="topics-link">{{ tag.name }}</p>
        {% endfor %}
    {% endif %}
{% endif %}

If that still doesn't work can you put this in your content loop and see if it outputs anything:

{% for module_item in content.widgets %}
    {{ module_item.body.tag_text_field }}
{% endfor %}

Re: Show rich text value in blog listing page

HiroTahara — Fri, 24 Apr 2020 02:39:07 GMT

Thank you so much, the code totally worked!

Re: Show rich text value in blog listing page

HiroTahara — Fri, 24 Apr 2020 02:42:26 GMT

Could i know how you found the usages of variables and other Hubl elements like this?

{{ custom_tag|join() }}

I searched for documents and found this and some other similar ones, but they dont have descriptions on those elements in details.

https://designers.hubspot.com/docs/hubl/variables

Thank you!

Re: Show rich text value in blog listing page

alyssamwilie — Fri, 24 Apr 2020 02:56:02 GMT

Awesome, I'm so glad the code worked!

They talk about creating variables a little bit here -
https://designers.hubspot.com/docs/hubl/variables-macros-syntax

The |join piece is a filter and you can read all about those here -
https://designers.hubspot.com/docs/hubl/filters

.append() is a function that can be read about here -
https://designers.hubspot.com/docs/hubl/functions

The set variables to store information that can be used outside of loops is something I saw used here in the community and I actually have a blog post that goes into detail on how to use the .append and .update functions for doing this.
https://alyssawilie.com/blog/how-to-hubl/arrays-append-and-update/

Hope all this information helps!