topic HubL coding in a blog template to insert a line of text after a certain word count in CMS Development

HubL coding in a blog template to insert a line of text after a certain word count

tommy — Tue, 28 Nov 2017 19:00:43 GMT

Greetings,

I am new to Hubspot and I need some ideas on how to approach a problem using HubL code with a blog template. I have been given the task to figure out a way to get a word count on a blog post and once a certain certain word count is achieved (lets say 150 words) a line of text will be inserted after that certain word count and then remaining blog article text will be displayed.

I have tried to edit the {{content.post_body}} with the HubL filters but I am not having much luck with the logic. Any thoughts?

Thanks ,

Tommy

Re: HubL coding in a blog template to insert a line of text after a certain word count

TRooInbound — Wed, 29 Nov 2017 10:20:30 GMT

Hi @tommy, you can achieve this task by two methods

1) Split out every word and append your line of text.

here you need to split out your post body into words after then you need to slice words to your required word count.

{%  set words = content.post_body|split(' ', 10000)  %}
{% for column in words|slice(YOUR-WORD-COUNT,' ') %}
    {% for item in column %}
        {% if item %}
            {{ item }}
        {% endif %}
    {% endfor %}
    
    {% if loop.first %}
        Line of text to insert
    {% endif %}
{% endfor %}

2) Add some tag to slice out article.

In this example we used '' (separator) to slice content as it can directly set from edit post item and can set individually for each as per your requirement.

Separator will be used to show some information on blog listing page and all information on blog posting page. for more info please refer here.

So in below code article is divided based on separator position and then it shown with adding your custom text in between.

{% set sections = content.post_body|split('<!--more-->', 2) %}
<div class="brief-summary">
    {{  sections[0] }}
</div>

<div>
    Line of text to insert
</div>

<div class="detailed-summary">
    {{  sections[1] }}
</div>

We hope it resolve your query.

Team TRooInbound!

Re: HubL coding in a blog template to insert a line of text after a certain word count

Christopher — Wed, 29 Nov 2017 18:43:17 GMT

Great question and solutions! I really like this second solution that uses the  tag.

In this modified example I break the article into 3 parts (if available) 3rd part made available from inserting a second  tag. This relies on the Author to add the second tag, but allows them to put the line of text in wherever they feel appropriate.

{% set sections = content.post_body|split('<!--more-->', 3) %}
<div class="brief-summary">
{{ sections[0] }}
</div>

<div class="detailed-summary">
{{ sections[1] }}
</div>
{% if sections[2] %}
<div>
Line of Text
</div>
<div>
{{ sections[2] }}
</div>

{% endif %}

Re: HubL coding in a blog template to insert a line of text after a certain word count

tommy — Fri, 01 Dec 2017 16:31:38 GMT

Thanks you for your reply!!!!!

Both your methods solved my task. 🙂

Are there any other extra resources about HubL coding (besides the basic overview documentation found on the Hubspot website) that you could recommend? I want to learn more about HubL!!!!

Thanks again,

Tommy

Re: HubL coding in a blog template to insert a line of text after a certain word count

TRooInbound — Sat, 02 Dec 2017 05:36:36 GMT

Hi @tommy,

That's Great! Cool!

I don't think so there is another document available for Hubl references.

if you want to learn HubL code than just utilizing those available HubL filter and module in your project than automatically.

Kindly my above answer marking as a solution.

Did my post help answer your query? Help the Community by marking it as a solution.

Thanks

Team TRooInbound