Displaying an image_src module on single blog post and post listing

Develop, Build & Integrate CMS Development
1

I’m trying to add a option for a custom banner image to our blog posts. Reading through the widget documentation, it seems like that would do the trick:

I’ve added an image_src widget to our single post template, which correctly displays an image selector when editing a post.

However, when I try to print the value in the single post or banner template, it’s empty.

Post Template:

{% module "blog_listing_featured_image"
 path="@hubspot/image_src",
 label="Listing Featured Image",
 export_to_template_context=True,
 no_wrapper=True
%}
<div style="display:none">{{ content.widgets.blog_listing_featured_image.body.value }}</div>

Banner Module Template:

{% set topic_posts = blog_recent_topic_posts( 'default', 'featured', 1 ) %}
<header class="banner {% if is_listing_view %}{% else %}banner--single-post{% endif %}"
 {% if topic_posts and is_listing_view %}
 {% for topic_post in topic_posts %}
 {% if topic_post.widgets.blog_listing_featured_image.body.value %}
 style="background-image:url('{{ topic_post.widgets.blog_listing_featured_image.body.value }}')"
 {% else %}
 style="background-image:url('https://website.com/hubfs/Banners/Blog%20Default%20Banner%20Image_02.png')"
 {% endif %}
 {% endfor %}
 {% elif module.banner_image.src %}
 style="background-image:url('{{ module.banner_image.src }}')"
 {% else %}
 style="background-image:url('https://website.com/hubfs/Banners/Blog%20Default%20Banner%20Image_02.png')"
 {% endif %}>
 ...
</header>
...

Any help would be appreciated!

2

Hi @JBoylan0,

you don’t really need an image-widget/function for displaying featured images in posts (or pages) since it’s already build in :wink: (Unless you want to have more control)

to use it simply write your post code like this

<img src="{{ content.featured_image }}" alt="{{ content.featured_image_alt_text }}" class="postFeaturedImage">

you can find a detailed list of all possible variables for blogs here.

also I recommend to delete

style="display:none"

from your div

best,

Anton

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.

3

Thanks for the reply Anton.

Yes, I know we can use the featured image, we’re already using it in a different context in the single post template. We need a custom banner image in addition to the featured image.

The display none is only set to demonstrate that I’m unable to pull the widget image url into the single post template. We don’t intend to display it in the single post template. That div should have the image URL printing to it, but {{ content.widgets.blog_listing_featured_image.body.value }} is empty.

It seems like it should work, according to the docs, and according to other threads I’ve read.

Any insight into why the widget is not working, or what I’m missing would be helpful.

Thanks,

-Jake