topic Re: Adding images in custom module in CMS Development

Adding images in custom module

YunYing — Tue, 29 Jun 2021 03:24:10 GMT

This is how the current page look likeI would wish to add in more photos. An example of how I want it to look like is this, pictures at the side (sth like an image gallery) then when clicked, it appears as a large picture.

There is an existing custom module and I am trying to add in pictures to it but I'm not sure what changes need to be made to the code. I want it to look like the second picture, with an image gallery at the side and clicking on each image will open it up.

This is the current html code: https://app.hubspot.com/design-manager/4193836/modules/5872080668

Hope there is a solution to this, thank you!

Re: Adding images in custom module

Sjardo — Tue, 29 Jun 2021 07:29:51 GMT

Hi @YunYing ,

Sadly, I can not access the code, as I do not have acces to your portal. (thats a good thing tho, security!)

It looks like you want to make a slider with vertical thumbnails. If you click on a thumbnail, a new "slide" is inserted. There are plenty of ways to build one!

A quick Google search gives back a complete slider with HTML, JS and CSS to copy, with the only difference that the thumbnails are on the right:
https://codepen.io/hashif/pen/xxbPLKx

Try to search for a codesandbox or jsfiddle example, that will most of the time give a complete example including code.

If you have a hard time building the examples into a working module, give me a message!

Re: Adding images in custom module

YunYing — Wed, 30 Jun 2021 02:18:58 GMT

Hello, I am facing some difficulties with the code.

This is the code I have right now, I simply changed the links of the images.
https://app.hubspot.com/design-manager/4193836/modules/49684546062

Is it supposed to look like this? There's a whole long list of 9 pictures shown on my side (3 different products shown 3 times each).

Also, is it possible to add in description for each picture at the side?

Description meaning something like this:

Re: Adding images in custom module

dennisedson — Wed, 30 Jun 2021 02:23:13 GMT

@YunYing , just a quick heads up, no one can see the app link you referenced above. only people who are users of that portal can see it. You will need to add your code block here 😀

Re: Adding images in custom module

YunYing — Wed, 30 Jun 2021 02:39:59 GMT

Code block:

module.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title>Vehicle Details</title>


</head>
<body class="wrapper">

</body>
</html>

module.css

body {

background-color: #fff;

font-family: 'Roboto', Arial, Helvetica, sans-serif;

font-size: 14px;

line-height: 1.4;

font-weight: 400;

color: #000000;

padding-right: 0!important;

}

.container {

width: 100%;

max-width: 1230px;

margin: 0 auto;

}

img {

max-width: 100%;

}

ul, li{

padding: 0;

margin: 0;

list-style-type: none;

}

p {

font-size: 14px;

line-height: 16px;

margin: 0;

}

/*USE CSS for Slider*/

.vehicle-detail-banner .car-slider-desc {

max-width: 180px;

margin: 0 auto;

}

.banner-slider .slider.slider-for {

max-width: 84%;

padding-right: 35px;

}

.banner-slider .slider.slider-nav {

max-width: 16%;

}

.banner-slider .slider.slider-for,

.banner-slider .slider.slider-nav {

width: 100%;

float: left;

}

.banner-slider .slider.slider-nav {

height: 610px;

overflow: hidden;

}

.slider-banner-image {

height: 610px;

}

.banner-slider .slider.slider-nav {

padding: 20px 0 0;

}

.slider-nav .slick-slide.thumbnail-image .thumbImg{

max-width: 178px;

height: 110px;

margin: 0 auto;

border: 1px solid #EBEBEB;

}

.slider-banner-image img,

.slider-nav .slick-slide.thumbnail-image .thumbImg img {

height: 100%;

width:100%;

object-fit: cover;

}

.slick-vertical .slick-slide:active,

.slick-vertical .slick-slide:focus,

.slick-arrow:hover,

.slick-arrow:focus {

border: 0;

outline: 0;

}

.slider-nav .slick-slide.slick-current.thumbnail-image .thumbImg {

border: 2px solid #196DB6;

}

.slider-nav .slick-slide.slick-current span {

color: #196DB6;

}

.slider-nav .slick-slide {

text-align: center;

}

.slider-nav .slick-slide span {

font-size: 14px;

display: block;

padding: 5px 0 15px;

}

.slick-arrow {

width: 100%;

background-color: transparent;

border: 0;

background-position: center;

background-repeat: no-repeat;

font-size: 0;

height: 18px;

position: absolute;

left: 0;

right: 0;

z-index: 99;

}

.slick-prev {

top: 0;

}

.slick-next {

bottom: 0;

background-color: #fff;

}

.slick-prev.slick-arrow {

background-image: url(../images/black-up-arrow.png);

}

.slick-next.slick-arrow {

background-image: url(../images/black-down-arrow.png);

}

/*End USE CSS for Slider*/

@mediascreen and (max-width : 991px) {

.banner-slider .slider.slider-for,

.banner-slider .slider.slider-nav {

max-width: 100%;

float: none;

}

.banner-slider .slider.slider-for {

padding-right: 0;

}

.banner-slider .slider.slider-nav {

height: auto;

}

.slider-banner-image {

height: 500px;

}

.slider.slider-nav.thumb-image {

padding: 10px 30px 0;

}

.slider-nav .slick-slide span {

padding: 5px 0;

}

.slick-arrow {

padding: 0;

width: 30px;

height: 30px;

top: 50%;

bottom: 0;

-webkit-transform: translateY(-50%) rotate(-90deg);

-moz-transform: translateY(-50%) rotate(-90deg);

-ms-transform: translateY(-50%) rotate(-90deg);

transform: translateY(-50%) rotate(-90deg);

}

.slick-prev {

left: 0;

right: unset;

}

.slick-next {

left: unset;

right: 0;

background-color: transparent;

}

.vehicle-detail-banner .car-slider-desc {

max-width: 340px;

}

.bid-tag {

padding: 10px 0 15px;

}

.slider.slider-nav.thumb-image {

white-space: nowrap;

}

.thumbnail-image.slick-slide {

padding: 0px 5px;

min-width: 75px;

display: inline-block;

float: none;

}

@mediascreen and (max-width : 767px) {

.slider-banner-image {

height: 400px;

}

.slider.slider-nav.thumb-image {

padding: 0px 20px 0;

margin: 10px 0px 0;

}

.slider-nav .slick-slide.thumbnail-image .thumbImg {

max-width: 140px;

height: 80px;

}

.slick-prev.slick-arrow {

background-position: center 10px;

}

.slick-next.slick-arrow {

background-position: center 10px, center;

}

.slider-nav .slick-slide span {

font-size: 12px;

white-space: normal;

}

@mediascreen and (max-width: 580px) {

.slider-banner-image {

height:340px;

}

@mediascreen and (max-width : 480px) {

.slider-banner-image {

height:280px;

}

module.js

$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
vertical:true,
asNavFor: '.slider-for',
dots: false,
focusOnSelect: true,
verticalSwiping:true,
responsive: [
{
breakpoint: 992,
settings: {
vertical: false,
}
},
{
breakpoint: 768,
settings: {
vertical: false,
}
},
{
breakpoint: 580,
settings: {
vertical: false,
slidesToShow: 3,
}
},
{
breakpoint: 380,
settings: {
vertical: false,
slidesToShow: 2,
}
}
]
});

Re: Adding images in custom module

Anton — Wed, 30 Jun 2021 13:00:24 GMT

hi @YunYing,

who developed this module?

First thing:

This party don't belong into a module.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  <title>Vehicle Details</title>  </head>

Looking at your code I would recommend to use a repeater-function/for-loop in the module. It makes editing and handling the module much easier.

The whole code could look like this. It's a bit more advanced in development but it will help you/your page-editors/client to maintain this module.

... <div class="SLIDER-OUTER-WRAPPER-CLASS"> {% for item in module.slider %} <div class="SINGLE-SLIDE-CLASS"> {# start left column #} <div class="MAIN-IMAGE-CLASS"> <a href="item.main_slide.link.href" target="_blank">{# comment: This will link the image #} <img src="item.main_slide.image.src" alt="item.main_slide.image.alt" class="SINGLE-SLIDE-MAIN-IMAGE-CLASS"> </a> </div> {# end left column #} {# start right column #} <div class="THUMBNAIL-WRAPPER-CLASS"> {% for thumbnail in item.thumbnails %} <div class="SINGLE-THUMBNAIL-WRAPPER-CLASS"> <img src="{{thumbnail.image.src}}" alt="{{thumbnail.image.alt}}" class="SINGLE-THUMBNAIL-CLASS"> </div> {% endfor %} </div> {# end right column #} </div> {% endfor %} </div> ...

You can work with the module.css part, but this can lead to performance drops. I would recommend to place the whole CSS part either in your main CSS file - or - in a seperate CSS file and link it in the right sidebar.

Same for the module.js part but it's got a bigger impact on the page speed/performance. I would recommend to put the module.js part either in your main JS file.

Hope this helps,

best

Anton