course header 2000x350

The Fordson theme comes with a slideshow that displays at the top of the Home and Dashboard pages. Adding a slideshow to the top of your home page can be an alternative to adding three feature boxes. We will create slides for the pages “Meet your Teacher”, Learn Better Word Processing” and “Contact Us” so that we can compare the slideshow to the three feature boxes we created in our last article and then choose one or the other. However, before we can add our slide images, we need to create them.

Create your slideshow images
Slideshow images should be carefully made so that they all have the same ratio of width to height. Because your computer screen is about twice as wider than it is tall (typically 1920 wide by 1080 tall), I recommend slides that are about 1200 pixels wide and 400 pixels tall. You can look for free images on the Internet. However, it is often easier to create your own images using Libre Office Draw.

Step 1: Open a new Libre Office Draw document
Click on Page, Page Properties to set the workspace width to 12 inches and the height to 4 inches.

01

Then click on the Background tab and click on the Color screen to give the image a light blue background. Then click OK. Save the document as moodle-slide-1 in a new folder called Moodle Slideshow.

Step 2 Copy paste the image into a Writer document
Use Flameshot to capture the image. Paste the image into a Writer document. Here is the first slide:

02

Title: Meet Your Teacher

Description: David has more than 30 years of experience teaching Information Sharing courses and building online stores. For more information, CLICK HERE.

Step 3: Compress the Image to 150 DPI
Right click on the image and compress it to a resolution of 150 DPI. Then save the image as slide1. Click file Save. Then click File, Save As and save the Libre Draw document as moodle-slide-2. Repeat this process using different images and text to create slide2.

03

Title: Learn Better Word Processing

Description: Learn how to use Libre Writer to create well organized web pages, reports and even entire books! For more information, CLICK HERE.

Right click on the image and compress it to a resolution of 150 DPI. Then save the image as slide2. Click file Save. Then click File, Save As and save the Libre Draw document as moodle-slide-3. Repeat this process using different images and text to create slide3.

04

Title: Ask Us a Question

Description: If you have questions about any step in the Information Sharing process, feel free to contact us. For more information, CLICK HERE.

Right click on the image and compress it to a resolution of 150 DPI. Then save the image as slide3. Then close Libre Draw.

Step 4: Use Pix to set the Image width to 1200px
Open the Linux Mint Pix graphical editor and select slide1. Then click on the Edit file button in the upper right corner.

05

Click Resize and increase the image height to 400px. Then click OK. Then click Crop, Maximize and reduce the image width to 1200px. Then click Crop. Then click Save As and save the image as slide1-1200. Then select the second image and repeat this process.

Here are the documents and images in our Moodle slideshow folder:

06

Step 5: Organize your slideshow URLs
As we noted in our last article, here are our three special pages URLs:

Meet Your Teacher

https://collegeintheclouds.com/local/staticpage/view.php?page=meet-your-teacher

Learn Better Word Processing

https://collegeintheclouds.com/course/view.php?id=2

Ask Us a Question

https://collegeintheclouds.com/mod/page/view.php?id=5

Step 6: Add Images, Titles and Descriptions to the Fordson Slideshow

Now that we have our three URLs and our three slideshow images, click Site Administration, Appearance, Themes, Fordson, Slideshow.

07

Check the box to activate the slideshow and set the slideshow to only show on the site Home and Dashboard. Then change the slideshow height to 500 px. (extra 100 px needed to make the slideshow somewhat responsive). Then scroll down to the Slide settings. For each slide, enter a title and a very short description that includes a CLICK HERE link. Then add and image. Once all three slides are done, click Save Changes.

08

Sadly, the Title and Description cover too much of the slide. We could redo the slide so that there is blank space in each image for the title and description. Or we could redo each slide so that there is no need for the title and description. Or we could add custom CSS to improve the appearance of the Title and description. We will add the following CSS to the Fordson theme, Color tab, Custom CSS box:

.carousel-caption.d-none.d-sm-block {background: rgba(0,0,0,.1);}

.carousel-caption {padding-top: 4px; padding-bottom: 4 px; color: #111155; line-height: 1.1;}

Then click Save changes.

09

In addition, since it is not obvious that there are actually three slides, we will add a hint to the lower left corner of the first slide to click on the white bar to see the second slide:

10

The drawback of this slideshow is that it is not a responsive slideshow. In fact, it appears that we would need to switch to a different Moodle theme for the home page to have a responsive slideshow. This is yet another example of how things that are easy to accomplish on our parallel Joomla education website are nearly impossible to achieve with Moodle. We therefore may be better off with the three feature boxes instead of this Fordson slideshow.

What’s Next?
In our next article, we will review options for adding video conferencing to our Moodle website.