Adding images in custom module

SOLVE
YunYing
Member

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

Accepted Solutions
Sjardo
Solution
Contributor | Diamond Partner

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!

Sjardo Janssen, Bureau Vet
Bureau Vet - Sjardo.nl

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

Anton
Solution
Key Advisor | Diamond Partner

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




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

5 Replies 5
Sjardo
Solution
Contributor | Diamond Partner

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!

Sjardo Janssen, Bureau Vet
Bureau Vet - Sjardo.nl

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

YunYing
Member

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
Community Manager

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

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
YunYing
Member

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
Anton
Solution
Key Advisor | Diamond Partner

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




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post