Re: Guided landing page with dynamic background image

Franky_Ruyssch2 · ‎10-24-2018

In my landing page template I have a div #header2 which has a background image defined with a variable :

#header2{ background-image: url(${header2BackgroundImage});background-position: center;background-repeat: no-repeat;background-size: cover;padding:25px;margin:0;}

The problem is that this background image should be different based on a segment ( coreActivity ) . But I do not see this value in the dynamic content section.

How should I handle this background image problem?

Is there a way to get the URL in the dynamic section?

Franky Ruysschaert

Grégoire_Miche2 · ‎10-24-2018

It will be difficult because variables cannot be made dynamic.

See and

You will have to use a workaround, such as adding an image element elswhere in your template, make it dynamic, and have some JS that take this image and set it as the background image for your header and hide the element.

-Greg

View solution in original post

Grégoire_Miche2 · ‎10-24-2018

It will be difficult because variables cannot be made dynamic.

See and

You will have to use a workaround, such as adding an image element elswhere in your template, make it dynamic, and have some JS that take this image and set it as the background image for your header and hide the element.

-Greg

SanfordWhiteman · ‎10-24-2018

Franky, to be clear, do you need the images to be browseable, i.e. users get to choose from the Design Studio thumbnails, or do you need them to merely be segmented?

It's not necessary to use JS if you only need a segmented background-image.

Franky_Ruyssch2 · ‎10-25-2018

Hi,

merely be segmented. Do you have a solution?

Bye

Franky Ruysschaert

SanfordWhiteman · ‎10-25-2018

Do you have a solution?

Of course.

Velocity has access to all your Segmentations and Segments. So, for example with a Region Segmentation (when you choose the Segmentation in Velocity, it will start with "Segmentation") you could do:

#set( $regionalBackgrounds = {
  "NE" : "apple.jpg",
  "SE" : "orange.jpg",
  "NW" : "coffee.jpg",
  "SW" : "chili.jpg",
  "*"  : "fallback.jpg"
})
$display.alt($regionalBackgrounds[$lead.Segmentation_Region_1010],$regionalBackgrounds["*"])

This will output the image for their region, or if they have a region that isn't listed, it'll output the fallback image.

SanfordWhiteman · ‎10-25-2018

Ah wait -- hold on, I thought you said "email" before. My bad. Velocity won't work there.

But you still don't need to use JS to move variables around. Instead, you can segment a CSS <style> tag!

Mike_St_Louis · ‎10-06-2019

How do get the Guided Template code to pick up the desired dynamic item as an element? I get the tokens, but how would the code of the template look to pick this up as you are replacing the entire <style> tag?

SanfordWhiteman · ‎10-06-2019

It's a named mktoText element in the template.

Mike_St_Louis · ‎10-06-2019

How do you name an entier <style> tag in the <head>? I know how to when it's a div id, etc, but not something that is an entire site element.

SanfordWhiteman · ‎10-06-2019

? It's a regular element like any other editable <div> (and not in the head, in the body) and the token with the <link> inside it.