S5 Photo Showcase
This tutorial will explain how to install and configure the S5 Photo Showcase module.
The S5 Photo Showcase module is an image display module that presents images and text in a sliding motion, while providing a sneak peek of the next and previous images. This is a great way to showcase your site's images and content. It comes with many great features that allow you to easily customize the look of the module and what content you would like to show.
The module includes the ability to pull in Joomla articles from categories you specify. Each slide will function just like a Joomla article. You can change order, display according to publish date, have unlimited number of slides, etc. The module also has the ability for the user to submit plain text and the module will stylize the content with default settings or you can enter your own custom html. The plain text option is great for users with limited css understanding and the html setting is for advanced users.
Note - Many of our club products contain specific styling for our extensions. These styles cannot be transferred from one product to another; they are integrated into the design. The same extension is used on all installations, the themes themselves contain the styling overrides. If a particular theme does not include unique styling for a particular extension, then the default style is used.
Be sure to read the tooltips and other descriptions in the backend of this extension. There are a lot of tips and further information found in these areas.
The first thing you'll need to do is install the module. Once you have it downloaded it just follow the below tutorial if you need help installing the module into Joomla. Refer to your template's module layout to determine the best position to publish this module to, some modules are designed for specific locations.
Next you'll need to decide which mode you want to the photo showcase to operate in article or HTML mode. Article will work off Joomla articles you add display the intro image as the fader image. HTML will just be a limited amount of slides with content you enter in the module admin.
2a. HTML method - Enter Your Image URLs
In the backend of the module you will need to enter in URLs to images you have either uploaded to your server or are linking to from another website, under the "Image Settings" tab. You can enter a full URL such as "http://www.yoursite.com/imagename.jpg" or a relative URL such as "images/imagename.jpg". The number of slides is determined by how many images you add. So if you just want 2 slides to show, then just enter in 2 image URLs:
2b. HTML method - Give Each Slide Some Content
The module has the ability for the user to submit plain text and the module will stylize the content with default settings or you can enter your own custom html. The plain text option is great for users with limited css understanding and the html setting is for advanced users.
Below is a screenshot of where you will enter in your text under the "HTML Method" tab. There are 2 areas for each slide it just depends on what you want to do. If you just enter a title in the "Image 1 title" box the module will style it automatically. If you want to enter custom HTML then you'd fill in the box below with this and whatever you enter will show on top of each image. This can be seen in our Photobox template demo.
3a. Article method - Select Category
If you want to pull in Joomla articles and display them in the module you'll first need to create some article categories. Once you do this go to the backend of the module and you'll be able to select the category or categories you created. In these categories you will publish articles with intro images and these are what will rotate in the photo showcase.
3b. Article method - Add Intro Image
In the backend of the each article you'll need to add in an intro image. This is the image that will show in the slider. You can then also add a title and description text in the article body if you so wish to include these too.
4. Next you will need to setup the options in the admin
In this last step you'll need to go through all the options on the main tab and decide how you want the image fader to function. Make sure you have a pixel height set (ie 250px) or the image fader may not operate properly, this setting will be used for smaller screens on responsive sites. To enable responsive functionality set "Image Sizing" to "Stretch To Fit" and make sure the module width is set to 100%
Below is a complete list of all the settings on the main "Module" tab. Typically the default settings here work well, the most common settings to change are: Width, Height and Image Sizing.
- Module Class Suffix - If your template has any compatible module classes you can supply that here.
- Active Image Width - This is the width of the center image when the screen size is smaller than the max width chosen below. For example if your max width is 1000px but your screen width is only 800px wide this percentage width will be used.
- Max Width - Above you will set the width of the center image, but this setting will not allow the center image to get any larger than the value you enter here. A recommended number would be between 800 and 1100, enter only numbers.
- Display Time - How long should each slide appear for before transitioning to the next one?