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

Leave a review
Information
Print

Truly Responsive Slides Quickstart Guide

Information
Truly Responsive Slides

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.

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

Go to the menu ‘Content’ -> ‘Media’.

Create a sub-directory /slides in the Media Manager where all your image slide backgrounds will be located. Note that all images should have the same width and height.

Slides media folder

Tip When creating several slideshows and for better organisation, create a top folder /slideshows and a sub-folder for every slideshow.

When creating a slideshow from images only

There are no other requisites.

When creating a slideshow from articles (in the core Joomla content extension)

Create an article category slides that will contain all slides.
Pro Optionally create another category tooltips that will contain the tooltips for the slides.

Tip When creating several slideshows and for better organisation, create a top category slideshows then a sub-category per slideshow.

Create an article per slide under the slides category.

Add content to the articles. Read More will split the content slide in 2 separate columns.

Edit slide

In the Images and Links tab, set the full article image (image coming from the directory /slides). In the Caption field, add the position the text will take in the slide. 'NE' (North East) will place the text in the upper right corner. For the list of all possibilities, check the Caption Configurations section.

Edit slide (image)

Pro To add tooltips, check the Adding Tooltips section.

When creating a slideshow from K2 items (in K2)

Create a K2 category slides that will contain all slides.
Pro Optionally create another category tooltips that will contain the tooltips for the slides.

Tip When creating several slideshows and for better organisation, create a top category slideshows then a sub-category per slideshow.

Create a K2 item per slide under the slides category.

Add content to the K2 items. Read More will split the content slide in 2 separate columns.

Edit K2 slide

In the Image tab, set the image (coming from the browser server directory /slides). In the Item image caption field, add the position the text will take in the slide. 'NE' (North East) will place the text in the upper right corner. For the list of all possibilities, check the Caption Configurations section.

Edit K2 slide (image)

Pro To add tooltips, check the Adding Tooltips section.

Step 1 - Create a module instance of Truly Responsive Slides or Truly Responsive Slides Pro

Go to the menu Extensions -> Modules.

Modules page

Click on New.

New module

Select the module type Truly Responsive Slides or Truly Responsive Slides Pro.

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 - Set the source of the data that is used for the slides

Click on the Data Source tab.

Click the data source tab

Choose the data source the slides will created from.
Select Images, Articles or K2 Items.

Select the data type

When creating a slideshow from images only

Set the image directory the images come from.

Set the image directory

When creating a slideshow from articles or K2 items

Select the category or categories the items come from.

Select the categories

Step 5 - Set the slideshow type

Click on the Slider tab.

Click the slider tab

Select the basic slider type.

Select the slider type

Step 6 - Set default background image and dimensions

Click on the Slides tab.

Click the slides tab

Set the default image background. It will allow the module to take into account articles or K2 items that lack an image.

Set the default background image

Set the original width and height the images will have before any resizing.

Set the image dimensions

Step 7 - Check the default slide transitions

Click on the Transitions tab.

Click the transitions tab

Change the default values as needed.

Step 9 - 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 Truly Responsive Slides module.

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

The resulting output