Get an image source from a blog post's banner module into the listing template

[benji_thecroc]

Hi,

I have an image field within our blog posts teamplate banner module. I can get this displaying fine within the module template using {{ module.banner_image.src }} however I'm unsure how I would get this image on the listing template within the loop. I'm assuming I need to reference the specific module and then the field followed by srcbut I'm just not sure what the syntax is for this, I have tried

{{ content.widget.mobile_thumbnail.src }}

but no luck

Thanks

[tjoyce]

@benji_thecroc - does the banner image have export_to_template_context=true? then you can do widget_data.banner_img.src

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[benji_thecroc]

Hi,

Unfortunately it's not added to the module via HubL so I can't add in that attribute it seems, I've attached some screenshots. The image field is added to a custom module and it's then just displayed via HubL language. It's not implemented purely through HubL.

So we have a custom module acting as a blog posts banner. We then wanted a method of uploading a thumbnail image to be used as a mobile version of the featured image as the desktop versions aren't suitable for the mobile layout due to featured images have a landscape orientation and no amount of positions or cropping will make those suitable for a 1;1 ratio square on mobile. So I implemented an additional 'mobile_thumb' field within the custom banner module. I was hoping we could pull the field from the custom module and display in the listing view.

Banner Module TemplateImage Field options

[tjoyce]

@benji_thecroc - ahh, you can't really share context between modules. Your best bet is to bake the banner right into the blog template with HUBL instead of using the custom module.

[benji_thecroc]

But the banner needs to have different images based on the blog post.

All we really need is a way to upload a thumbnail to a blog post that isn't the featured image and only show that image on the listing template.

[tjoyce · Accepted solution]

@benji_thecroc - Right, you can do that using the image src HUBL tag. Put it right into your blog template code. Then read that value in your listing template. 

Here's a similar question with a solution I have to this question: https://community.hubspot.com/t5/Content-Design-Questions/Pulling-Article-Snippets/td-p/198249

[benji_thecroc]

@tjoyce

Not to worry, I've checked out the related issue and that's put me on the right track. Thank you for your help.

[benji_thecroc]

The blog post template is built using the template builder. I'm assuming I would I clone the template to HTML then add in the image src HUBL tag.

The only issue I can see here is how would a user then add this image in when creating a post if this image is hidden/not viewable on the post page itself. This image is used purely for the post listing template but should be specific to each blog post.

[tjoyce]

@benji_thecroc - You could actually add that HUBL code to the head or footer of your template and when the blog creator is creating a post, there will be a module in the left column where they can change this image.

Then, in your blog listing template, just add the extra info in the loop to find that HUBL widget data.

Hope that makes sense.