How do I add a specific image to a page template file?

[marquizzo]

I'm trying to add an image to a page template I'm building manually. However, when I add a hardcoded image src to the module:

{% dnd_row %}
  {% dnd_module path='@hubspot/linked_image',
    src='https://xxx.hubspotusercontent.net/hubfs/xxx/hero.png',
    alt='Placeholder image'
  %}{% end_dnd_module %}
{% end_dnd_row %}

 The output HTML looks like this:

<img src="https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png" class="hs-image-widget " style="width:200px;border-width:0px;border:0px;" alt="placeholder_200x200" title="placeholder_200x200" width="200">

It doesn't link to the src I defined, the alt text is different, and it adds all kinds of styles that I didn't request. How can I add my own fields to the @hubspot/linked-image module?

Additionally, I tried looking up some sort of documentation on how to assign default values to {% dnd_modules %}, but I found that and this article very uninformative. Some of those images are from 2018 and the design manager looks nothing like that anymore. How can I find out updated documentation on which fields are available for each dnd_module? What syntax can I use for each value type? text='Hello' seems to work, but color={r: 255, g: 255, b: 255, a: 1} doesn't work.

[BarryGrennan · Accepted solution]

You'd use something like 

 {% dnd_module
        path="@hubspot/linked_image",
        img={
          "alt": "alt text",
          "loading": "lazy",
          "src": "your-image-url"
        }
      %}
      {% end_dnd_module %}

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[BarryGrennan · Accepted solution]

Default module documentation is here

But I don't think it's really going to give you the answer you're looking for.

If you look at how the module works on the edit screen there is no "100%". What you'd do is set size to auto adjust, set max-size to custom and max-width to something really high (assuming your css already sets max-width:100% on images so it's not overflowing the page)

This wolud output like:

{% dnd_module
        path="@hubspot/linked_image",
        offset=0,
        width=12,
        horizontal_alignment="CENTER",
        img={
          "alt" : "placeholder_200x200",
          "height" : 200,
          "loading" : "lazy",
          "max_height" : 20000,
          "max_width" : 20000,
          "size_type" : "auto_custom_max",
          "src" : "https://static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png",
          "width" : 200
        }
      %}
      {% end_dnd_module %}

When in doubt, I go into a page,  set it up how I want it and then use Developer Mode to copy the section I want as HubL.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[marquizzo]

Oh, thank you so much for that video! The "Copy as HubL" button is exactly what I was looking for! I'm not sure why the button is so well hidden... it could've saved me a full week's worth of work if it was always available. Thanks again!

[BarryGrennan · Accepted solution]

You'd use something like 

 {% dnd_module
        path="@hubspot/linked_image",
        img={
          "alt": "alt text",
          "loading": "lazy",
          "src": "your-image-url"
        }
      %}
      {% end_dnd_module %}

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[marquizzo]

Thank you for your answer! That does solve the img.src attribute. However, is there documentation for all the attributes available per module? Right now I'm stuck on the width being automatically assigned "200px", and I want it at "100%". I don't want to bother you with a new question for every single property, so is there documentation for me to find all the properties available in the module? I'm trying to look at the linked_image module source code, and all I see is width = module.width... where does the resizing actually take place?

{% linked_image
    label="Linked Image",
    src='{{ module.img.src }}',
    alt='{{ module.img.alt }}',
    width='{{ module.img.width }}'
    // ...
%}