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

[marenhogan]

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!

[ankitparmar09 · Accepted solution]

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

[JohnLaprairie]

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;
}

[marenhogan]

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. 

[Chetan_1]

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

{{ module.bg_style.alignment_field.horizontal_align }}

{{ module.bg_style.alignment_field.vertical_align }}

If anything else please let me know. 

[JHuffman1]

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

[JHuffman1]

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

[marenhogan]

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