SOLVED

Guided landing page with dynamic background image

Go to solution
Franky_Ruyssch2
Level 4

Guided landing page with dynamic background image

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
1 ACCEPTED SOLUTION

Accepted Solutions
Grégoire_Miche2
Level 10

Re: Guided landing page with dynamic background image

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

15 REPLIES 15
Grégoire_Miche2
Level 10

Re: Guided landing page with dynamic background image

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
Level 10 - Community Moderator

Re: Guided landing page with dynamic background image

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
Level 4

Re: Guided landing page with dynamic background image

Hi,

merely be segmented. Do you have a solution?

Bye

Franky Ruysschaert
SanfordWhiteman
Level 10 - Community Moderator

Re: Guided landing page with dynamic background image

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
Level 10 - Community Moderator

Re: Guided landing page with dynamic background image

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
Level 2

Re: Guided landing page with dynamic background image

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
Level 10 - Community Moderator

Re: Guided landing page with dynamic background image

It's a named mktoText element in the template.

Mike_St_Louis
Level 2

Re: Guided landing page with dynamic background image

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
Level 10 - Community Moderator

Re: Guided landing page with dynamic background image

? 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.