Help with module field values and selectors

Develop, Build & Integrate CMS Development
1

Hi,

Is there a way to set a max or min value for the selectors in modules? I want to set the min value of 150px, and a max value of 300px.

The second issue im having is a bit more complicated. I followed the tutorial on modules Getting started with Modules (hubspot.com), and I connected the image size to the selector on the front end using some hubl.

    *width*<!---->*: {{ module.profile\_pic.width ~ "px" }};*

height: {{ module.profile_pic.height ~ “px” }};

But for some reason both the height and width are linked on the front end. I can’t change one independently from the other. Any suggestions?

2

For question one. Yes, assuming your field is a number field, the min and max are there in Content Options when you create the module. Or is it some other kind of field?

For question two, please share more of your code so we can see what’s happening. My blind guess would be that you’re including {{ sizeAttrs }} which would pull in the default dimensions.

Also just to check - profile_pic is a field group and height and width, numerical inputs, correct?

profile2022a.jpg
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

3

profile_pic is an image field, im not using any numerical inputs, just trying to link the images height and width attributes from the code and be able to change it on the front end. Also I looked into the module in design tools but theres no way to set a max or min for the height and width as far as I can see. I think image fields don’t have that feature, but number fields do like you said

I’ll share the code here. Its largely built on the tutorial code, just modified a bit because I was trying to experiment with it to learn some of how this module and hubspot works:

html/hubl:

<div class="testimonial">
 <h1 class="testimonial__header">{{module.customer_name}}</h1>
 <img src="{{module.profile_pic.src}}" alt="{{module.profile_pic.alt}}" class="testimonial__picture">
 {{module.testimonial}}
</div>

//added this bit in here to directly control the image width and height from the front end
{% require_css %}
<style>
 .testimonial__picture {
 width: {{ module.profile_pic.width ~ "px" }};
 height: {{ module.profile_pic.height ~ "px" }};
 }
</style>

{% end_require_css %}

the css file

/* this CSS code is modified by me from the original that came from the tutorial, but mostly the same. Just added minor things like margin, border, padding and so on. */
.testimonial {
 text-align: center;
 width: 300px;
 max-width: 25%;
 margin: auto;
 border: 1px solid black;
 padding: 20px;
}
.testimonial__header {
 font-weight: bold;
 margin: 0;
}
.testimonial__picture {
 display: block;
 margin: auto;
 max-width: 100%;
 max-height: 250px;
 padding: 10px 0;
}

/* the fields json file */

[ {
 "id" : "c9b3f885-5678-0626-6a2c-b622dbc246fe",
 "name" : "customer_name",
 "display_width" : null,
 "label" : "Customer Name",
 "required" : false,
 "locked" : false,
 "validation_regex" : "",
 "allow_new_line" : false,
 "show_emoji_picker" : false,
 "type" : "text",
 "default" : "Sally"
}, {
 "id" : "7fdf53af-07e2-dd2d-640f-dc13282331a1",
 "name" : "profile_pic",
 "display_width" : null,
 "label" : "Profile Picture",
 "required" : false,
 "locked" : false,
 "responsive" : true,
 "resizable" : true,
 "show_loading" : false,
 "type" : "image",
 "default" : {
 "size_type" : "auto",
 "src" : "https://21802508.fs1.hubspotusercontent-na1.net/hubfs/21802508/profile-pic-sally.svg",
 "alt" : "Customer Profile Picture",
 "loading" : "lazy",
 "width" : 100,
 "height" : 100,
 "max_width" : 100,
 "max_height" : 100
 }
}, {
 "id" : "fe444827-784a-1be0-460b-a8896532a69a",
 "name" : "testimonial",
 "display_width" : null,
 "label" : "Testimonial",
 "required" : false,
 "locked" : false,
 "type" : "richtext",
 "default" : "<span>\"I would 100% recommend it to my colleagues and friends.\"</span>"
} ]
4

also im a noob at hubspot, haven’t really built anything so I don’t know what field groups are or the proper way to use them or even why you would even use them instead of just using regular field variables individually. Hopefully i’ll figure it all out soon enough.

5

No worries! If fields are related to each other it makes sense for them to be grouped together in the editor, it also makes for a much more tidy experience. They’re also great for things like Content cards when you set the group as a repeater.

profile2022a.jpg
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn