Adding images in custom module

YunYing · June 29, 2021, 3:24am

This is how the current page look like

I 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: Design Manager | HubSpot

Hope there is a solution to this, thank you!

Sjardo · June 29, 2021, 7:29am

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!

YunYing · June 30, 2021, 2:06am

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.

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:

dennisedson · June 30, 2021, 2:23am

@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

YunYing · June 30, 2021, 2:39am

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,
}
}
]
});

Anton · June 30, 2021, 1:00pm

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" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Vehicle Details</title>
<!-- Font Link -->

</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

Topic		Replies	Views
Custom Gallery CMS Development	22	21268	May 28, 2021
Custom image slider CMS Development	6	16688	February 1, 2021
Webpage Custom Modules- Picture pops out CMS Development professional	3	2187	March 24, 2021
Slider CMS Development	1	3137	July 8, 2022
A question about responsive slider CMS Development javascript	1	1535	December 7, 2020

Adding images in custom module

Related topics