Adding images in custom module
SOLVE
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!
2 Accepted solutions
Adding images in custom module
SOLVEhi @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
Adding images in custom module
SOLVEhi @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
Adding images in custom module
SOLVEAdding images in custom module
SOLVEHello, 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:
