1. Installing SJ Horizontal Accordion Showcase
After you downloaded your Joomla extension, just go to Extensions -> Extension Manager -> select the Upload Package File from the top tabs -> click on the Choose File button and select the Spot Featured Articles zip file -> click on the Upload & Install blue button.
Your module will now appear in the Module Manager section.
2. Basic settings for your extension
In the Extensions -> Module Manager section, find your Spot Featured Article module and click on it to acess the module's setup section.
You can find all the module's options right in the first window that opens.
First, from the right side of the page change the Status of the module into Published, put it into the desired Position and, if you want your module to be displayed with a title, select from the right Show at the Show Title section. Last, give your module the title that you want it to be displayed with.
Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.
3. Setting up your Showcase
3.1. Image settings
In this section, you will set up your images.
Prerequisites: Before setting up the module, only for the local items and not for the Youtube videos for example, login to your FTP, go to your website folder, navigate to images folder, create here a folder for your images and upload the jpg/png files into this folder.
First, select from the Image folder tab your previously created folder with the images you want to use.
The next step is to fill al the necessary informations in each item's section as below:
If you like to add a image inside the caption, you can use the below code:
<div><img style="padding: 10px;left:0;" src="/http://yourwebsitename/images/yourimagefoldername/yourimagename.jpg" alt="yourimagename" width="value(without px)" height="value(without px)"></div>
For further customization, you can add to this div a style... this will look like this:
<div style="place your css here">.... and the rest of the sentence
If you want to customize just the image, use the style an used above: <img style="your css goes here".... and the rest of the sentence.
If you like to add a Youtube video, let's say, the one from the demo, you will have the following sentence:
<div><iframe width="300" src="/https://www.youtube.com/embed/IpT-FW_G8-A" frameborder="0" allowfullscreen></iframe></div>
Once again, the div is just for customization here.
To get the embed Youtube code, please follow these steps:
- Go to your Youtube video
- Click on the Share you find under the video
- Right under, select Embed
- Copy the highlighted code and paste it in the item description from SJ Horizontal Showcase from your website.
3.2. Showcase settings
3.2.1. General settings
Inside this section, you will find some general settings for your showcase, like the width and height, the alignment of the module towards the webpage, autoplay (yes/no) and the width for the closed pannels. (the ones from the right side)
3.2.2. Panel settings
You will find here the panel and border options (thickness, color, radius).