How to style template module

[LHarney]

Hi,

How can I edit the syle of an image in the dnd template image module?

I want to change the image alignment to center.

This is what I have but it dosn't work:

{% dnd_module path='@hubspot/linked_image',
  img={
    'alt': 'Image alt',
    'loading': 'lazy',
    'size_type': 'auto',
    'max_height': 424,
    'max_width': 400,
    'src': get_asset_url('../images/client-name/landing-page-image.png'),
  },
  styles={
    "alignment": 'center'
  }
%}
{% end_dnd_module %}

Thanks,

Lar

[DanielSanchez · Accepted solution]

Hi @LHarney ,

If you are configuring this at the theme level, you will have to enter the alignment in the JSON of the column, not in the image module. This will assign the "column" to align its contents in the center, left or right.

Another way is to create your own image component with an alignment field, and then at the component level, define the image's position. Then I would use text-align in this created component.

If you don't need to configure the theme level, just click in the page editor (front) on the column that the image is in and adjust the list of content within it.

Did this post help solve your problem? If so, please mark it as a solution.

Best! 🙂

[AWagle]

Try to use text-align property to align image