Custom Image Galleries

In this episode, we'll learn how to begin using the Custom Component to create custom image galleries to display images from an Attachments Field.

Features Discussed:

1. Custom Component (Time: 04:45)
   Learn how to use custom components to create personalized HTML and CSS templates that dynamically bind to data tables. The process involves selecting a data table to load records, integrating those records into a custom HTML template, and rendering them on the page with any desired styling.
2. Custom Component with CSS Styling (Time: 10:00)
   Learn how to apply CSS styling on the fly to an image gallery. For example, the focus is on customizing the gallery wrapper, which holds the entire gallery, setting a max width of 1000 pixels, centering it, and applying flexbox properties to ensure a clean layout. The CSS also targets the image display area to ensure that only one image is shown at a time, with thumbnails set to flexbox for easy navigation. This step-by-step approach highlights how CSS transforms the gallery's visual presentation.

Transcript Summary

Introduction

Hey everybody, welcome back to another episode of Build It with Tadabase. On today's episode, we're talking about Custom Image Galleries.

So today, we're going to build two different image galleries. One is going to be a more simplistic gallery, and the other one is going to be a grid or masonry gallery. The first one here is a simple gallery where we have thumbnail images that we can click on, and it loads the image directly in the main content display. The next one is a little bit more complex; it's the grid gallery or masonry gallery, where we have all of these images that are stacked neatly together in this grid, and when we hover over them, they will become colorized. Then we can also click for a lightbox.

So, let's hop over to the builder and get started.

Building the Image Galleries

To build this, all we're using here is the attachments field that's built into the database. I've added a field to a table, and I chose the attachments field because I can upload multiple files to that single field. Before we get to the custom component stuff, I just wanted to take a moment and talk about how regular components work.

On this page, I've added a list component, and we have a detail page to display more details about that particular record. When we preview this page, you can see it loads just as you would expect. We have a single record because I only have one record in the data table, but it's displaying in this particular format known as the list component. What's happening behind the scenes is that we have a data table storing information, and that information is our record. On that record, we have fields like the name of the record and all of the images uploaded in the attachment field.

When you preview the application or visit the live published application, the page loads by simply loading the records from the chosen table. We're doing a sort of data binding by saying, "Here's the component that's going to load, here's how it's going to look, and here's the data that's going to feed into it." All the styling and the actual structure of the component, in this case, the list component, load through HTML and CSS. The data is then bound from our data table and the records that need to be loaded into that particular template, which is the HTML and CSS combination.

Custom Components

With the custom component, we can actually create our own HTML and CSS template, and the data binding works the same way. We're selecting a data table that we want to load the records from, that data is fed into our custom template, and then it's rendered on the page in any number of ways, depending on how you've built the custom component.

When we go to something like the simple gallery and look at that, this is how it would look by default without any styling. I've created some HTML here, and we'll take a look at that now just so it makes a little more sense. I've created a simple HTML template, but there is no styling. Once I add that styling, that's where everything comes together.

Simple Gallery

For the first gallery, the simple gallery with the thumbnails, this is the actual code that I found on the internet. I've modified it slightly for our use. First, we have a div element with a class of gallery wrapper, which contains everything within it. The way they built this in the example was to create three images and three thumbnails. But since we're loading our records dynamically, we don't need to create three. Instead, we tell the custom component to loop through the records and output each image as a single item.

We use the each tag because the attachment field is an array, and we loop through each item within the array of that particular field, creating an image element for each item. The same is done for the thumbnails, where we say, "For each item within the attachments field, create the thumbnail." This way, we don't have to figure out how many images are in our attachments field and then create elements for each image. If we had seven images, we don't have to create seven actual images; we can just tell the custom component, "For each one, create an element."

Now, here's what we're looking at for the actual HTML. There is no styling on this, no CSS, so this is simply the raw HTML. When you load a page, any external styling might take effect for some of these elements, but we haven't set any specific CSS to override any of that vendor styling. Let's save this and preview the page to see what it looks like without the actual styling.

You can see all the images loading with no styling whatsoever. It's taking each upload in the attachments field and creating an individual item for it. Now, when we start to style this page, we'll target each individual item to make it look nice. I'll just copy and paste the CSS we use, and we'll walk through each bit here.

CSS Styling

On screen, you can see I have an extension to do CSS on the fly, like on the actual page. When I paste in the CSS, everything snaps into place, and it looks like our finished result. We're targeting each class, starting with the gallery wrapper, which is the main container that holds everything for the image gallery. We're doing some more CSS as we go down the line.

• For the gallery wrapper, we're setting a max width of 1000 pixels and centering it with margin auto.
• For the gallery display, which is where the image is displayed, we're setting a max width of 600 pixels, using display flex, and only displaying one image. We're also hiding the overflow so that only one image shows at a time.

The images share the same max width as the container, so they display correctly. The thumbnails are also using flexbox, with set width, height, margins, and border radiuses. When you click on an image, it loads into the container that should display the image. We're linking the two so that when you click on the thumbnail, it finds the image by its name and displays it.

Grid or Masonry Gallery

The grid gallery or masonry gallery works in the exact same way. On a detail page for this record, we loop through all the items within the attachments field and output image elements. We're setting widths and heights for all the elements and using media queries to change the number of columns based on the screen size. The lightbox, which I took from the database community, loads when you click on an image. It uses a little bit of JavaScript but not a whole lot.

I'll make sure that all of these actual files—the HTML, CSS, and any JavaScript—are included in a zip file for this video so that you can explore this yourself. The point here is not to make you experts on HTML, CSS, or JavaScript, but to show you how to get started with the custom component. There are only a few basic concepts to understand, like using each records to loop through the selected data source and loading fields by their field ID.

Additionally, when you're getting started with the custom component, I highly recommend checking out our help center and the documentation on the custom component. There's a lot of information with examples on how to use the different fundamental pieces of the custom component to output the information you want.

Conclusion

I hope you enjoyed this week's episode. I realize it wasn't necessarily a fully in-depth tutorial, but I wanted to show you what's possible. Using the templates I'll supply for this video, I hope you'll be able to understand more and start to utilize the custom component to its full potential.