topic Re: content_by_id not pulling through blog content when a id is used. in CMS Development

content_by_id not pulling through blog content when a id is used.

MGilbert — Tue, 23 Mar 2021 14:50:17 GMT

I am hoping someone can help me with content_by_id not pulling through blog content when an id is used.

I have made a custom module (code below) it loops through pages selected by the marketing team using the page field. For each item in the loop, I use content_by_id to grab the title, featured image and description about the blog.

This sometimes works and sometimes doesn't - item.blog_pages always gets the id but doesn't get the rest of the content.screen shot of what is seen

{% set blogs = content_by_id(item.blog_pages) %}
{{item.blog_pages}} -- shows item id fine
{% if blogs.featured_image %}
<div class="three-page-select-img-wrapper">
<img src="{{ blogs.featured_image }}" loading="lazy" class="three-page-select-img" alt="{{ blogs.featured_image_alt_text | escape }}">
</div>

Re: content_by_id not pulling through blog content when a id is used.

dennisedson — Tue, 23 Mar 2021 19:19:58 GMT

Hi @MGilbert

Adding @jonchim to this one to get a lil help

Re: content_by_id not pulling through blog content when a id is used.

jonchim — Tue, 23 Mar 2021 20:21:21 GMT

Hey @MGilbert,

Happy to take a look! Do you mind sending a link so we can take a look? or the rest of the module code?

Re: content_by_id not pulling through blog content when a id is used.

MGilbert — Thu, 25 Mar 2021 09:44:32 GMT

hi @jonchim link here https://app.hubspot.com/design-manager/2820648/modules/41958357809

<div class="three-page-select padding-top--{{ module.padding_top }} padding-bottom--{{ module.padding_bottom }}">
<div class="container {% if module.narrowed_container %} narrowed_container {% endif %}">
<h3 class="heading">
<div class="heading_icon">
{% if module.heading_icon.src %}
{% set sizeAttrs = 'width="{{ module.heading_icon.width }}" height="{{ module.heading_icon.height }}"' %}
{% if module.heading_icon.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif module.heading_icon.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.heading_icon.max_width }}px; max-height: {{ module.heading_icon.max_height }}px"' %}
{% endif %}
{% set loadingAttr = module.heading_icon.loading != 'disabled' ? 'loading="{{ module.heading_icon.loading }}"' : '' %}
<img src="{{ module.heading_icon.src }}" alt="{{ module.heading_icon.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
</div>
{% inline_text field="section_heading" value="{{ module.section_heading }}" %}
</h3>

<div class="three-page-select-list {% if module.landscape_design %} landscape {% endif %}">
{% for item in module.pages_select %}
<div class="three-page-select-list__item">
{% if item.choice_field == 'manual' %}
{% if item.image_field.src %}
{% set sizeAttrs = 'width="{{ item.image_field.width }}" height="{{ item.image_field.height }}"' %}
{% if item.image_field.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif item.image_field.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.image_field.max_width }}px; max-height: {{ item.image_field.max_height }}px"' %}
{% endif %}
{% set loadingAttr = item.image_field.loading != 'disabled' ? 'loading="{{ item.image_field.loading }}"' : '' %}
<div class="three-page-select-img-wrapper">
<img class="three-page-select-img" src="{{ item.image_field.src }}" alt="{{ item.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
</div>
{% endif %}

<div class="content">
<div class="content-text"> {% inline_rich_text field="richtext_field" value="{{ item.richtext_field }}" %} </div>
{% set href = item.link_field.url.href %}
{% if item.link_field.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
{% if item.date_field %}
<div class="calander-section">
<svg xmlns="http://www.w3.org/2000/svg" width="18.24" height="20.031" viewBox="0 0 18.24 20.031">
<path id="np_event_1532677_000000" d="M28.041,16.781h-3.5V15.1H23.424v1.679H14.918V15.1H13.8v1.679H10.3V34.633h17.74ZM13.8,17.9v1.679h1.119V17.9h8.506v1.679h1.119V17.9h2.378v3.665H11.42V17.9ZM11.42,33.514V22.685h15.5V33.514Z" transform="translate(-10.051 -14.852)" fill="#313131" stroke="#313131" stroke-width="0.5"/>
</svg>
{{ datetimeformat(item.date_field, '%d/%m/%Y') }}
</div>
{% endif %}
<div class="read-more-container">
{% if item.link_icon_item.src %}
{% set sizeAttrs = 'width="{{ item.link_icon_item.width }}" height="{{ item.link_icon_item.height }}"' %}
{% if item.link_icon_item.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif item.link_icon_item.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.link_icon_item.max_width }}px; max-height: {{ item.link_icon_item.max_height }}px"' %}
{% endif %}
{% set loadingAttr = item.link_icon_item.loading != 'disabled' ? 'loading="{{ item.link_icon_item.loading }}"' : '' %}
<img src="{{ item.link_icon_item.src }}" alt="{{ item.link_icon_item.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
{% set rel = [] %}
{% if item.link_field.no_follow %}
{% do rel.append("nofollow") %}
{% endif %}
{% if item.link_field.open_in_new_tab %}
{% do rel.append("noopener") %}
{% endif %}
<a href="{{ href }}"
{% if item.link_field.open_in_new_tab %}target="_blank"{% endif %}
{% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
>
{% inline_text field="button_link_text" value="{{ item.button_link_text }}" %}
</a>
</div>
</div>

{% else %}
{% set blogs = content_by_id(item.blog_pages) %}
{% if blogs.featured_image %}
<div class="three-page-select-img-wrapper">
<img src="{{ blogs.featured_image }}" loading="lazy" class="three-page-select-img" alt="{{ blogs.featured_image_alt_text | escape }}">
</div>
{% else %}
<img src="{{item.image_field.src}}" >
{% endif %}

<div class="content">
<h3>{{blogs.title}}</h3>
<p> {{blogs.meta_description}}</p>
{% if item.date_field %}
<div class="calander-section">
<svg xmlns="http://www.w3.org/2000/svg" width="18.24" height="20.031" viewBox="0 0 18.24 20.031">
<path id="np_event_1532677_000000" d="M28.041,16.781h-3.5V15.1H23.424v1.679H14.918V15.1H13.8v1.679H10.3V34.633h17.74ZM13.8,17.9v1.679h1.119V17.9h8.506v1.679h1.119V17.9h2.378v3.665H11.42V17.9ZM11.42,33.514V22.685h15.5V33.514Z" transform="translate(-10.051 -14.852)" fill="#313131" stroke="#313131" stroke-width="0.5"/>
</svg>
{{ datetimeformat(item.date_field, '%d/%m/%Y') }}
</div>
{% endif %}
<div class="read-more-container">
{% if item.link_icon_item.src %}
{% set sizeAttrs = 'width="{{ item.link_icon_item.width }}" height="{{ item.link_icon_item.height }}"' %}
{% if item.link_icon_item.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif item.link_icon_item.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.link_icon_item.max_width }}px; max-height: {{ item.link_icon_item.max_height }}px"' %}
{% endif %}
{% set loadingAttr = item.link_icon_item.loading != 'disabled' ? 'loading="{{ item.link_icon_item.loading }}"' : '' %}
<img src="{{ item.link_icon_item.src }}" alt="{{ item.link_icon_item.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
<a class="read-more" href="{{blogs.absolute_url}}" class="three-page-select-list__item">
{% inline_text field="button_link_text" value="{{ item.button_link_text }}" %}
</a>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>

Re: content_by_id not pulling through blog content when a id is used.

jonchim — Thu, 25 Mar 2021 16:01:30 GMT

Thank you @MGilbert for sending this over, do you happen to have a link to a live URL where this module is being used?

Re: content_by_id not pulling through blog content when a id is used.

MGilbert — Fri, 26 Mar 2021 09:45:59 GMT

Yes sorry https://www.finally.agency/website-resources/agency @jonchim

Re: content_by_id not pulling through blog content when a id is used.

jonchim — Fri, 26 Mar 2021 15:31:02 GMT

Hey @MGilbert, it's hard to pinpoint where exactly the code is breaking but I noticed that the blogs that break don't have links compared to the blogs towards the top? Are they all using the same module? And do all the fields need to be filled out in order to display properly? I can see a weird div inside of a link not sure if that's causing it to break. Since i'm not a user on your portal i'm unable to view the custom module, but happy to take this offline to take a closer look.

Re: content_by_id not pulling through blog content when a id is used.

MGilbert — Mon, 29 Mar 2021 08:04:41 GMT

Hi @jonchim thanks for having a look, that weird div you found it just link text which I've added default text now, no all the sections do not need to be filled out to work. However, I have seen some odd behaviour - When I edit a field in the editor the page refreshes and gets all the content and when I save it disappears again - I've added a video https://drive.google.com/file/d/1I_3prbVWp1GqHvASRnkEI7k4Dt4Kezw4/view?usp=sharing showing this here - Would you like me to zip up the module code for you and send it to you?

Re: content_by_id not pulling through blog content when a id is used.

jonchim — Mon, 29 Mar 2021 12:12:16 GMT

Hey @MGilbert,

No problem! yeah that is very odd, thank you for sharing the video context. If you're able to package the module I can take a closer look. I tried using the module code but the missing css/js/module fields may help me troubleshoot further.

Re: content_by_id not pulling through blog content when a id is used.

MGilbert — Mon, 29 Mar 2021 14:34:34 GMT

@jonchim you should be able to download it from here https://drive.google.com/file/d/15eFw8dZIQz_KcImEJjjXSU97EPZOBfyi/view?usp=sharing

Also here is a list of the fields you might need - some are shown/taken away depending on if the user selects manual or automatic content

Re: content_by_id not pulling through blog content when a id is used.

jonchim — Mon, 29 Mar 2021 15:48:11 GMT

Thank you for providing this @MGilbert! i'll take a look and see what i can find!

Re: content_by_id not pulling through blog content when a id is used.

jonchim — Tue, 30 Mar 2021 19:56:06 GMT

Hey @MGilbert,

So i just came across this https://developers.hubspot.com/docs/cms/hubl/functions#content-by-id

It looks like this function has a limit of 10 calls per page, which may explain why you can't see anything be pulled after the 10th blog post on your listing page.

Can you confirm and test that by making the blog that wasn't displaying and make that the 10th post and see if it shows up?

Re: content_by_id not pulling through blog content when a id is used.

MGilbert — Tue, 06 Apr 2021 11:44:11 GMT

@jonchim Hi thanks for sending me that, it does seem to be that it only doesn't work after the 10th one. Any suggestions on what I could do instead - I would add pagination but I don't want multiple pages.

Thanks so much for looking at it

Re: content_by_id not pulling through blog content when a id is used.

jonchim — Wed, 07 Apr 2021 16:39:17 GMT

Hey @MGilbert,

I'm not enitrely sure, @dennisedson any suggestions on how to add more than 10 posts using the content_by_id function?

Re: content_by_id not pulling through blog content when a id is used.

dennisedson — Wed, 07 Apr 2021 20:23:25 GMT

There is a funtion that accepts an array of page ids content_by_ids that I would suggets exploring.

I was looking for a resource to demonstrate how to fill an array and I was pleasantly surprised to see that @alyssamwilie has something on her site (and I didn't even know she had a site 😯) that might help. It is pretty clever!

Did I test it? No. 🙃 If you try it, let us know how it works out.

Note that the limit is the amount of calls you can make is 10 and not the amount of posts. For the content_by_ids, you can fit 100 posts into an array so in theory, you could have up to 1000posts.

Happy hunting 😀

Re: content_by_id not pulling through blog content when a id is used.

MGilbert — Thu, 08 Apr 2021 13:03:51 GMT

@jonchim @dennisedson thanks for having a look, ill give this tutorial a go! fingers crossed

Re: content_by_id not pulling through blog content when a id is used.

MGilbert — Tue, 20 Apr 2021 15:16:32 GMT

Fixed with content by ids function https://developers.hubspot.com/docs/cms/hubl/functions#content-by-ids by setting the array with the ids first in short below
{% set array = [] %}
{% do array.append( item.blog_pages ) %}
{% set blogs = content_by_ids(array) %}

@jonchim @dennisedson thanks so much for your help