Changing background image/colour on page level

[Remi]

Hi all,

I've been trying to change the background colours / images on the page level but to no avail. So far, I've been doing this on the template level but it starts getting messy in our template folder.

Any idea of how I could do this? 

Thanks! 

Rémi

[Jsum]

@Remi You can achieve this by using inline styling and hubl.

For the background images you would just set up inline styline for a background image:

<div style="background: url();">

</div>

Then use either and image or image source widget:

{% image_src "system_name" src='file_name.jpg', no_wrapper=True %}

If you use the image src widget you can either place it inline: 

<div style="background: url({% image_src "system_name" src='file_name.jpg', no_wrapper=True %});">

</div>

Or export the widget data to the template context and place the data token for the widgets src in the url parenthasis. 

If you use an image module it is the same concept but you have to export it to the template and use a data token for the src, you can not do inline.

For background colors it is also the same concept aswell. You would use a text widget:

{% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}

if you use no_wrapper=True you can place the widget inline, or you can export to the template and use a data token:

<div style="background: #{% text "bg_color" label="BG Color", value="000", no_wrapper=True %}">

</div>

I placed the "#" outside of the module since it should always be their. The default value is "000" which is short code for "000000" which is the color black. on the page editor you will have an editable feild labeled "BG Color" with a preset value of "000". changing this value to another hex color will change the background color. This set up will appy if you are using rgb, rgba, or other with minor alterations. 

Bare in mind that this is considered custom coding and is not a function of the drag and drop builder. If you are going to do this you should either do this on a coded page, or set up modules requiring this type of functionality in a drag and drop template inside of a Hubl module. 

You can mimic hubspots structure styles (span1-12, rows, containers, etc) if you know where to find example code, but if you do not use hubspots structuring classes you will be left to structure any custom coded modules yourself. Some people prefer this but it's a bit high level if you are new to web development. 

[LCSKMiller]

Hi Jsum,

We are looking to do something similar, but using the drag and drop template creator so all members of the team will be able to update the page. 

How should we create the custom module so they will be able to set the background image? We've tried a few ways mentioned in the community forum including: Export to Template, the main HubL documentation, and a few other threads on the forum.

The module is built as described under Export to Template, but the functionality doesn't work under the page editor - no option to select/edit the image and the original image does not render. Link is correct - we can use inline code for the background image, but then we would need to create multiple templates for the various backgrounds.

I know we're missing something super simple.

Any help is greatly appreciated! 

[Jsum]

@LCSKMiller, can you post your code here? if it isn't working I have to assume it is a syntax error on your part, I can take a look if you share it.

as for your need for multiple members of your team to update page background images, will they need to update the template, or just the pages themselves. In my experience, once the templates are created they are generally not messed with by the general user. You should be able to build your banner like I described in the template, and it not be any more or less of an issue for your editors at the page level. 

[LCSKMiller]

Hi Jsum, 

Just sent you a private message with the code. They will need to update the page themselves. 

[John]

This Link might help. (example code below)

Step 1: Copy that code for the image source module.

Step 2: Add a custom hubl module to your page in the template editor

Step 3: Paste the copied code and add the export_to_template_context code and the no_wrapper=true code to it. (Example Code Below)

{% image_src "your_image_src_module_name" label="Name to show up in editor", no_wrapper=true, export_to_template_context=true %}

Then in your styles, target the class that needs an exchangable bg image with the widget_data hubl

{{ widget_data.your_image_src_module_name.src }}