topic Re: How to return values for Alignment Field on Styles tab - alignment_field in CMS Development

How to return values for Alignment Field on Styles tab - alignment_field

marenhogan — Fri, 14 Jul 2023 20:07:51 GMT

Hello,

I have added the Alignment Field to my custom module. I cannot find any way to actually return the value of the user's selection, nor is there any documentation on that.

If anyone has a cheat sheet for all the module theme fields, that would be especially great.

For example, for the color module, you can return it like

module.field_group.field_name.color
module.field_group.field_name.opacity

For images, you can return it like

module.field_group.field_name.css

It seems to not follow any standard pattern and there is nothing indicating how to output it on Hubspot's official documentation.

Here are some things I've tried with my alignment module, but each time it returns empty

{{ module.bg_style.alignment_field }} {# the snippet #}
{{ module.bg_style.alignment_field.css }}
{{ module.bg_style.alignment_field.horizontal_align }}
{{ module.bg_style.alignment_field.horizontal_align.css }}

I appreciate any help!

Re: How to return values for Alignment Field on Styles tab - alignment_field

Chetan_1 — Fri, 14 Jul 2023 21:20:58 GMT

Try this one for Horizontal and vertical separately and don't forget the change the alignment field to verify the working of it.

If anything else please let me know.

Re: How to return values for Alignment Field on Styles tab - alignment_field

ankitparmar09 — Mon, 17 Jul 2023 13:18:42 GMT

Hello @marenhogan

This kind of custom field, you can you following syntax

1) Color field
{
  color: rgba({{module.field_group.field_name.color|convert_rgb}},{{module.field_group.field_name.opacity / 100 }});
}

2) Alignment field
{
    text-align: {{ module.bg_style.alignment_field.horizontal_align }};
}

Link: https://developers.hubspot.com/docs/cms/building-blocks/module-theme-fields

The above syntax it can help you

Re: How to return values for Alignment Field on Styles tab - alignment_field

marenhogan — Tue, 18 Jul 2023 17:20:51 GMT

Thanks! Adding the text-align did the trick. I wish there was some indication in the documentation as to what exactly it returns. For some items, you use .color, or .css and for some you do not.

Re: How to return values for Alignment Field on Styles tab - alignment_field

marenhogan — Tue, 18 Jul 2023 17:21:37 GMT

Thanks! It looks like it only returns left, right, etc so I needed to add the text-align piece (above) as well. Appreciate it!

Re: How to return values for Alignment Field on Styles tab - alignment_field

JHuffman1 — Fri, 17 Nov 2023 18:48:23 GMT

Thanks for this. The developer documentation is missing the output structure for style fields, especially considering the syntax is inconsistent.

Re: How to return values for Alignment Field on Styles tab - alignment_field

JohnLaprairie — Fri, 15 Mar 2024 09:46:29 GMT

I found that for the Text Alignment field, that the documentation is a bit sparse on what needs to go into your Hubl code. It was not obvious to me at first but I found this worked:

.product-filter h2 {
color: {{ module.style.heading_color.color }};
text-align: {{ module.style.heading_alignment.text_align }};
}

This returns:

#hs_cos_wrapper_widget_1707440351533 .product-filter h2 {
color: #FFFFFF;
text-align: CENTER;
}

Re: How to return values for Alignment Field on Styles tab - alignment_field

JHuffman1 — Wed, 20 Mar 2024 08:09:37 GMT

HubSpot documentation is overall GREAT. But it is missing some key details on what snippets should be for style fields in the module editor.