CMS Development

WEDIA
Member | Gold Partner
Member | Gold Partner

Call with Hubl custom module to another template

Hello all,

 

My issue here is that I'm creating a custom module with and img tag inside and using it on the Article template.

 

{% if module.vertical_image_field.src %}
	<img src="{{ module.vertical_image_field.src }}" alt="{{ module.vertical_image_field.alt }}" width="{{ module.vertical_image_field.width }}" height="{{ module.vertical_image_field.height }}">
{% endif %}
<p>I am a custom module</p>

 

I want to call my custom module to the blog_listing template but module doesn't print.

 

I am using this code on my listing template

{{ content.widgets.vertical_image_field.src   }}

 

Any ideas or small example of how to use custommodule inside other template with code is appreceiated.

 

0 Upvotes
10 Replies 10
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Call with Hubl custom module to another template

try inspecting the data in allWidgets, to see if what you're looking for is in there

{{content.allWidgets|pprint}}
0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Call with Hubl custom module to another template

that is some of that fancy hubspot wizard stuff @tjoyce pulls out of his hat 🙂

i didnt know allWidgets was a thing

WEDIA
Member | Gold Partner
Member | Gold Partner

Call with Hubl custom module to another template

Any of these solves my problem. Any ideas?

 

bump!

0 Upvotes
WEDIA
Member | Gold Partner
Member | Gold Partner

Call with Hubl custom module to another template

Ι used the provided code but it prints nothing. I get a huge space.

 

space.JPGcode.JPG

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Call with Hubl custom module to another template

@WEDIA - I'm confused by your first screenshot. Why is there html rendering in the rendered view? Or, are you screenshotting your code view? The pprint should appear in the preview of your page, not in the code editor. If you still don't see anything in allWidgets, try just doing {{content|pprint}}, it's a great way to debug and figure out the right way to traverse the content dictionary.

0 Upvotes
WEDIA
Member | Gold Partner
Member | Gold Partner

Call with Hubl custom module to another template

The previews screenshot comes from the module's code. I used

 {{ content|pprint }}

and this module is not printed because it's not drag n' droped on my Blog Listing page. This module is drag n dropped on the Article Page which is printed (adds a new vertical image for the article).

 

module.JPG

 

I need to get this module with code to work on my Blog Listing Page for every article i print there.

 

When i use on the listing template

 

{{ content.widgets.allWidgets|pprint }}

I get null

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Call with Hubl custom module to another template

not content.widgets.allWidgets... it should be content.allWidgets

0 Upvotes
WEDIA
Member | Gold Partner
Member | Gold Partner

Call with Hubl custom module to another template

Ok this worked. I got the custom module.

 

vertical_image_code.JPG

 

How can i now just get the image source?

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Call with Hubl custom module to another template

I can't test this code right now but, it would be something like this:

 

{% for w in content.allWidgets %}
  {% if w.label == "Vertical Image and more" %}
    //try {{w.pprint}} if w.body.src doesn't work... you might need to adjust the way you're calling src 
    {{w.body.src}}
  {% endif %}
{% endfor %}
0 Upvotes
WEDIA
Member | Gold Partner
Member | Gold Partner

Call with Hubl custom module to another template

I tried all these below but i get empty html.

 

<div>{% module "module_1540413242653377" module_id="4162689" label="Vertical Image and more" %}</div>
{% for w in content.allWidgets %}
    {% if w.label == "Vertical Image and more" %}
        <div class="print">{{w.pprint}}</div>
        <div class="vertical-image">{{w.vertical_image_field.src}}</div>
    {% endif %}
{% endfor %}
0 Upvotes