It is assumed that you have already downloaded and installed the extension (free or pro). If not, you can find more information here on how to do so.

Note There are many options in the extension to give you maximum flexibility in the way you want to design your final output. In this guide, you will be walked through the main parameters that are necessary to create a module instance. You can leave all other parameters to their defaults until you are ready to fine-tune its visual aspect and performance.

Pre-requisites

The Weblinks core extension is required (that extension is not bundled with the Joomla! core anymore - since Joomla 3.4 - and must be downloaded separately from the Joomla! Extensions Directory or installed directly from the Install from Web tab of your website).

Step 0a - install the Weblinks component

Install the Weblinks component

Step 0b - Create new Web Links

Create new weblinks

Step 0c - Add images to each Web Link

Add images

The First image parameter is mandatory. Any weblink missing it WILL NOT appear in any instance of Weblink Logos.

The Second image, optional, will be used as the image that will show on hover. Note that Weblink Logos can create the hover images automatically.

Step 1 - Create a module instance of Weblink Logos

Go to the menu Extensions -> Modules.

Modules page

Click on New.

New module

Select the module type Weblink Logos.

Select the module type

Step 2 - Set the module's general parameters

Set the module's title.

Edit the title

Set the module's position.

Select the position

Step 3 - Assign the module to specific areas of the site

Assign the module to areas

For testing purposes, it is easier to leave the default settings.

Step 4 - Narrow down the list of items you want to show

Click on the Filtering tab.

Click the filtering tab

Select the category or categories the web links come from.

Select the categories

All categories are selected by default, therefore retrieving all existing web links. To select a specific category, select it from the list.

Select a category

Once selected, remove the All Categories option.

Remove the option all categories

Narrow down the number of items that will be listed by the module instance. Set Max Count to a reasonable amount while you are in the testing stage.

Set the max count

Step 5 - Design the overall layout of the output

Click on the Layout tab.

Click the layout tab

Select the configuration you are looking to achieve. In our example, we will show logos in a grid configuration. The size of the logos (that we will specify later) will dictate the size of the grid items that will show on the page.

Choose the overall configuration

Step 6 - Set the links behavior

Click on the Links tab.

Click the links tab

Usually, web links open in a new window or browser tab. You can also decide if you need to keep a tab on click counts.

Set links behavior

Step 7 - Design each individual logo

Click on the Logos tab.

Click the logos tab

Set the width and height of the logos. In this example, the original images are square.

Set the logo size

Finally, we need to set the way the images will look in the output. In our example, we will make all logos gray, but we want them to be colored when a visitor clicks on them. Therefore, the Filter parameter will be set to Grayscale and the Filter hover parameter will be set to None (to keep the original image colors).

Set the filters

Step 8 - Save the module

That's it! You went through the minimal amount of information you need to know to create your first instance of the Weblink Logos module.

Let's see what the module instance looks like on the public site:

The resulting output