CMS Development

LHarney
投稿者 | Elite Partner
投稿者 | Elite Partner

How to style template module

解決

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 いいね!
1件の承認済みベストアンサー
DanielSanchez
解決策
キーアドバイザー | Platinum Partner
キーアドバイザー | Platinum Partner

How to style template module

解決

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

元の投稿で解決策を見る

2件の返信
DanielSanchez
解決策
キーアドバイザー | Platinum Partner
キーアドバイザー | Platinum Partner

How to style template module

解決

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
メンバー | Platinum Partner
メンバー | Platinum Partner

How to style template module

解決

Try to use text-align property to align image

 

 

0 いいね!