DJ-Extension Knowledge Base: How to build card-like gallery with DJ-MediaTools
Login

New to DJ-Extensions?

How to build card-like gallery with DJ-MediaTools

Card-like gallery

We will show you step by step, how to create a "card-like" type of gallery in the DJ-MediaTools extension.

Let's start by creating a DJ-MediaTools album. In the next step, the album will be assigned to a chosen menu item and displayed on the front-page.

DJ-MediaTools album configuration

Open the Joomla backend and go to the DJ-MediaTools component.

djmediatools control panel view

In the DJ-MediaTools control panel, choose the "New album" option.

dj-mediatools add new album

The album needs to be configured. For our example, we use the "Album_test1" name.

dj-mediatools add title to new album

It is required to add some images along with their titles and descriptions. The album itself will contain a description as well.

dj-mediatools add new images to album

Uploading images in the album causes that they are added to the album, but also created as separate items, possible to edit in the "Custom items" tab in the control panel in DJ-MediaTools.

After editing the album, we will go to custom items to show the settings and configure the "Linking options" for a proper "Read more" button display.

Now the "New album" tab is configured, it is time to define the rest of the album tabs.

Album settings

dj-mediatools album settings
dj-mediatools slide settings

After setting up all options, and saving, the new album configuration is 100% ready.

Custom items

Now open the "Items" in the DJ-MediaTools control panel.

dj-mediatools items view

Choose and open an item. We will use "dog2" as the example here. We won't focus on all settings now, because there is only one setting important for our album. On the right, you'll find the "Other Options" section.

In link type you need to choose the link target of this item. For the correct display, it is necessary to set in each image (item) from the album the "Link type" as "Url address" and define the URL. Our example uses "#" because there is no need to link the image with any web page.

dj-mediatools linking options

The final effect

That is how the create DJ-MediaTools album looks on the front page:

dj-mediatools card-like gallery view

Video tutorial

© 2023 DJ-Extensions.com. All rights reserved.