# Calling custom module fields in multiple custom modules

**URL:** <https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876>\
**Category:** CMS Development\
**Created:** [November 11, 2020, 3:25pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876 "2020-11-11T15:25:41Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![kvrbm](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kvrbm/32/59606_2.png) [@kvrbm](https://community.hubspot.com/u/kvrbm)\
**Post date:** [November 11, 2020, 3:25pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/1 "2020-11-11T15:25:41Z")

</div>

I have an if statement set up on a custom module used in the blog single template that pulls the featured image from post settings on default with the choice to set a custom header image:

style=“background-image: url(‘{% if module.custom\_header\_image == ‘no’ %}{{ content.featured\_image }}{% endif %}{% if module.custom\_header\_image == ‘yes’ %}{{ module.blog\_header\_image.src }}{% endif %}’)”

Next, I’m trying to output that same result in a custom module for the header of the blog listing template. I’ve tried the following method in the listing custom module to no avail:

style=“background-image: url(‘{% if content.widgets.module\_1605051252621111.body.custom\_header\_image == ‘no’ %}{{ content.featured\_image }}{% endif %}{% if content.widgets.module\_1605051252621111.body.custom\_header\_image == ‘yes’ %}{{ content.widgets.module\_1605051252621111.body.blog\_header\_image.src }}{% endif %}’);”

Any help would be appreciated. Thank you

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 12, 2020, 8:28pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/2 "2020-11-12T20:28:35Z")

</div>

Hey @kvrbm

Going to hook you up with some Hubl pros 😀

[@webdew](https://community.hubspot.com/t5/user/viewprofilepage/user-id/131510) , @BarryGrennan @dbeau79 , how would you all approach this

---

<div class="post-metadata">

**Author:** ![dbeau79](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbeau79/32/82797_2.png) [@dbeau79](https://community.hubspot.com/u/dbeau79)\
**Post date:** [November 12, 2020, 8:48pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/3 "2020-11-12T20:48:50Z")

</div>

@kvrbm here’s how I’d approach this. In your post template give your custom module a name, something like this: {% module **“custom\_header”** path=“your path” label=“your label” %}

And, if I understand correctly, you want to get the most recent blog post’s header image and set that as the listing header image?? If so:

{% for content in contents %}

{% if loop.first %}

{# inline if statements are clean! #}

style="background-image: url(‘{{ content.widgets. **customer\_header**.body.custom\_header\_image.src if content.widgets. **customer\_header**.body.custom\_header\_image.src else content.featured\_image }}’);

{% endif %}

{% endfor %}

Let me know if that’s what you’re looking for. Happy to help out more if needed.

---

<div class="post-metadata">

**Author:** ![kvrbm](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kvrbm/32/59606_2.png) [@kvrbm](https://community.hubspot.com/u/kvrbm)\
**Post date:** [November 12, 2020, 10:44pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/4 "2020-11-12T22:44:59Z")

</div>

@dbeau79thanks for the response.

I think where I’m going wrong is with the naming of the post module. The module i’m trying to pull this image from is included on the post template and titled ‘Blog Page Hero’ - it also provides the following usage snippet:

{% module “module\_160522012242339” path=“/Custom modules/Blog Page Hero”, label=“Blog Page Hero” %}

The number changes each time i copy it, which I assume is part of the problem. This is where I got the “module\_1605051252621111” in my original post.

And you’re correct, I’m trying to output the custom or featured image in the custom header module of the listing template.

---

<div class="post-metadata">

**Author:** ![dbeau79](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbeau79/32/82797_2.png) [@dbeau79](https://community.hubspot.com/u/dbeau79)\
**Post date:** [November 13, 2020, 12:22am UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/5 "2020-11-13T00:22:30Z")

</div>

Exactly @kvrbm , so replace the “module\_160522012242339” with something like “customer\_header” that you can reference. The module will still render as long as the path is correct.

---

<div class="post-metadata">

**Author:** ![kvrbm](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kvrbm/32/59606_2.png) [@kvrbm](https://community.hubspot.com/u/kvrbm)\
**Post date:** [November 23, 2020, 8:17pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/6 "2020-11-23T20:17:29Z")

</div>

@dbeau79I may be overlooking something obvious, but i’m not seeing any place within the module to change the name. The usage snippet is not editable:

 ![34609iD40569B9BC112D33.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/6/169b48248088b61e4e19621673b2d02f688708f7.png)

---

<div class="post-metadata">

**Author:** ![dbeau79](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbeau79/32/82797_2.png) [@dbeau79](https://community.hubspot.com/u/dbeau79)\
**Post date:** [November 24, 2020, 11:07am UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/7 "2020-11-24T11:07:54Z")

</div>

@kvrbm , when you paste that snippet, change “module\_160616227613423” to “custom\_header” (or whatever name you want to give it).

---

<div class="post-metadata">

**Author:** ![kvrbm](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kvrbm/32/59606_2.png) [@kvrbm](https://community.hubspot.com/u/kvrbm)\
**Post date:** [November 24, 2020, 3:24pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/8 "2020-11-24T15:24:37Z")

</div>

@dbeau79 thanks for the help.

I’m still unclear on where I should be including the following snippet (from the single post template) in the listing template:

{% module “custom\_post\_header" path=“/Custom modules/Blog Single Hero”, label=“Blog Single Hero” %}

I’ve included the if statement as you’ve described in your original response, but can still only get the listing template to output the featured image from the ‘blog single hero’ module.

---

<div class="post-metadata">

**Author:** ![dbeau79](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbeau79/32/82797_2.png) [@dbeau79](https://community.hubspot.com/u/dbeau79)\
**Post date:** [November 24, 2020, 5:45pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/9 "2020-11-24T17:45:26Z")

</div>

@kvrbm , no problem.

You’re going to include the snippet (module) on your blog single template as such:

{% module “ **custom\_post\_header**" path=“/Custom modules/Blog Single Hero”, label=“Blog Single Hero” %}

Then in your listing template you’ll include the following to pull the correct image:

{% for content in contents %}

{% if loop.first %}

style="background-image: url(‘{{ content.widgets. **custom\_post\_header**.body.custom\_header\_image.src if content.widgets. **custom\_post\_header**.body.custom\_header\_image.src else content.featured\_image }}’);

{% endif %}

{% endfor %}

Does this make sense? So you are establishing the existence (or not) of the custom image in your blog post via that custom module. Then in the listing template we are looping through your posts, getting the most recent, and drilling into that custom module to see if you’ve set a custom image or not. If you did, it will put that. If not, it will put the featured image.

---

<div class="post-metadata">

**Author:** ![kvrbm](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kvrbm/32/59606_2.png) [@kvrbm](https://community.hubspot.com/u/kvrbm)\
**Post date:** [November 24, 2020, 6:18pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/10 "2020-11-24T18:18:32Z")

</div>

@dbeau79 that process makes sense, the inclusion of that snippet is where i’m getting caught up. Both the listing and single templates are DnD templates, and I have each hero module included in the respective template, but I can’t modify the name of the module the same way you would in a HTML+HubL template. Would the template type make a difference in capabilities?

---

<div class="post-metadata">

**Author:** ![dbeau79](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbeau79/32/82797_2.png) [@dbeau79](https://community.hubspot.com/u/dbeau79)\
**Post date:** [November 24, 2020, 6:44pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/11 "2020-11-24T18:44:18Z")

</div>

@kvrbm , I see. Can you include the snippet in the blog content post/listing module? Basically build your hold blog template in that if you can’t use html+hubl?

---

<div class="post-metadata">

**Author:** ![dbeau79](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbeau79/32/82797_2.png) [@dbeau79](https://community.hubspot.com/u/dbeau79)\
**Post date:** [November 25, 2020, 5:26pm UTC](https://community.hubspot.com/t/calling-custom-module-fields-in-multiple-custom-modules/27876/12 "2020-11-25T17:26:25Z")

</div>

@kvrbm , if that’s not an option why not use ajax? Not ideal, given that the image needs to load at the top of your page but it would work. So …

In your post banner set a data attribute to make it easier to grab the image source. Your banner div would look something like this \<div class=“whatever” **data-featured=“featured.src”** style=“background-image: url(featured.src);”\>

{% for content in contents %}

{% if loop.first %}

\<script\>

var post\_url = “{{ content.absolute\_url }}”;

$(function() {

$.ajax({  
url : post\_url,  
success : function (data) {  
var img\_src=$(data).find(‘.YOUR-POST-BANNER-CLASS’).attr(“data-featured”);  
$(‘.YOUR-LISTING-BANNER-CLASS’).css(“background-image”,“url(”+img\_src+“)”);

}  
});

});

\</script\>

{% endif %}

{% endfor %}