CMS Development

LHarney
Participant | Partner
Participant | Partner

How to style template module

SOLVE

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.

 

Screenshot 2022-03-09 at 15.21.53.png

 

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

0 Upvotes
1 Accepted solution
DanielSanchez
Solution
Key Advisor

How to style template module

SOLVE

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! 🙂

View solution in original post

DanielSanchez
Solution
Key Advisor

How to style template module

SOLVE

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
Member

How to style template module

SOLVE

Try to use text-align property to align image

 

 

0 Upvotes