Guided landing page with dynamic background image | Community
Skip to main content
Franky_Ruyssch2
Franky_Ruyssch2
New Participant
October 24, 2018
Solved

Guided landing page with dynamic background image

  • October 24, 2018
  • 2 replies
  • 6407 views

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?

    Best answer by Grégoire_Miche2

    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

    2 replies

    SanfordWhiteman
    SanfordWhiteman
    New Participant
    October 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
    Franky_Ruyssch2Author
    New Participant
    October 25, 2018

    Hi,

    merely be segmented. Do you have a solution?

    Bye

    Franky Ruysschaert
    SanfordWhiteman
    SanfordWhiteman
    New Participant
    October 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
    Grégoire_Miche2Accepted solution
    New Participant
    October 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

    Terms & ConditionsAccessibility statement

    Loading footer...