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

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

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.

Mike_St_Louis · ‎10-10-2019

I'm trying my best to logically think this through, but I have a background image in a <div> that needs to be dynamic based on the segment option in the URL, but I don't see how this will work if the style="background-image:url('https://www.example.com/image.jpg')" needs to be image1.jpg, image2.jpg, etc. The <div> is a parent <div> and has other child <divs> within it with MKTO dynamic classes, and that parent div has an existing class.

SanfordWhiteman · ‎10-10-2019

Are you saying you want the literal value of the query param (whatever it is, and you won't know ahead of time) needs to become the background image URL?

Mike_St_Louis · ‎10-10-2019

No - we will have three dynamic versions of the landing page based on what industry we add to the segment in the URL, so for example if the URL is https://pages.company.com/page1?seg=cars -- that background image in the div needs to be of cars, and if a visitor was to come in via https://pages.company.com/page1?seg=boats -- that same div background would need to be of boats, etc.

SanfordWhiteman · ‎10-10-2019

So that's exactly the same as in my blog post.

You have three different CSS stylesheets.

A <div> that includes a <link> inside it it is segmented. It loads a different stylesheet for each segment.

Mike_St_Louis · ‎10-10-2019

Well that is what I was trying to avoid, the stylesheet is rather long and is just asking for something to be screwed up. Thanks, but not sure it's going to work as well/seamlessly as we need it to.

SanfordWhiteman · ‎10-10-2019

One tiny stylesheet with 3 segmented variants, Mike. Or just an inline <style>, works the same way. I think you're going to have an "A-ha" moment soon...

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.

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