">Docs Tutorials

In this tutorial we will see how to create image gallery. The images will be managed through the wordpress Media Library.
The structure will consist of two tables. The first table will have the list of image galleries will have title and description.
The second table will have the list of images for each gallery and the columns will be: image, title and the reference to the gallery to which they belong.

Let's start by creating a new list

Click on the ADMIN FORM plugin and then on the "CREATE NEW FORM" button. As a name we write Gallery images and leave "create a new Table". We then press the save button.

Once you have saved the list you will be redirected to the TAB FORM .
Click on the new field button to add a new column.
In the parameters we insert: NEW FIELD NAME: image_id
Field Type: Media gallery
Required: yes

Frontend

Let's copy the shortcode for viewing the gallery. This can be found at the top right on the configuration pages or by returning to the main plugin page in the shortcode column. Let's copy the shortcode and associate it with an article.

The visualization is in table format, now let's turn it into an image gallery

Let's go back to administration, inside the plugin in the TAB FRONTEND .
On List type we select custom instead of table

On the Header section we write:

<div class="dbp-gallery-columns">

On Loop the data section we write:

Please note that we will use the built-in detail system to display the popup with the image. To call the popup, add the js-dbp-popup class to the link and as a link we just need to call the template engine function [^LINK_DETAIL].

On the Footer we just need to close the div we opened to sort the images

On Detail view We can set various types of popups on popup_style, base, large or fit. Fit allows us to have a window that will adapt to the size of the content. We choose on Popup type FIT

On View type we choose CUSTOM and inside the editor we recall the large image asking for dimensions that fit the window (winfit). The documentation describes the various image_size options. Note that we cannot use the image column which natively would have contained the image id because in the list view setting we have set image as media gallery so the column returns the thumbnail in html and not the id of the image gallery.

Finally, inside the css of your template you need to add:

.dbp-gallery-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; grid-gap: 2px; line-height: 0;}
.dbp-gallery-columns > a { border: 1px solid; line-height: 0; padding:.5rem; height: 100%; box-sizing: border-box; display: flex; align-items: center;}

The final result will show a series of clickable images similar to the image below.