CMS Development

YunYing
Member

Adding images in custom module

SOLVE

This is how the current page look likeThis 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.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: https://app.hubspot.com/design-manager/4193836/modules/5872080668

 

Hope there is a solution to this, thank you!

0 Upvotes
2 Accepted solutions
Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Adding images in custom module

SOLVE

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!

View solution in original post

Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Adding images in custom module

SOLVE

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

Anton Bujanowski Signature

View solution in original post

5 Replies 5
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Adding images in custom module

SOLVE

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

Anton Bujanowski Signature
YunYing
Member

Adding images in custom module

SOLVE

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" />
<!-- 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>
<body class="wrapper">

<!-- User this HTML for Slider -->


<section class="banner-section">
<div class="container">
<div class="vehicle-detail-banner banner-content clearfix">
<div class="banner-slider">
<div class="slider slider-for">
<div class="slider-banner-image">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6001_02_ye..." alt="Ring-Image">
</div>
<div class="slider-banner-image">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6002_02_la..." alt="Ring-Image">
</div>
<div class="slider-banner-image">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6003_02_wh..." alt="Ring-Image">
</div>
<div class="slider-banner-image">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6001_02_ye..." alt="Ring-Image">
</div>
<div class="slider-banner-image">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6002_02_la..." alt="Ring-Image">
</div>
<div class="slider-banner-image">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6003_02_wh..." alt="Ring-Image">
</div>
<div class="slider-banner-image">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6001_02_ye..." alt="Ring-Image">
</div>
<div class="slider-banner-image">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6002_02_la..." alt="Ring-Image">
</div>
<div class="slider-banner-image">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6003_02_wh..." alt="Ring-Image">
</div>
</div>
<div class="slider slider-nav thumb-image">
<div class="thumbnail-image">
<div class="thumbImg">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6001_02_ye..." alt="slider-img">
</div>
<span>BOH Ref 6001</span>
</div>
<div class="thumbnail-image">
<div class="thumbImg">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6002_02_la..." alt="slider-img">
</div>
<span>BOH Ref 6002</span>
</div>
<div class="thumbnail-image">
<div class="thumbImg">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6003_02_wh..." alt="slider-img">
</div>
<span>BOH Ref 6003</span>
</div>
<div class="thumbnail-image">
<div class="thumbImg">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6001_02_ye..." alt="slider-img">
</div>
<span>BOH Ref 6001</span>
</div>
<div class="thumbnail-image">
<div class="thumbImg">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6002_02_la..." alt="slider-img">
</div>
<span>BOH Ref 6002</span>
</div>
<div class="thumbnail-image">
<div class="thumbImg">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6003_02_wh..." alt="slider-img">
</div>
<span>BOH Ref 6003</span>
</div>
<div class="thumbnail-image">
<div class="thumbImg">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6001_02_ye..." alt="slider-img">
</div>
<span>BOH Ref 6001</span>
</div>
<div class="thumbnail-image">
<div class="thumbImg">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6002_02_la..." alt="slider-img">
</div>
<span>BOH Ref 6002</span>
</div>
<div class="thumbnail-image">
<div class="thumbImg">
<img src="https://www.imperialharvest.com/hubfs/Thumbnail-Bliss%20of%20Harvest%20Jadeite%20Ring_New_6003_02_wh..." alt="slider-img">
</div>
<span>BOH Ref 6003</span>
</div>

</div>
</div>
</div>
</div>
</section>
<!-- End User this HTML for Slider -->


</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,
}
}
]
});
0 Upvotes
YunYing
Member

Adding images in custom module

SOLVE

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).

Screenshot 2021-06-30 at 9.59.54 AM.png

Screenshot 2021-06-30 at 10.03.53 AM.png

 

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

Description meaning something like this:

Screenshot 2021-06-30 at 10.02.51 AM.png

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Adding images in custom module

SOLVE

@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 😀

0 Upvotes
Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

Adding images in custom module

SOLVE

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!