Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review


Create a contact directory in Joomla

First published October 25, 2020
1157 hits - No rating

In this tutorial, learn how you can create a full-blown contact directory with Trombinoscope Contacts Pro. We will go through the basic steps that are necessary to create a successful output.

For this tutorial, you need:

Step 1 - Create a menu item of type Trombinoscope Grid

To get a directory with pagination, a simple module instance is just not enough. It lacks pagination, for instance. You need to create a view, accessible through a menu item. The view is all the information that will be seen as main content of the page.

Create a new menu item
Create a new menu item

Click on Menu item type. It will open a modal window with all the possible menu items you can create for your site.
Select Trombinoscope (grid). You could also select Trombinoscope (list) to create a directory of contacts in a table layout. In this tutorial, we want the contacts to appear in a grid layout.

Select the menu type Trombinoscope (grid)
Select the menu type 'Trombinoscope (grid)'

Step 2 - Select the contacts to show

Go to the Item selection tab.

Select the contacts you intend to show in the directory. You can show all of them (by default) or filter the selection by category, tag, ...

Item selection
Select the contacts that will be shown

Step 3 - Set the size of the cards

Go to the Layout tab.

Each card width can be specified in such a way that it will resize on the page, depending on the allocated space. For the best 'responsive' approach, you should set the width in percentages.

For instance, to show at most 3 items on a row, use something like 30%. This will leave about 3% of margins between each card. To prevent the cards to become too large, set a maximum width. To prevent them to get too small, set the minimum width. By setting the minimum width, you will basically 'force' the cards to automatically fill the space that is available to them. Not enough space? Then 2 cards will show on each row instead of 3.

The card width
Set the card widths

Step 4 - Link the contacts to their individual profile

In the Linking section of the Layout tab, select the link Contact (Trombinoscope Contacts Pro). This will tell the extension to link the name of the contact with its individual page, created by Trombinoscope Contacts Pro. Individual pages created with the extension are more flexible and can show more information than the Joomla core Contacts component (The individual contact pages are setup in System -> Global configuration -> Trombinoscope Contacts Pro).

Select the link
Select the link to the individual contact page

Step 5 - Select the card theme

Go to the Theming tab.

By default the default 'look' of each card is basic, but you can select a different theme or download more themes from this site.

Moreover, there are plenty of settings you can change to make the cards look unique.

The themes
Select the theme

Step 6 - Set the contact picture

Go to the Picture tab.

You can decide to show or hide the contact picture. If some contacts may not have one, set a default picture for them. The extension provides a set of default images you can use.

The Orientation switch width is useful for an even better responsiveness of the cards. By default, the picture is shown on the left of the contact information. By setting the Orientation switch width, you are basically saying: when the card resizes and gets smaller, I want the picture to show above the information rather than on the left (or right). So the width you set needs to be bigger than the card minimum width but smaller than the card maximum width.

The contact picture settings
Set the picture options

You can also 'process' the contact images to fit the width and height you have set (images will be cropped) and apply filters.

Process the picture
Process the picture

Step 7 - Select the information to show for each contact

Go to the Fields tab.

In that tab, you can set how and what information can be shown for each contact. Use labels, icons, a mix of both, specify which information can be shown to what kind of visitor...

The contact information fields
Set the contact information fields

There is no limitation on how much information you can show. Custom fields, created for the contacts in the Joomla core Contacts component, can also be selected.

Step 8 - Enable pagination

Go to the Pagination tab.

This is where you can set the pagination and index parameters for the directory. Allow the visitors of your site to filter the contacts by category, tag or alphabetically. Sorting is also available.

Enable pagination
Enable pagination

The final result

By using the basic settings you have seen in this tutorial, you will end up with a simple contact directory.

The final result
The final result

There are 'plenty more' parameters to help you create unique contact directories with Trombinoscope Contacts Pro. I hope this tutorial was able to help you jump start your design or show you how you can create such a directory in Joomla.

You can find more examples on the demo site.