Changing background images on the fly inside Mautic’s landing page builder

When it comes to landing pages and making sure they don’t look the same it should be possible to change the background of your current theme. As the current version of Mautic doesn’t support this yet I’ve build a workaround by using a ‘slot’ that holds the URL of the image.

Looking into the default themes that come with Mautic (Mauve, Coffee and Nature). I’ve found that Mauve supports a slider type. And also supports having a File Browser button inside a Mautic theme. With this button it makes adding an URL to our slot a lot easier because you can drag&drop images into the File Browser and set them as a background. Pretty neat.


Files that need editing

If you are familiar with building a Mautic theme these changes shouldn’t take more than a couple of minutes to implement. When done you’ll have a Mautic theme that supports background changing. Let’s get started, shall we?

Files you’ll need to edit:

  • config.json)
  • html/base.html.twig)
  • html/page.html.twig)

Adding a custom slot into our config file.

We create an extra slot named background by adding the following code marked in bold into our config.json file. 
Notice that we set it as type text, as we need it to only return text without any added html.

{
"name": "Mauve",
"features": [
"page",
"email",
"form"
],
"slots": {
"page": {
"background": {
"type": "text",
"placeholder": "relative or direct url to image file"
},

}
}
}

Now that we’ve created our custom slot that will hold our image URL let’s have it show up inside the Landing Page builder.

Selecting a background image with the File Browser

Drop this snippet inside your page.html.twig file:

{% if public is null %}
<div class="container">
Select a background (this will not show up on public preview):
<div class="col-md-8">{{ slot('background') }}</div>
    <div class="col-md-4"><button type="button" onclick="SlideshowManager.BrowseServer('slot-background');" class="btn button-default file-manager-toggle">
<i class="fa fa-folder-open-o"></i> File Manager
</button></div>
    </div>
{% endif %}

First we check if we are inside the builder. If so, we get our slot we just created in our config file through {{ slot(‘background’) }}.

Next to it we place a button with an onclick action that calls SlideshowManager.BrowseServer(‘slot-background’);. This opens up the File Browser and returns the URL of the file when someone selects an image or file. We feed slot-background as a parameter, as this is the ID of our slot, to make sure the URL gets filled in in our slot.

Our background slot with the File Manager button next to it.

This is where the magic happens

Now all that’s left to do is making sure we add some CSS to our template on the public to load our image as a background.

Our slot background now holds the URL of our image.

We can set it as a background by adding this snippet to our base.html.twig.

{% if slotHasContent(['background']) %}
<style>
body {
background: url('{{ slot('background') }}');
}
</style>
{% endif %}

And voila, when you set a background image inside the Landing Page builder you’ll see a background popping up when visiting your public page’s URL.


Thanks for reading my post, and if you are interested into Mautic Theme development, or want to get Mautic Themes delivered into your Inbox make sure you visit http://ythem.es and make sure you sign-up.

You can follow me yThemes or contact me Yannick V. Meerbeeck

Like what you read? Give yThemes a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.