Display Image Src (in Recent Posts Module) of Module in Post Template

[jestlinbaum]

I have seen this post but am having trouble:

https://community.hubspot.com/t5/CMS-Development/Pulling-Article-Snippets/td-p/198249

In my single post template I have the following:

{% module "post_background_image" path="@hubspot/image" label='Select a background image', export_to_template_context=True %}

This displays an image in the hero of each post. Works fine.

I am making a recent posts module and would like to reference that image in the listing.

{% set tag_posts = blog_recent_tag_posts('default', 'transition', 3) %}
{% for tag_post in tag_posts %}
    <div class="post-tile">
        <div class="post-title">
            {{ tag_post.name }}
        </div>
        <div class="post-image">
         //----How can I reference the image? -----//
        </div>
    </div>
{% endfor %}

Any help greatly appreciated.

Thanks!

[Teun · Accepted solution]

Hi @jestlinbaum ,

Do you want to show the featured image of each blog post or the image that has been set in the module you are referencing?

Featured image:

{% set tag_posts = blog_recent_tag_posts('default', 'transition', 3) %}
{% for tag_post in tag_posts %}
    <div class="post-tile">
        <div class="post-title">
            {{ tag_post.name }}
        </div>
        <div class="post-image">
         <img src="{{ tag_post.post_list_summary_featured_image }}" alt="{{ tag_post.featured_image_alt_text | escape }}" />
        </div>
    </div>
{% endfor %}

Referenced module using export_to_template_context:

{% set tag_posts = blog_recent_tag_posts('default', 'transition', 3) %}
{% for tag_post in tag_posts %}
    <div class="post-tile">
        <div class="post-title">
            {{ tag_post.name }}
        </div>
        <div class="post-image">
         <img src="{{tag_post.widgets.post_background_image.body.img.src}}" />
        </div>
    </div>
{% endfor %}

[miljkovicmisa · Accepted solution]

Hello @jestlinbaum , you should put the following snippet right where your comment is:

<img src="{{tag_post.widgets.post_background_image.body.img.src}}"  alt="">

If my answer was helpful please mark it as a solution.

[Teun]

Jup, @miljkovicmisa is right, I forgot that you want to access the module data from the loop.

[DanielSanchez]

Hi @jestlinbaum ,

Try this:

{{ post.featured_image }}

For recently blog posts module, i use this code (I won't put the CSS code, I just leave the HTML + HubL to evaluate a structure):

 {% set posts = blog_recent_posts('default', 3) %}
    {% for post in posts %}
    <div class="recent-post-blog">
      <a href="{{ post.absolute_url }}" class="recent-header-post" style="background-image: url('{{ post.featured_image }}')"></a>

      <div class="recent-content-post">
      <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
      {# TAGS #}
      </div>
      <div class="recent-content-post-footer">
        {{ post.publish_date|datetimeformat('%B %e, %Y') }}
      </div>
    </div>

 {% endfor %} 

Did this post help solve your problem? If so, please mark it as a solution.

Best! 🙂

[Teun · Accepted solution]

Hi @jestlinbaum ,

Do you want to show the featured image of each blog post or the image that has been set in the module you are referencing?

Featured image:

{% set tag_posts = blog_recent_tag_posts('default', 'transition', 3) %}
{% for tag_post in tag_posts %}
    <div class="post-tile">
        <div class="post-title">
            {{ tag_post.name }}
        </div>
        <div class="post-image">
         <img src="{{ tag_post.post_list_summary_featured_image }}" alt="{{ tag_post.featured_image_alt_text | escape }}" />
        </div>
    </div>
{% endfor %}

Referenced module using export_to_template_context:

{% set tag_posts = blog_recent_tag_posts('default', 'transition', 3) %}
{% for tag_post in tag_posts %}
    <div class="post-tile">
        <div class="post-title">
            {{ tag_post.name }}
        </div>
        <div class="post-image">
         <img src="{{tag_post.widgets.post_background_image.body.img.src}}" />
        </div>
    </div>
{% endfor %}

[jestlinbaum]

@Teun thanks for the reply. I'm looking for the export to template reference. This is on a separate custom module to be used on other site pages. When I try {{ widget_data.post_background_image|pprint }}, it just says "null".

When I pprint on the post template (where the export to template module is listed) it returns all the values on the post page. Which makes sense as the hero image is working fine there.

Not sure why it doesn't come through in the new module.

[Teun]

@jestlinbaum ,

Check my updated answer above and what @miljkovicmisa wrote, I made a mistake, should be fixed now.