CMS Development

jonlcrow
Member

Problem with HubL image module

SOLVE

I am trying to use an image module as the background of a div, so that I can change the image in the wysiwyg editor.

 

I have the code set up as 

<section style="width:100%; height:960px;background:url({% image 'Hero_image' label='Hero Image', alt='Hero Image', src="../hero-1600x960.png" %}'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">


 What I get is the image followed by 

'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">

Is the second curly bracket causing a problem? Do I need to do something with **bleep** characters? Is there another way to do this? Any other thoughts?

 

Thanks,

Jonathan 

0 Upvotes
1 Accepted solution
benvanlooy
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Problem with HubL image module

SOLVE

Image renders an image tag, which you don't need..

 

You only want to render an image url, using:  image_src

 

 

so what you need is this:

 

<section style="width:100%; height:960px;background:url('{% image_src "image_src" src="-URL-to-image-placeholder.jpg", no_wrapper=True %}'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">

 

More info?
https://designers.hubspot.com/docs/hubl/hubl-supported-modules#image-src

View solution in original post

0 Upvotes
4 Replies 4
benvanlooy
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Problem with HubL image module

SOLVE

Image renders an image tag, which you don't need..

 

You only want to render an image url, using:  image_src

 

 

so what you need is this:

 

<section style="width:100%; height:960px;background:url('{% image_src "image_src" src="-URL-to-image-placeholder.jpg", no_wrapper=True %}'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">

 

More info?
https://designers.hubspot.com/docs/hubl/hubl-supported-modules#image-src

0 Upvotes
jonlcrow
Member

Problem with HubL image module

SOLVE

Thanks. Worked perfectly!

0 Upvotes
jonlcrow
Member

Problem with HubL image module

SOLVE

Actually - let me take that back. It worked to get the image styled correctly. But when I edit the page I can't use the widget to change the image.

 

Whatever image I change it to it still shows the original image.

0 Upvotes
benvanlooy
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Problem with HubL image module

SOLVE

And you're sure that:

 

- you saved and published before leaving the page?

- that it's  not a caching issue? (check the page in an incognito tab)