What? Another Image Gallery Tutorial?
Hubspot has a built in image gallery.
For those who have used it before, you will understand why this tutorial is 100% necessary. Shade thrown.
You will need this to make the gallery modular. I named ours Super Cool Gallery, which is totally appropriate.
Save that module for later. We will come back to it.
At this point, you can delete the default NAME column and add two more columns.
The first should be an image column; just call it Image:
Second: an image descriptor column. I called it Image Description and it should be a text field.
Keep record of the column name from each of these fields, as they will be needed shortly.
Go ahead and add all of your images and descriptions to the HubDB and publish it when done. We're halfway there!
One thing though: make sure and make note of the TABLE ID that is found the URL and in the list of all of the tables you have in HubDB. You will need this to access the information found in the database you have just created.
The URL looks like this:
https://app.hubspot.com/hubdb/<PORTAL-ID>/table/<TABLE-ID>Remember that custom module that we created? Now that you have your HubDB gallery table created and published, you can go back to that.
Once there, we are going to add three sections to it: CSS, HTML and HubL, and Javascript.
CSS is intended to make this look pretty and ensure that our images are centered and that's it.
<!-- use require_css ensures the css goes to the head of the html -->
<style>
/* Make Gallery Three Wide and add padding arround it. */
.gallery {
padding: 2em;
columns: 3;
width: 100%;
}
.gallery__image {
display: block;
max-width: 100%;
margin-bottom: 1em;
}
/* Make sure the gallery overlay takes up the entire screen and sites on top of evenrything. */
.gallery__overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.8);
z-index: 100000;
}
/* Close Button */
.gallery__overlay .close {
position: absolute;
top: 2rem;
right: 2rem;
background: transparent;
color: #fff;
font-size: 2rem;
}
/* Center the image and text in one fell swoop. We use translate to ensure the image is always centered. */
.gallery__image--wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 1000px;
color: #fff;
}
</style> This is the meat and potatoes of this article. We use HubL to extract the content from the HubDB table that you created a few moments ago. The HTML will provide a markup for the initial gallery listing.
Using HubL, we loop over each row in you database and output them into three columns using HTML markup and CSS.
<!-- Gallery Markup -->
<div class="gallery">
<!-- Pull the gallery hubdb from hubspot and set it as a variable called gallery. -->
{% set gallery = hubdb_table_rows('677222') %}
<!-- loop over the info and create a linked image with the image url and -->
{% for scimg in gallery %}
<a class="gallery__image" href="{{ scimg.image.url }}" title="{{ scimg.image_description }}">
<img src="{{ scimg.image.url }}" width="550" alt="{{ scimg.image_description }}">
</a>
{% endfor %}
</div>Each image that we output is small, but we wrap each image in an anchor link that has a URL leading to the larger version of the image.
At this point, you should have something that looks similar to the gallery we are trying to create. Now, lets make it function, as well, using Javascript.
The Javascript below accomplishes three things.
<!-- use require_js is to ensure the javascript gets added to the footer -->
<script>
$(function(){
// If you click the gallery image
$('.gallery__image').on('click', function(e){
// dont let the link go anywhere
e.preventDefault();
// grab the url of the link clicked as well as the title
var url = $(this).attr('href'),
title = $(this).attr('title');
// create and append a image popup with the url and title that we grabed.
$('body').append('<div class="gallery__overlay"><button class="close">close</button><siv class="gallery__image--wrapper"><img src="' + url + '" alt=""><p>' + title + '</p></div></div>');
});
// When you click the close button
$('body').on('click', 'button.close', function(e){
// dont let the close button link anywhere
e.preventDefault();
// Hide the overlay and then remove it from the DOM.
$('.gallery__overlay').hide('400', function(){
$(this).remove();
});
});
});
</script>
Add your new module to a flex column or a template and you are good to go.
This is a super simple and extensible image gallery that, at 4kB, shouldn't bog down your website. The gallery will provide a great user experience because it is mobile friendly and uses HubSpot's ability to create responsive images, as well.
If you enjoyed this tutorial, that is awesome. Want to learn something else and can't find a tutorial about it? Let me know and we will do our best to work on it!