HubSpot macro not outputting markup

Question

I have a my_macro.html defined which currently looks like this:

<!--
  templateType: "none"
  isAvailableForNewContent: false
-->


{% macro video_card(background_image, video_link) %}

    <div class="videoCard" style="background-image: url({{ background_image }});">
      <a class="button--play" id="play-video"></a>
      <h1>test</h1>
    </div>

{% endmacro %}

In HubSpot, within my custom module, I'm trying to use this macro. I have the following:

{% import '/website/assets/hubl/my_macros.html' as macros %}

<div class="hero">
  <div class="hero__video">
    {{ macros.video_card }} <!-- this is where I'm trying to print markup -->
  </div>
</div>

However, on the output, where I should expect the markup, I see the following message:

com.hubspot.jinjava.lib.fn.MacroFunction@9d25d51

Unsure why? I've followed the documented import and my_macro.html file name structure defined here.

Answer 1

For anyone wondering, the correct way to use macros in a custom module would be:

{% from '/website/assets/hubl/my_macros.html' import videoCard %}

And its usage would be:

{{ video_card('image.jpg') }}

Answer 2

your macro has 2 parameters video_card(background_image, video_link), but in your template

{{ macros.video_card }} <!-- this is where I'm trying to print markup -->

you forgot to pass any parameters ?

it sould be like:

{{ macros.video_card('bg-image.png', 'video.mp4') }}