Hola! ¡Tenemos nuestra Comunidad en Español!

Custom Background Image Module - Update!

SOLVE
Highlighted
HubSpot Employee

 

This post is for the New Editors, if you are using the Classic Editor, see my Original post

 

A Custom Background Image Module

How to create the module and use it in a template

 

Some of you wonderful HubSpotters are already on the new Design Manager, and if you’re not, you will be some day! There’s a whole lot of really cool stuff that the team put into it, it looks great, but it can be a bit intimidating to try to do familiar things with new tools.

 

I have had the new design manager for a bit now and haven’t had much of a chance to play around with it, that being said, here’s my first pass at building a Custom Background Image module with the new editors.

 

There is probably a better way to do this, but this is what has for me. Major props to John Lamb ( @Jlamb1) with whom I shared this code with way back when. He recently showed me his newest version recently and he had really improved the original. Specifically by using fields and tokens for some of his other CSS declarations that weren’t just for the image URL. This has the benefit of not having to go edit the custom module to change things like the height of the hero image. I really only added the height for this module to give an idea of what you can do, but any CSS declaration could be formatted to be edited on the page-level, which is a huge time saver, and solves a lot of organizational problems.

 

Let's get started

 

First, we need to create the module, in the new file manager, this means following the guide for creating a Module (notated in more detail here) here’s an excerpt from that article:

 

Create a new file

To create a module, click the New button in the Finder panel on the left of the screen, choose New File.

Screen%20Shot%202017-10-10%20at%204.18.04%20PM.png_t=1522251996926&width=432&height=434&name=Screen%20Shot%202017-10-10%20at%204.18.04%20PM

 

Choose your file type

In the resulting dialog box, choose Module.

 

Screen%20Shot%202017-10-10%20at%204.20.14%20PM.png_t=1522251996926&width=611&height=468&name=Screen%20Shot%202017-10-10%20at%204.20.14%20PM

Choose your module type

For this, I am going to use a Local module, because I want to be able to switch the image on the page at will. If you want this to be the same image every time the module is used, or want to be able to change it for all pages from one place, you’ll want to go with a global module.

Screen Shot 2017-11-07 at 3.08.49 PM.png

 

Alright, now you have a screen that looks like this:

module.PNG

Yes, it is different, but, look at that! A section for HTML and HubL, CSS and JS? This is awesome!! For our purposes, since we are going to be styling a class that is not the module itself, and we are not using any JS, we’re going to do everything in the first section.

 

Adding Fields

We’re going to start off by adding in two fields. You may find you want more in the future, but for this we’re just going for two ‘text’ fields. Name one of them ‘Image URL’ and the other ‘Image Height” the internal values will automatically be set as image_url and image_height. Add the image URL you want displayed by default to the Default Text, and set the Image Height default text to 500px.


adding fields.gif

 

Adding our style tag in the HTML and HubL section

Now we’re going to repurpose our code from before, with the improvements from John Lamb, and paste the following in the HTML + HubL section:

 

 

<style>

  .custom-background-image {

      background: url('{{ module.image_url }}'); /*pulls image URL from modules selected image*/

      width: 100%;  /*makes image full width */

      height: {{ module.image_height }}; /*this sets the image height and is adjustable to suit your purposes*/

      background-position: center center; /*centers the image vertically and horizontally */

      background-repeat: no-repeat; /*keeps background image from repeating in content area */

      background-size: cover; /*scales the image without skewing the ration*/

      background-attachment: fixed; /*fixes background image for parallax scrolling,*/

  }

</style>

Basically, everything stays the same, but we put the token for image heigh into the style tag like we did with the background property. You can add any number of text fields to be able to modify these variables from the module level. Again, John, I don’t know how I didn’t bother to do this before so thanks for the tip!

 

Formatting the Template

Now that we have our module, we can go set up our template with a .custom-background-image class. In the new design manager, this is done basically the same way as the classic, wrap your content (represented in the image by the Rich Text module) in a page-center class that you will target with css that will center your content that overlays on the image, and then wrap that in a new group. But, in the new editor, you can just right click the module you want to wrap to create a group- AWESOME! Giving it the custom-background-image class is as easy as filling in that field on the right.  Lastly we drag our new module (in the image this is named “Example”) into the template and hit publish.


templatestuff.gif


We're done! Create a page with this template, edit the module in the sidebar and you can adjust the height and image displayed, or go back and customize the module further. This new editor is just the bees knees and this project showed me just how much work when into it, so don’t be scared, play around with it and I bet you’ll love it too.

 

I hope this helps everyone!

 

 

1 Accepted solution

Accepted Solutions
HubSpot Moderator

Great writeup @mrcruz! We had this convo over Slack, but I'd also like to continue that here/point out another way to set this up for anybody interested.

 

I like to create background image sections using only a custom module so that it's set up for people that may not be as familiar with code and that the can use moving forward quite easily. The reason being two-fold: one - the background image section can be edited in only one place (the editor) if you do it this way, taking away any confusion for somebody that may not be as familiar with code. and two - so that your code can be modular. With the new CMv2, we can add CSS right in our CSS declarations section, and therefore those styles will carry onto any page it's placed on, regardless of the stylesheet that's attached.

 

Here's how I'd write it up. In the HTML we'd have:

 

<div class="background-image" style="background-image: url('{{ module.background_image.src }}')">
    <div class="page-center">
         <div class="header-text-section">
              <h1>{{ module.header_text }}</h1>
              <p>{{ module.subheader }}</p>
         </div>
     </div>
</div>

 

and in our CSS, we'd have something like:

 

.background-image {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 400px;
}

.header-text-section {
background: rgba(0,0,0,.6);
width: 50%;
margin: 0 auto;
position: relative;
top: 100px;
}

.header-text-section h1 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 60px;
margin-top: 0;
}

.header-text-section p {
color: #fff;
text-align: center;
font-size: 30px;
}

@media(max-width: 767px) {
.background-image{
height: 300px;
}
.header-text-section h1 {
font-size: 40px;
}
.header-text-section p {
font-size: 20px;
}
}

 

I like this way because the person who's utilizing the module on the page level won't really have to do anything besides plug in any values they'd want!

 

Something else that I like to do is put in another single line text field with "no_wrapper=True" setup inline next to the background-image declaration. The declaration would simply be

 

 

background-position: "{% inline_text field="background_position" value="{{ module.background_postition }}" no_wrapper="True" %}";

This way, we can pass in any valid CSS here such as 10% 90%, or center top etc. I find the most common complaint is that background images sometimes cut off parts of the image (as they will if the background-size is set to cover), so at the very least, we can solve on the page level for this with this new field. Especially since not all background images are the same and we wouldn't have to rely on that background-position declaration in the CSS section (we can actually just get rid of that).

 

Here's what it looks like in the CMv2 editor:

 

Screenshot 2018-04-03 22.01.24.png

 

I do like your way of doing this as well, and I think both examples are equally valid, which is a really great thing about HubSpot and how we can edit code in the Design Manager!

19 Replies
HubSpot Moderator

Great writeup @mrcruz! We had this convo over Slack, but I'd also like to continue that here/point out another way to set this up for anybody interested.

 

I like to create background image sections using only a custom module so that it's set up for people that may not be as familiar with code and that the can use moving forward quite easily. The reason being two-fold: one - the background image section can be edited in only one place (the editor) if you do it this way, taking away any confusion for somebody that may not be as familiar with code. and two - so that your code can be modular. With the new CMv2, we can add CSS right in our CSS declarations section, and therefore those styles will carry onto any page it's placed on, regardless of the stylesheet that's attached.

 

Here's how I'd write it up. In the HTML we'd have:

 

<div class="background-image" style="background-image: url('{{ module.background_image.src }}')">
    <div class="page-center">
         <div class="header-text-section">
              <h1>{{ module.header_text }}</h1>
              <p>{{ module.subheader }}</p>
         </div>
     </div>
</div>

 

and in our CSS, we'd have something like:

 

.background-image {
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
height: 400px;
}

.header-text-section {
background: rgba(0,0,0,.6);
width: 50%;
margin: 0 auto;
position: relative;
top: 100px;
}

.header-text-section h1 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 60px;
margin-top: 0;
}

.header-text-section p {
color: #fff;
text-align: center;
font-size: 30px;
}

@media(max-width: 767px) {
.background-image{
height: 300px;
}
.header-text-section h1 {
font-size: 40px;
}
.header-text-section p {
font-size: 20px;
}
}

 

I like this way because the person who's utilizing the module on the page level won't really have to do anything besides plug in any values they'd want!

 

Something else that I like to do is put in another single line text field with "no_wrapper=True" setup inline next to the background-image declaration. The declaration would simply be

 

 

background-position: "{% inline_text field="background_position" value="{{ module.background_postition }}" no_wrapper="True" %}";

This way, we can pass in any valid CSS here such as 10% 90%, or center top etc. I find the most common complaint is that background images sometimes cut off parts of the image (as they will if the background-size is set to cover), so at the very least, we can solve on the page level for this with this new field. Especially since not all background images are the same and we wouldn't have to rely on that background-position declaration in the CSS section (we can actually just get rid of that).

 

Here's what it looks like in the CMv2 editor:

 

Screenshot 2018-04-03 22.01.24.png

 

I do like your way of doing this as well, and I think both examples are equally valid, which is a really great thing about HubSpot and how we can edit code in the Design Manager!

Occasional Contributor

Can you please send a tutorial on how to do this for email templates?

 

I have been working on this for 2 days now and the image is not showing.

 

Thanks

Reply
0 Upvotes
HubSpot Employee

hey @paulamc thanks for reaching out. This would work in some email clients but not others. With email, it all comes down to what CSS they support. This page from Campaign Monitor will show you the breakdown per email client.  You can try using background-image instead of background which does offer slightly wider support, but still not supported by many major email clients (Outlook 2016 for instance)

Occasional Contributor

Thank you!

Reply
0 Upvotes
Regular Contributor

I found that a combination of the two was helpful.. the 50% 50% gave me the desired results... 

 

One thing that I thought would work, but didn't, was to put the height at 100% as well as the width... I want to be able to guarantee the full image is displayed regardless of the resolution of the screen (for a very specific request from a client)

Reply
0 Upvotes
New Contributor

Hi @cbarley ! 

 

I've used your method in a template for a new landing page (at this URL: http://info.coloradospacesolutions.com/free-quote-colorado-space-solutions-0), but as you can see, the image is not showing properly. It's just all white.

 

Any ideas?

Reply
0 Upvotes
HubSpot Moderator

Hi @co_space , you've named your background image field "image_field". You must reference the field in your code as such for it to render. 

 

Screenshot 2019-04-03 17.44.28.png

Reply
0 Upvotes
New Contributor

Ah.. okay. I've made them all match now: Screen Shot 2019-04-03 at 3.54.56 PM.png

 

But it's still blank Smiley Sad

Reply
0 Upvotes
New Contributor

Never mind! I figured it out - thank you!

Reply
0 Upvotes
HubSpot Moderator

Hi @co_space , you still need to be referencing the module. So for example, it should be {{ module.custom_background_image }}. If you still don't get it to work after that, feel free to DM me!

Reply
0 Upvotes
Community Manager

Thanks for sharing!

 

CC: @danaketh@Josh108@matttunney@Alexandra@nthethy@ccooney@mrspabs@priscillam@Hubmate@jausura

Occasional Contributor

Thanks Smiley Happy

Occasional Contributor

Would this work for email? I have tried with no luck.

 

The link to the original thread is broken, so I am a bit lost when you talk about:

Basically, everything stays the same, but we put the token for image heigh into the style tag like we did with the background property. You can add any number of text fields to be able to modify these variables from the module level. Again, John, I don’t know how I didn’t bother to do this before so thanks for the tip!

Reply
0 Upvotes
New Contributor

HI @mrcruz

Thank you for the solution. But i have one problem when i am trying to add custom-background-class to row  it display same image for multiple rows background. Supppose i want different background imges for different row. How is it aachived. Can you help me?

Reply
0 Upvotes
Occasional Contributor

Awesome tutorial. I managed to create the custom module same as the example and i drag n drop it on my Article Page. Everything works fine.

 

How can i render this custom module on my Blog Listing Page inside the for loop i create to get the articles??

Reply
0 Upvotes
New Contributor

Hi! I have little to no knowledge of html or css, but I managed to create the background module. The only trouble I'm having is that the text I'm putting on my landing page is longer than the image. How would I get the image to repeat itself for the length of the page? It's just texture, so visually it wouldn't be a problem to have it doubled, but I don't know how to do that with css/html. Thanks!

Reply
0 Upvotes
Community Manager

Hey @carson12,

 

Can you create a new post in the design forum and include as many links, screenshots and details as you can regarding where you are getting stuck? 


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
New Contributor

It looks great, but my text is getting lost that is over the image. How can I add a white box to hold a rich text module in?

Reply
0 Upvotes
HubSpot Employee

I would try adding a background to the rich text module, you can do that with the inline-style option in the template editor. Just open up your template, click the rich-text module and apply background-color: #fff to the inline styling section. You may need to play around with some sizing/padding to make it look just the way you like it.
Side note: white text with a black border can be read over any background color/image.