SOLVED

How do I make background images editable on landing page?

Go to solution
Guitarrista82
Level 4

How do I make background images editable on landing page?

Hi Community,

 

I was attempting to enable editability on two background images on a custom-built landing page template.

 

I changed the code for these images from the following:

 

 

<meta class="mktoString" id="sec1_bg_image" mktoName="Section-1 BG Image" default="http://promos.ovstravel.com/rs/512-JJP-615/images/AdobeStock_213835443_Preview.jpeg">

<meta class="mktoString" id="sec3_bg_image" mktoName="Section-3 BG Image" default="http://promos.ovstravel.com/rs/512-JJP-615/images/AdobeStock_154151287_Preview.jpeg">

 

 

To the below: (changed meta class to mktoImg and added mtkoModuleScope="true")

 

 

<meta class="mktoImg" id="sec1_bg_image" mktoName="Section-1 BG Image" default="http://promos.ovstravel.com/rs/512-JJP-615/images/AdobeStock_213835443_Preview.jpeg" mktoModuleScope="true">

<meta class="mktoImg" id="sec3_bg_image" mktoName="Section-3 BG Image" default="http://promos.ovstravel.com/rs/512-JJP-615/images/AdobeStock_154151287_Preview.jpeg" mktoModuleScope="true">

 

 

Below is how the images appear without adding the ModuleScope and changing the meta classes to mktoImg:

 

Images without adding editable code.png

 

 

This is how the landing page appears when adding the modulescope and changing the meta classes.

 

The Section-3-BG block appears but in the wrong place and the Section-1-BG block doesn't show at all.

 

Guitarrista82_3-1629481269845.png

 

When I add images to the landing page and preview the page, both images appear at the top instead of in the places they would ordinarily appear.

 

Guitarrista82_0-1629479771590.png

 

Any idea what I'm doing wrong?

 

There is some external styling for this page, but I'm not sure if that would affect the appearance since I haven't changed anything but updating the code to be able to edit the images.

 

Link to LP:

 

http://promos.ovstravel.com/SMS-Multi-Branded-General-Acquisition_SMS-Test-Landing-Page-2.html

 

Thank you,

 

LK

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: How do I make background images editable on landing page?


mktoImg is also not supported by Landing Pages, if we will use mktoImg then it will work as a simple image not background image.

That's simply not true. It only requires out-of-the-box thinking.

Using a mktoImg LP element as a CSS background-image

View solution in original post

5 REPLIES 5
Jasbir_Kaur
Level 3

Re: How do I make background images editable on landing page?

Hi @Guitarrista82 

 

In the Landing Pages, mtkoModuleScope do not work, so please avoid using mtkoModuleScope in the LPs, it works in the emails only.

 

Use code like the below - 

<meta class="mktoString" id="Header_BG_Image" mktoName="Banner-1 Desktop Background Image" default="http://via.placeholder.com/1900x651">

 

And, after that the Image URL will show in the Variables not in the Elements.

 

Jasbir_Kaur_1-1629695595941.png

 

Let me know in case of any concerns,

 

Thanks & Regards,

Jasbir

SanfordWhiteman
Level 10 - Community Moderator

Re: How do I make background images editable on landing page?

@Jasbir_Kaur as you can see in the original post, the goal is to use browseable mktoImg elements. Not mktoString.

Jasbir_Kaur
Level 3

Re: How do I make background images editable on landing page?

Hi,

 

MktoImg is also not supported by Landing Pages, if we will use mktoImg then it will work as a simple image not background image.

 

Let me know in case of any concerns.

 

Thanks!

Jasbir

 

SanfordWhiteman
Level 10 - Community Moderator

Re: How do I make background images editable on landing page?


mktoImg is also not supported by Landing Pages, if we will use mktoImg then it will work as a simple image not background image.

That's simply not true. It only requires out-of-the-box thinking.

Using a mktoImg LP element as a CSS background-image

View solution in original post

Guitarrista82
Level 4

Re: How do I make background images editable on landing page?

Thank you both!

 

I actually discovered how to swap out the images.

 

This is my first time working with Marketo landing pages in a while so I didn't realize I could just swap out the URLs in the Variables section. 

 

After copying the URLs from the Design Studio, I was able to paste them in and the images were switched out.

 

Guitarrista82_0-1629821191785.png

 

Thank you for your help!

 

LK