Need help with design manager but can't find suitable forum!

Developer Support CMS Development
1

Apologies for posting here but I’m totally new to Hubspot and have a few questions regarding layout and modules. However, I can’t find a suitable forum, so can someone please point me in the right direction?

Initailly, I have a very simple question regrading Banner Module Slider. I insert a bacground image and no matter what setting I choose, even if i set it to ‘exact size’, it ignores my settings and stretches the image full width! Also, there doesnt seem to be an option to align the image top, bottom, left, right within the frame. Am I miising something?

2

Are you trying to “bannerize” an already uploaded photo? I’ve found it easier to make a file manager folder for banners and upload them the size you’d like them displayed and then use that version. Not exactly scaleable but it’s less messing around with the module itself.

3

Appreciate you help Connor, but I’m not sure what you mean by ‘bannerize an already uploaded photo’. I simply upoaded an image to ‘Files’ and selected it within the Banner Slider Module as the background image for the first slide, but no matter what setting I choose in ‘Edit’ it scales the image to the full width of the module!

4

@Macman

Welcome to the Community!

Could you do two things for me?

  1. Add the code from the module into a code block here (or take a screenshot)
  2. Add a link to a preview page using the module
5

Hi Dennis. I wonder where i find the module code?

Anyway, here’s the preview link .. Edit Page | HubSpot

The module background is a gradient, the overlaid image is a 700px wide png with transparency, the website is 1200px wide max, and yet when I set the image to ‘exact size’ or even ‘original size’ (see attached) it scales to full width. My plan was to have the image bottom-right away from the text but there seems to be no option to align the image. I’m beginning to think the image edit options are not required because whatever size image I place will be scaled to fit with no option to align.. am I correct?

35457iDBB8CEBB7031E0F9.jpg
35457iDBB8CEBB7031E0F9.jpg998×461 156 KB

6

Hey @Macman , as an FYI, any link that starts with app will not be accessible to anyone who not a member of the portal.

Here is the link that you want to be posting -- http://wmtmarine-6177388.hs-sites.com/marine-home?hs_preview=eUpdOLRs-14567028450

If you could also grab the code from the module and put it here, that would be great! If you look in the design manager, you should be able to search for that module. Let me know if you need help :grinning_face:

7

If that is the case, I presume one has to experiment with transparent space to position the graphic in the desired location?

8

Do’h! Sorry, I thought you meant a code number for the module, silly of me. Here is the code ..

HTML

<div class=“slider-banner-wrapper”>
{% for item in module.add_banner_item %}
<div class=“slider-banner” style=“background:url({{ item.background_image.src }}) {% if item.background_color_type == ‘simple’ %}, {{ item.background_color.color }}{% else %},{{ item.gradient_color_temp }}{% endif %};”>
<div class=“container”>
<div class=“slider-banner-content-wrapper”>
<h1>{{ item.title }}</h1>
{% if item.add_content %}<div class=“slider-banner-content”>{{ item.add_content }}</div>{% endif %}
{% if item.add_cta %} {% cta guid=“{{ item.add_cta }}” %} {% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
<style>
.slider-banner-wrapper button.slick-next.slick-arrow:after{background: {{ module.hover_color.color }};}
.slider-banner-content-wrapper .black-cta:hover{background:{{ module.hover_color.color }} !important;}
</style>

CSS

.slider-banner { padding: 285px 0 175px; background-size: contain !important; background-position: 135% !important; position: relative; background-repeat: no-repeat !important;}
.slider-banner-wrapper:after { position: absolute; content: ‘’; width: 56%; height: 61px; bottom: 0; border-right: 205px solid transparent; border-bottom: 62px solid #fff; }

.slider-banner-content-wrapper { max-width: 563px; }
.slider-banner-content-wrapper h1{color:#fff;margin-bottom:25px;}
.slider-banner-content *{color:#fff;}

.black-cta { color: #fff !important; background: #111d33; font-size: 14px; font-weight: 700; padding: 19px 43px; font-family: ‘Maven Pro’; display: inline-block;margin-top:30px; }
.black-cta:after { content: ‘\f061’; font-family: “Font Awesome 5 Free”; display: inline-block; color: #fff !important; margin-left: 8px; }

.slider-banner-wrapper button.slick-next.slick-arrow { top: auto; font-size: 20px !important; font-weight: 400; color: #fff !important; width: auto !important; position: absolute; bottom: 20px; right: 80px; display: flex !important; flex-wrap: wrap; align-items: center;height:auto;font-family:‘Maven pro’; }
.slider-banner-wrapper button.slick-next.slick-arrow:before{display:none;}
.slider-banner-wrapper button.slick-next.slick-arrow:after { content: ‘\f061’; font-family: ‘Font Awesome 5 Free’; margin-left: 17px; height: 50px; width: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

.slider-banner-wrapper .slick-dots { position: absolute; bottom: 30px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; z-index: 2; width: auto; left: 59%; display: flex !important; }
/* .slider-banner-wrapper .slick-dots:before { position: absolute; content: ‘’; width: 84%; height: 3px; background-color: rgba(255,255,255,0.3); left: 0; right: 0; margin: 0 auto; top: 5px; } */
.slick-dots li{height:auto;width:auto;margin:0 26px 0 0;position:relative;}
.slick-dots li:last-child{margin:0px;}
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 12px; height: 12px; padding: 0; cursor: pointer; color: transparent; border: 0; outline: 0; background: 0 0; background: rgba(255,255,255,0.25); border-radius: 100%; }
.slick-dots li.slick-active button{background-color:rgba(255,255,255,1)}
.slick-dots li button:before{display:none;}

.slick-dots li:before { content: ‘’; height: 3px; width: 36px; position: absolute; background: rgba(255,255,255,0.5); left: 8px; top: 4px; z-index: -1; }
.slick-dots li:last-child:before{display:none;}

@media(max-width:1440px){
.slider-banner{background-position:250% -50% !important;}
}
@media(max-width:1025px){
.slider-banner-wrapper:after { width: 56%; height: 40px; border-right: 150px solid transparent; border-bottom: 40px solid #fff; }
}
@media(max-width:768px){
.slider-banner{background-position:1000% 1000% !important;}
}

9

Hi again Dennis. Sorry but I can’t see any code .. here’s a screenshot

35459i91F5571D0543B8F2.jpg
35459i91F5571D0543B8F2.jpg999×482 127 KB

10

Hey @Macman

We can see from the hubl and inline styling below, that the module is not using the values you’re setting via the content manager.

<div class="slider-banner" style="background:url({{ item.background_image.src }}) {% if item.background_color_type == 'simple' %}, {{ item.background_color.color }}{% else %},{{ item.gradient_color_temp }}{% endif %};">

Below is the default image hubl, you’ll want to pay attention to the sizeAttrs variable and “if item.size_type” statement:

{% for item in module.background_image %}
	{% if item.src %}
		{% set sizeAttrs = 'width="{{ item.width }}" height="{{ item.height }}"' %}
		{% if item.size_type == 'auto' %}
			{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
		{% elif item.size_type == 'auto_custom_max' %}
			{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.max_width }}px; max-height: {{ item.max_height }}px"' %}
		{% endif %}
		 {% set loadingAttr = item.loading != 'disabled' ? 'loading="{{ item.loading }}"' : '' %}
		<img src="{{ item.src }}" alt="{{ item.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
	{% endif %}
{% endfor %}

EDIT:

My personal opinion: I would not rely on the content managers default image controls to manipulate a background image’s css.

11

Thanks Kevin, very helpful.