One of the most important modules for any website is the Home page slideshow. Like the Welcome article, it can introduce your readers who are more visually oriented with a summary of why they should spend time on your website. Here is what our Home Page will look like after creating this slideshow:
Note that the slideshow module is below the Mega Menu module and above the Home Page Welcome article. Each of 20 slides displays for about 6 seconds. Therefore, it takes about 2 minutes to watch the entire slideshow. Those who are more visually oriented by just watch the slideshow. Those who prefer reading can read the Welcome article. Either way, your website visitors will better understand what your website is about and why they should spend more time visiting the various web pages on your website.
Create Slideshow Images
We will begin by creating our slideshow images – many of which can be taken from your Home page welcome article. We have previously created several featured images for various articles. These are 1200 pixels wide by 800 pixels high and compressed these to 150 DPI. We will use these and create a few more. However, because we want to use our slideshow show images to create videos for our business video channel, we will change the ratio to 16 by 9 and therefore change the images to 1200 by 675. We will then resize these images to 800 x 450 to use for our slideshow – and we will resize these further to create images 400 pixels wide, 300 pixels wide and 200 pixels wide to use for our Intro article image, 3 column image and 2 column (side by side) image. Here is a table summarizing these image sizes – all of which are 16 by 9 ratio.
Create Slide Images with Libre Draw
Before we can post our business video, we first need to make the video. And before we make our video, we need to create the visual images that will form the content of the video. A simple effective way to create slide images for your video is to use a free tool in Libre Office called Libre Draw. Libre Office is completely free and comes with Linux Debian. To create a new Drawing, open Libre Writer and click File, New, Drawing. This will bring up a slide set for Portrait, Letter 8.5 inches wide by 11 inches high. Because we will be creating images for videos, we want the image ratio to be 16 wide by 9 high.
We could go to Page, Page Properties and change the Page Format to 16 by 9 (or 12 by 6.75). However, because we will be creating a lot of images, it is better to create a new slide template. To do this, click Page Page Properties. Then click on the Page tab and set the format for Landscape 12 wide by 6.75 high.
Click on Background and give it a color of #eeeeee. Then click OK. Then click File, Save as Template. Name the template 12 by 6.75 drawing and place it in the draw folder. Then check Set as Default Template and click Save.
To see if it works, close the Libre Draw document without saving it and open a new one. Then add your text and images and save the drawing as 01-welcome, 02-next-image to keep the images in order.
Capture Images with Flameshot
Once you are finished placing your images and text boxes in the workspace, use Flameshot to capture each image and place it in a Writer document. Right click and compress each image to 150 DPI. Then create a slideshow images folder. Then right click on each image and click Save As and save the images as 01, 02, 03, etc.
Note that the file size for each image is under 100kb.
Use Gthumb to resize and then crop each image
Start the Gthumb image editor:
Select and open the first image.
Click Format, Resize
This image is 844 by 450. We want 800 x 450 which is a 16 x 9 ratio. Therefore reduce the height to 450 and click the blue Accept button at the top of the screen. Then crop with the width to 800.
Then click Accept. Then save the image as 01-800.jpeg.
Then repeat with the remaining images. Your slideshow images folder will now have the original images plus a version of each image set for 800 pixels wide by 450 pixels high (16 x 9 ratio).
Close your File Manager. We will next use the 800 pixel wide images to make a Libre Impress Slide Presentation. Click File, New, Presentation.
Select a template or just close the template screen. Then click Slide, Slide Properties and change the width to 8 inches and the height to 4.5 inches and click Save.
Type in a title.
Save the Presentation. Then right click on the slide in the left slide pane and click Duplicate Slide. Delete the text boxes. Then copy the first 800 pixel wide image into the slide.
Then right click on the slide in the left slide pane and click Duplicate Slide. Delete the first image. Then copy the second 800 pixel wide image into the slide. Repeat to add the remaining slides. Then add a slide at the end for Questions and Next Steps.
To start the slideshow, click Slideshow, Start from First Slide. To advance the slides, click on the right arrow on your keyboard. To escape Full screen, press the Escape key in the upper left corner of your key board.
Create a similar slideshow for the Home page of your website
We are now ready to create a similar slideshow for the Home page of our website. Click Content Media and create a folder called 0-slideshow. Then click on the 0-slideshow folder to open it. Then click Upload and upload all of the 800 pixel wide images we created earlier.
Download the DJ Image Slider Extension
Go to the Joomla Extensions Directory Slideshow category. The most popular free slideshow is called DJ Image Slider. Here is the direct link: https://extensions.joomla.org/extension/photos-a-images/slideshow/dj-imageslider/
Click Download. Then go to System, Install, Extensions to install the Slideshow. Then click Components, DJ Image Slider categories and click new to create a category called Home Slideshow
Click Save and Close.
Add Slides to the Slideshow one at a time
Click Slides. New. For Title, type 01.
Then click Select and click on the 01 image to select it. Click Insert. Then click Save and New. Name the second slide 02 and select the second image. Click Save and New to add the remaining slides. Here is what the slide list will look like when we are done:
Configure the Slideshow Module
Click Content, Site Modules. Click on the DJ Image Slider module to edit it. Change its name to Home Slideshow and publish it in the Helix Slider position (note that we created this row and module position earlier). Turn off Show Title.
Scroll down to Folder as a Source: Settings and change the path for the slideshow folder to images/0-slideshow
Then scroll down to Basic Slider Settings and change the slider width to 800 and the height to 450. Change Vertical image centering to Yes and Visible Images to 1. Increase the space between images to 30 pixels.
Then click the Menu Assignment tab and change it to Only on selected pages. Click None. Then select the Home page.
Then click the Customize Slider tab. Scroll down and change the Slide Transition time to 6000 (6 seconds) meaning that each slide will show for 6 seconds and 10 slides will show in one minute. Then click Save and Close and view the result.
Congratulations! You now have a Home Page Slideshow.
What’s Next?
In our next article, we will review how to add videos to our articles and modules.