Calling custom module fields in multiple custom modules

[kvrbm]

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

[kvrbm]

@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:

[dbeau79]

@kvrbm , when you paste that snippet, change "module_160616227613423" to "custom_header" (or whatever name you want to give it).

[kvrbm]

@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.

[dbeau79]

@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.

[kvrbm]

@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?

[dbeau79]

@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?

[dbeau79 · Accepted solution]

@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 %}

[dbeau79]

@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.

[kvrbm]

@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.

[dbeau79]

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.

[dennisedson]

Hey @kvrbm 

Going to hook you up with some Hubl pros 😀

@webdew , @BarryGrennan  @dbeau79 , how would you all approach this