How to check if an image is undefined from inside a macro?

[deanhubspot]

What sorts of values can you pass into macros? I can pass strings fine, but for images I have been passing in the src and alt attributes in lieu of an image object. Can I pass the image object itself somehow? 

The normal {% if image.src%} doesn't work from inside the macro. I also tried using the "default" filter '{{widget.image.src|default("empty")}}' to detect an empty image, but it never gets used. Another puzzling thing is when I try running the "count" filter on the value. {{image|count}} gives me a value of 38 or so, when I don't have an image defined. 

Is there a good way to pass images into a macro or detect if the image passed in is defined or not?

[ndwilliams3]

@deanhubspot,

I think the challenge is trying to access the object from within your macro. Set it up so your if statement/default is in the before passing into the macro.

Can you post your macro code or explain your end goal/use case? That would help me understand.

{% image "testImage2" %}

{% macro imgTest(imgsrc)  %}
  <p>{{ imgsrc }}</p>
{% endmacro %}

{{ imgTest(widget_data.testImage.src|default('http://example.com/default.jpg')) }}

[deanhubspot]

@ndwilliams3

This is the basic premise of the code. I only want to include the image if there is one provided. 

{% macro mymacro(testImg) %}

{% if testImg != "blank" %}
<img class="product-image" src="{{testImg}}">
{% endif %}

{% endmacro %}

{{ mymacro('{{widget.image1.src|default("blank")}}') }}

You can declare image objects with {% image %}? Could I use those inside the macro?

[ndwilliams3]

For your example, that would work. However there is a syntax error. You don't need curly brackets around your argument.

{{ mymacro(widget.image1.src|default("blank")) }}

[deanhubspot]

Sorry, missed that last reply. I have tried that now as well, though, and it still isn't working:

{% macro mymacro(testImg) %}
<h6>{%if testImg == "blank"%}it's blank{% endif %}</h6>
{% endmacro %}

{{menucta(widget.image1.src|default("blank"))}}

The "it's blank" text doesn't display, even if I have no image1 image defined in my widget. 

[ndwilliams3]

calling variables defined in a module have a specific syntax depending on whether export_to_template_context is true or false.

Is the image you are attempting to use defined have export_to_template_context = true? 

{% image "image1" label="lbl", alt="alt", src="http:/example,com/test.jpg", export_to_template_context=True%}

If so, use:

{{ menucta(widget_data.image1.src|default("blank")) }}

If not:

{% image "image1" label="lbl", alt="alt", src="http:/example,com/test.jpg" %}

Use:

{{ menucta( content.widgets.image1.body.src|default("blank")) }}

[deanhubspot]

I'm not actually creating the image with {% image %}, it's a field in the custom module. 

{% macro test(varr) %}
    {% if varr=="blank" %}
        blank
    {% else %}
        {{varr}}
    {% endif %}
{% endmacro %}

{{ test(content.widgets.foo.body.src|default("blank")) }}

This doesn't work. Foo is the image field, and the always shows blank, regardless of if there's an image defined or not. 

I did end up working around the problem, by detecting if the image is empty first, and then calling the macro without the final parameter if it doesn't. Kind of messy, but it works. Thanks for the help, though!

EDIT: Ah, didn't see that latest reply. That's great that there's a solution, in this case I would just create an image object with the {% image %} code, but not display it? Then use that?

[ndwilliams3 · Accepted solution]

Custom modules add another complexity to the mix as Hubspot adds a unique id to module names for each instance of the module on the page.

so the variable would not be:

{{content.widgets.foo.body.src}}

but:

content.widgets.module_00000000000_foo.body.src

Where 00000000000 is the id for the custom module. You can read about it more here. http://designers.hubspot.com/docs/cos/custom-modules#using-hubl-within-custom-modules

I kinda found a workaround for getting it to work dynamically. Here's the post on that workaround.

https://community.hubspot.com/t5/COS-Design-Support/Using-a-module-inside-a-custom-module/m-p/7399#M...

[deanhubspot]

Ah, that would explain it then! Thanks, I can use that in the future, then. 

[ndwilliams3]

@deanhubspot,

You can pass the full image object into the macro as the argument. I tested and it is working for me. Here's the code I tested:

{% image "testImage" label='Executive photo', alt='Photo of Brian Halligan', src='//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg', width='300', export_to_template_context=True %}

{% image "testImage2" label='Executive photo2', export_to_template_context=True %}

{% macro imgTest(imgObject)  %}
{% if imgObject.src %}
   <img src="{{ imgObject.src }}" width="{{imgObject.width}}" alt="{{imgObject.alt}}"/>
{%endif%} 
{%else%}
<!-- No image src --> 
{% endmacro %}

{{ imgTest(widget_data.testImage) }}
{{ imgTest(widget_data.testImage2) }}

[ndwilliams3]

I don't think you really need a macro or if statement for what you are doing. With the default image module, if an image is not selected, it won't include an image tag. Use HUBL and don't specify a default image.

{% image "image1" label='My Image' %}

Without an image selected, the markup is just an empty wrapper:

<span id="hs_cos_wrapper_image1" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="image"></span>

[deanhubspot]

I'm using a macro because the code is used multiple times in the module. 

I did not realise there is a function for displaying an image, so I have tried using that inside the macro instead of my own markup:

{% image "mytestimg" label="lbl", alt="alt", src="{{testImg}}" %}

It still displays an image with no source, and just the alt tag. The other thing is I'm using a jQuery plugin for lazy loading that needs the image source to be in a data-layzr attribute instead of src.