APIs & Integrations

matttunney
Top Contributor

Access Custom Module value on page

Is there a way to call a value that is declared in a Custom Module?

I have a module that allows content editors some flexibility around the look and feel of a hero section.

I’d like to be able to set a class on a page div.hero-wrapper based on a choice value set in a custom module.

0 Upvotes
5 Replies 5
3PETE
HubSpot Employee
HubSpot Employee

Access Custom Module value on page

@mattdev I would take a look at our templating language HubL to see if that can help. That should allow you to template out your divs based on certain logic flows. Here is a link to the documentation.

0 Upvotes
matttunney
Top Contributor

Access Custom Module value on page

I should of been a little more clear.
I’ve written a custom module that outputs a value against {{ widget.hero_background_color }}

I can access the value set from within the custom module, but I can;t reference that value outside of the scope of the custom module.

The module I have created allows users to set css values against inline styles for background position, repeat, image and size.

To set background color, I need the custom module choice for hero_background_color to accessed outside of the custom modules scope.

Is there a way I can access this value in another page item?

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Access Custom Module value on page

@mattdev So I think you have nailed one limitation being scope. You would have to everything reside in the scope to be able to access the value. That being said there might be a workaround for it. You could try and use HubDB to store the value and access it it from another part of your website that is outside the scope of that custom module. You will most likely will need to create some sort of session ID to go along with the choice or maybe the contact last name to correctly be able to match up those user choices down the road.

0 Upvotes
matttunney
Top Contributor

Access Custom Module value on page

Thanks for the feedback.
I’ve gone for a Custom Html Global Module with the HubL markup added.
It seems to work

{% image "hero_background_image" label='Select a background image for desktop', 
src='', export_to_template_context=True, no_wrapper=True %}

{% choice "hero_background_repeat" label='Select a background repeat for desktop', value='No-repeat', choices='[[\"no-repeat\", \"no-repeat\"], [\"repeat-x\", \"Horizontally\"], [\"repeat-y\", \"Vertically\"], [\"repeat\", \"Repeat\"]]', export_to_template_context=True, no_wrapper=True %}

{% choice "hero_background_position" label='Select a background position for desktop', value='center center', choices='[[\"left top\", \"Top left\"], 
[\"center top\", \"Top center\"], 
[\"right top\", \"Top right\"], 
[\"left center\", \"Center left\"], 
[\"center center\", \"Center center\"], 
[\"right center\", \"Center right\"], 
[\"left bottom\", \"Bottom left\"], 
[\"center bottom\", \"Bottom center\"], 
[\"right bottom\", \"Bottom right\"]]', export_to_template_context=True, no_wrapper=True %}

{% image "hero_background_image_mobile" label='Select a background image for mobile', 
src='', export_to_template_context=True, no_wrapper=True %}

{% choice "hero_background_repeat_mobile" label='Select a background repeat for mobile', value='No-repeat', choices='[[\"no-repeat\", \"no-repeat\"], [\"repeat-x\", \"Horizontally\"], [\"repeat-y\", \"Vertically\"], [\"repeat\", \"Repeat\"]]', export_to_template_context=True, no_wrapper=True %}

{% choice "hero_background_position_mobile" label='Select a background position for mobile', value='center center', choices='[[\"left top\", \"Top left\"], 
[\"center top\", \"Top center\"], 
[\"right top\", \"Top right\"], 
[\"left center\", \"Center left\"], 
[\"center center\", \"Center center\"], 
[\"right center\", \"Center right\"], 
[\"left bottom\", \"Bottom left\"], 
[\"center bottom\", \"Bottom center\"], 
[\"right bottom\", \"Bottom right\"]]', export_to_template_context=True, no_wrapper=True %}

{% choice "hero_background_color" label='Select a background color for the hero', value='bg-color-secondary', choices='[[\"\", \"White\"], 
[\"bg-color-primary\", \"Primary Color (orange)\"], 
[\"bg-color-secondary\", \"Secondary Color (deep blue)\"], 
[\"bg-color-e6grey\", \"Light grey\"], 
[\"bg-color-f2grey\", \"Lightest grey\"]]', export_to_template_context=True, no_wrapper=True %}


{% choice "hero_background_size" label='Fit background image to container', value='auto', choices='[[\"auto\", \"auto\"], 
[\"cover\", \"Make fit\"]]', export_to_template_context=True, no_wrapper=True %}

<style>
.hero-wrapper {
    background-image: url('{{ widget_data.hero_background_image.src }}'); 
    background-repeat: {{ widget_data.hero_background_repeat.value }};
    background-position: {{ widget_data.hero_background_position.value }};
    background-size: {{ widget_data.hero_background_size.value }};
}

@media (max-width: 767px) {
  .hero-wrapper {
    background-image: url('{{ widget_data.hero_background_image_mobile.src }}');
    background-repeat: {{ widget_data.hero_background_repeat_mobile.value }};
    background-position: {{ widget_data.hero_background_position_mobile.value }};
  }
}
</style>
0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Access Custom Module value on page

@mattdev

Awesome, i’m glad you found a workaround. thanks to some digging by @zwolfson, he found a page that might be helpful for down the road if this comes up again. There is a way you can export out that value to increase the scope of it.

0 Upvotes