Get Started

Backstretch is a Joomla extension includes both a plugin and a module that allow you to display fullscreen background images with customizable settings. This documentation covers the installation, configuration, and usage of the Backstretch plugin and module.

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: Backstretch_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the Backstretch_UNZIP.zip package. After unzipping, you will find the following contents:

• Folder Joomla 3: This folder contains the installation file pkg_backstretch_X.x.zip compatible with Joomla 3.x.
• Folder Joomla 4 & 5: This folder contains the installation file pkg_backstretch_X.x.zip compatible with Joomla 4.x and Joomla 5.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• Joomla 3, 4 & 5: Navigate to Extensions > Install, then click on the "Upload Package File" tab. Click "Browse" to select the appropriate installation file (pkg_backstretch_X.x.zip), then click "Upload and Install."

A success message will be displayed once the installation is complete.

Module Configuration

After installation, the module needs to be configured to suit your requirements. Access the module settings by navigating to Extensions > Modules, and find Backstretch in the list.

General Settings

• Sort Images: Select whether to show images randomly or sequentially.
  • Options: Sequence A-Z, Sequence Z-A, Random
• Image Path Selection: Select the type of the image path.
  • Options: From Folder, Slides
• Image Folder Path: Enter your desired image folder path (default is images/backstretch/).
• Slides: Click on the "Add" button to add slides. Define slides using the subform feature.
• Define Elements: Define the elements where you would like the backstretch to appear. For class, define .classname and for ID, define #idName (default is body,#wrapper,.container).

Animation Settings

• Fading Time: Enter the fading time of images in milliseconds (default is 3000).
• Fading Timeout: Enter the fading timeout of the transition in milliseconds (default is 7000).

Advanced Settings

• Module Class Suffix: Add a suffix to the module class for additional styling.

Plugin Configuration

After installation, the plugin needs to be configured. Access the plugin settings by navigating to Extensions > Plugins, and find System - BackStretch in the list.

Plugin Settings

• Show Images: Select whether to show images randomly or sequentially.
  • Options: Random, Sequence
• Sort Images By: Select the order on the basis of which you want to sort the images.
  • Options: Ascending (A-Z, 0-9), Descending (Z-A, 9-0)
• Image Path: Select the type of the image path.
  • Options: Folder, Individual Image Path
• Image Folder Path: Enter your desired image folder path (default is images/backstretch/).
• Image Path: Enter the individual image paths, separated by commas.
• Define Elements: Define the elements where you would like the backstretch to appear. For class, define .classname and for ID, define #idName (default is body,#wrapper,.container).

Animation Settings

• Fading Time: Enter the fading time of images in milliseconds (default is 3000).
• Fading Timeout: Enter the fading timeout of the transition in milliseconds (default is 7000).

Once configured, the module and plugin will automatically apply the backstretch effect to the specified elements on your Joomla site.

Features

• Customizable Background: Display fullscreen background images with customizable settings.
• Flexible Image Source: Fetch images from a folder or specify individual paths.
• Animation Options: Configure fading time and timeout for smooth transitions.
• Element Targeting: Define specific elements for the backstretch effect.

• How do I change the order of images?

  • Adjust the Sort Images option in the module or Sort Images By in the plugin settings.

• Can I use images from a specific folder?

  • Yes, set the Image Path Selection to From Folder in the module or Image Path to Folder in the plugin and specify the folder path.

• How do I add individual image paths?

  • Set the Image Path Selection to Slides in the module or Image Path to Individual Image Path in the plugin and enter the paths.

• Can I customize the fading time and timeout?

  • Yes, configure the Fading Time and Fading Timeout under Animation Settings.

• Images Not Displaying: Ensure the paths are correct and the images exist in the specified locations.
• Effect Not Applying: Verify the elements are correctly defined and the module/plugin is enabled.
• Styling Issues: Check the Module Class Suffix and custom CSS for conflicts.