logo wide 2000x350

8 Slideshows and Videos

Welcome to Chapter Eight of our course on creating your own interactive website!

Chapter 8 Slideshows and Videos includes the following four sections:

8.1 Create a Frontpage Slide Show
8.2 Place a Slideshow in an Article
8.3 Insert a Video in an Article
8.4 Place a Video in a Module

Section 8.1 provides step by step instructions for adding a responsive front page slideshow to your website with a free tool that allows you to control both the background image and the foreground text.
Section 8.2 describes how to add a free tool to insert videos into any article on your website.
Section 8.3 shows you how to use another free tool to easily insert videos into your articles.
Section 8.4 explains how to use yet another free tool to place a video into a module in any module position on your website.  

00r
In the last section, we described how to insert a video in an article. However, there may be times when you want to display a video in a module. Articles are always located in the “Main Content” area of your website while Module boxes can appear either above or below the main content area. It is possible to simply copy the embed code off of a Youtube video and insert this into the html section of an html module. However, this can create problems for those not familiar with html coding. We will therefore use a free Joomla extension called SJ Video Box to insert the following video into the module.

01

https://www.youtube.com/watch?v=Qjnc0H8utks

Go to JED, Social Web, Social Media

https://extensions.joomla.org/extensions/extension/social-web/social-media/sj-video-box

SJ Video Box is a free and responsive Joomla module to display YouTube and/or Vimeo videos on your website. There are several settings you can set for the video. Equally important, there are several ways to add text above or below the video. To get this free module, click Download. Then click Download again. Then save the Zipped folder to your Downloads folder. It says “Unzip First.” This means you need to unzip the file in your downloads folder before uploading it to your website. Next, upload the module to your website with the Extension Manager. If the Template Uploaod screen says, “SJ Video module could not find the XML setup file” try uploading it again.

Then go to your Module Manager and open the module. There are five tabs. We will first review the Module Tab.

02

We first want to change or hide the title. We then want to assign the module to a module position on our template. We will use above_columns_1.

Below is what it would look like if have two modules and you change the titles and then leave Show Title set for Yes.

03

The second box to set is called URL video.

04

Unfortunately, what we need to put here is not the normal URL of a Youtube video. The normal URL is as follows.

https://www.youtube.com/watch?v=Qjnc0H8utks

What we must insert is the EMBED url. To do this, we need to delete watch?v= and replace it with embed/

https://www.youtube.com/embed/Qjnc0H8utks

Then paste this code into the module URL video box. The format to use for a vimeo video is http://player.vimeo.com/video/1234567

The next three boxes on the module tab are the Video Titles box, the Thumbnail Images box and the Thumbnail Description box.

05

All three of these are displayed below the video and all three can be turned off. The Video title will be displayed in bold. So if you want the title below the video, turn off the module title and leave the video title turned on. If you want the title above the video, then turn off the title, image and description below the video and rename the module to the title you want to use for the video.

Below are the remaining items on the module tab.

06

There are two layouts to choose from. The second layout is to display and play more than one video in a slider format. Autoplay Video should nearly always be set for No as should Auto Play Slider and Show Image. The Number per page refers to the number of videos in a slider format. You can have up to six videos. But it is best to leave it set to one or two videos per module. If you set the title for Yes, then two videos will look like the following.

07

The lower title uses the H3 tag which can be reset in your editor.

Below is what a single video would look like in this module.

08

The next tab is the Description tab. It provides a link to their forum and says that you have to register your domain. But given that it is listed as a free extension in the Joomla Extension Directory and on their website – and in neither place does it talk about licensing, we can skip this tab.

The next tab is the Menu Assignment tab. To have the module only appear on the Home page, click “Only on the pages selected.” Then select NONE. Then select the Home page.

09

The final tab is Advanced.

10

Here you can add pretext – which would appear above the video – or posttext – which would appear below the video. These are actually HTML boxes meaning you can add HTML tags or inline CSS to style the appearance of the text above or below the video. When you are done with all of the tabs, click Save and Close. Then view the video on your website to make sure it works properly. You should try the video in several web browsers as videos are sporadic in terms of working on some browsers but not others. At a minimum, try the video in Firefox and Chrome.

Add a Second Video in a Second Module

You can have as many videos as you want. But Youtube Videos are best displayed two across. To create a second module, you can either select the first module and click Duplicate. Or in the Module Manager, you can click New, then select the SJ Video box from the list. Either way, repeat the steps only using a different video with a different title and placed in the above_columns_2 module position. Here is the URL for another Joomla YouTube video:

https://www.youtube.com/watch?v=EfsOibCaQ-k

https://www.youtube.com/embed/EfsOibCaQ-k

If you are comfortable with CSS and you want to improve the display, you can open your file manager and make the following changes:

In .sj-video-list-item padding: 20px 0;

In mod sj video box .css line 14. make it 10 px.

.sj-video-list {

display: none;}

We now have the ability to put a video into either a Joomla article or a Joomla module. We can even place a video in a module and place the module in the article. In the next chapter, we will describe how to add a blog to your website.
This section explains how to use a special tool to easily add as many You Tube videos as you want to any article and add each video in a matter of seconds. With increased access to high speed Internet, videos are becoming very popular on websites. Sadly, many Joomla video tools are too complex for the average person to use. Most Youtube extensions are only for installing a video in a module (as indicated by the big red M next to the extension in the Joomla extension directory). You can then use Modules Anywhere to install the module in an article. We will review one of these free module tools in the next section. But what if you have a lot of videos you want to insert in your articles and you do not want to stop every time to put a video in a module before inserting it in your article?

If you understood HTML, you could simply right click on any You Tube video and copy the embed code. Then go to your Joomla article and click on Toggle Editor to paste the embed code into the HTML screen. But what if you do not know or understand HTML?

Other Joomla extensions have you copy and paste the Youtube URL into your article. The extension then automatically screens for all Youtube URL's and converts them into Youtube videos. But what if you want to post a Youtube URL without actually displaying the full video? What we really want is a video embedder with a button to insert it like we can insert images and READ MORE links with.

Thankfully, there is an extension which is not a module, does not require knowledge of HTML and does not automatically turn URLs into videos. Best of all, it comes with an INSERT VIDEO button and allows us to control the size of the video display window. In this article, we will show you how to use a free Joomla extension called Video Embedder to insert YouTube videos in your article simply by clicking on a button, then pasting in the URL of the video. Here is a direct link to this free responsive extension.

https://extensions.joomla.org/extensions/extension/multimedia/multimedia-display/video-embedder

Transfer the zipped folder to our website extensions folder. Then unzip the folder and install the button and the plugin separately with Extensions, Manage, Install.

Then go to Extensions, Plugins and enable the editor plugin so the button will work. Then enable the embedder plugin which is further down the list. Then click Save and Close. Now open our front page welcome article where we will put the video. We will open our Welcome Article and insert a two minute video that explains the benefits of Joomla. Here is the link to the video.

https://www.youtube.com/watch?v=Qjnc0H8utks

First, put in a couple of line breaks where we want out video to be inserted. Then click on the Embed Video button at the bottom of the workspace. We do not put the full URL in this box. Just the Youtube ID number which is Qjnc0H8utks

01

Then click Save and Close and view our Home page.

02

This is a very easy way to embed a video into an article. However, it has one drawback in that the video takes up the full width of the screen and there is no way to make the video smaller. If you would like to display the video in an article in a smaller box, the best available option is OSYoutube Free. Here is the direct link in the Joomla Extensions Directory:

https://extensions.joomla.org/extensions/extension/social-web/social-media/osyoutube

Click Download. Then enter your email address to get a Download link. Click on this link. Then transfer the tool to your website extensions folder and upload it to your site using Extensions, Manage, Install. Then go to Extensions, Plugins and open this tool to review its settings.

03

By default, any Youtube URL you insert into your article will be displayed in a box that is 425 pixels wide and 344 pixels high. You can change this to whatever you want. The only problem with this tool is that it will display EVERY Youtube video in a box – even videos where you only wanted to display the link to the video.

Thankfully, there is a way to display some videos in boxes and others in links with this tool. Change Ignore HTML Links from No to Yes.

This will cause the tool to only place a box around Youtube URL’s where the link tag has been broken (in other words the URL is only in plain text rather than as a link).

To see how this works, change Ignore HTML links from No to Yes. Also change Responsive from Yes to No (otherwise the video will once again take up the full width of the screen).

04

Then click Save and Close. Then go to any article, enter a couple of line breaks to create some space for our video and copy/paste the following.

To learn more about Joomla, please watch this 2 minute video.
https://www.youtube.com/watch?v=Qjnc0H8utks

Then click Save. Because this is an actual link, what is displayed on the front end of our site is the following:

05

Now go back to the article edit screen and break the link by selecting it, then clicking on the Unlink icon in the JCE Editor menu.

06

You will see the text change from blue to black confirming that the link is now merely a text URL rather than an actual link. Click Save to save the article. The video now displays in the front end in a little box:

07

Your guests can start the video by clicking on it which will reveal a button to make the video full screen while staying at your site. There is also a button allowing them to watch the video on the Youtube site.

Because this tool puts the video in an “iframe” centering the video can be a challenge because we need to center the entire iframe. This cannot be done with the JCE editor. Instead, we need to add the following to the Template, Edit, Custom tab:

iframe { display: block; width: 500px; height: 300px; margin: 0 auto; border: 0;}

Here is the result:

08


Now that we know how to place a video in an article, in the next chapter we will cover how to place a video in a module.
As we saw in the last section, slideshows are normally placed inside of special boxes which Joomla calls modules. In the last section, we added the Unite Nivo Slider to create a slideshow in a module on our home page. But there may be times you want to add a slideshow to one of your articles. In general, articles go in the main content area of your template and modules go into module positions that are outside of the main content area of your template. Thankfully, there is a free Joomla extension called Modules Anywhere that we can use to place a slideshow inside of a module and then place that module inside of any article.

The steps are pretty simple. First, we create a new slideshow module by copying our original slideshow module. If we want to use different images, we create a new slideshow category and then assign a new folder of slides to this new category. Then place the new category ID number in the new slideshow module. In this article we will go over these steps. We will assume that you have already downloaded the Unite Nivo Slideshow and followed the steps in the last section to create a slideshow.

Download and Install the Modules Anywhere extension|
Go to the Joomla Extension Directory and click on Core Enhancements, then coding and scripts. Then click on Modules Anywhere. http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/embed-a-include/6402


Modules are boxes used by Joomla to display functions such as slideshows and forms. This extension allows you to place any module inside of any article simply by clicking on a button – just like you were inserting an image into an article.

Click on Download to download the free version of this extension to your computer. Then go to your extension manager and upload it to your website.

After uploading Modules Anywhere, there will be two Module Anywhere plugins installed, one that allows displaying the modules in the system, and another plugin that places a button on the bottom of the editing window that will insert the module into an article. Both plugins will be automatically enabled, so you don't have to enable either of them.

Create a Duplicate Copy of your Existing Slideshow Module
Next, create a copy of your slideshow module. Go to the Module Manager, select the slideshow and click Duplicate. Then publish the new module. For simplicity, we will use the same slides and slide category we used for the front page slideshow. Go to the front end of your website right now and you will see two copies of your front page slideshow. The new slideshow must be published for it to be visible in an article. But it does not need to be published in a position on your current active template. Open the duplicate slideshow and put it in a position on a template that you are not using. We will put it in the Top position of the BEEZ3 template.


Insert the new slideshow module in an article
Next either create a new article or open an existing article to place the slideshow in by going to the Article Manager. We will place this slideshow at the end of the last article we created which was article 6.1 Create a Front Page Slideshow. After you open this article, scroll to the bottom and you will see a new button called Insert Module.


01

Place the cursor at the bottom of the article where we want the Slide show module to go (just as you would do for inserting an image). Then click the "Insert Module" button at the bottom of the page. This will bring up the list of Modules in your Module Manager:

02

Set Show Title to No. Then scroll down to the new Article Slideshow and click on it. You will then see the code inserting the module in the editing window. You won't see the actual module.

03

Then click on SAVE and Close. If you made a new article for your slideshow, the final step is to add a new menu item so we can view the new page to make sure the slide show appears the way we want. As we inserted the slideshow into an article with a menu item, simply click on the menu item to view the slideshow in the article.

04

Now that you know how to insert a module into an article, in the next article we will discuss how to embed a You Tube Video in a Joomla article.

Here is a video about Joomla. Here is the link to the video. Note that we can display this link without actually displaying the video.

https://www.youtube.com/watch?v=Qjnc0H8utks

Here is the actual video:

https://www.youtube.com/watch?v=Qjnc0H8utks


In the next article, we will describe the tool we used to insert this video in this article.
A front page slide show is one of the easiest ways to turn your static website into a dynamic website. Ideally, your slideshow should combine text with images. Sadly, most Joomla slideshows lack an easy way to add foreground text over background images. In this section, we will show you how to add a free Joomla slideshow which not only allows you to combine text over images, but to control both the color and font size of the text to match your slides and your website.

The structure of a modern website includes a header at the top of the page with an image and a slogan which tells the viewer what your website is about. Think of the header as being like the cover of your book. Below the header is a horizontal main menu which acts as a Table of Contents for your website much like nearly all books begin with a Table of Contents.

01

Below the main menu is a slideshow which has two important functions. First, because it is constantly changing, it brings life to your Front Page. Second, it can draw the viewer in to your website by offering a visual summary of why the viewer should spend more time reading the pages on your website. The slide images and text are a listing of the features and benefits of your website.

Putting a slide show on your HOME page is one of the best ways to get viewers to spend more time on your website. A slide show with its rotating images changes your website from a static site to a dynamic site. A slide show uses a series of images to create a visual story which will tell viewers what your website is all about and why they should recommend your website to their friends.

A slideshow that combines pictures with text is even more powerful. Below the Slideshow, there are typically three feature boxes which go directly to the three most important or unique features on your website. These three boxes often include a link which allows the viewer to sign up for your free newsletter or post a question on your community forum. These feature boxes are then followed by the main content of the HOME page. The first article on the HOME page is typically the Welcome Article:

03

In this article, we will describe how to add the Front Page slide show. We will begin by adding a free extension called Unite Nivo Slider – a free extension which is simple and allows easy addition of text in front of images. To download the Unite Nivo Slideshow, go to the Joomla extension directory,
http://extensions.joomla.org/

Scroll down the page and click on Photos and Images:
http://extensions.joomla.org/extensions/photos-a-images

Then click on Slideshows. Then click on Image JQuery Slideshows. A leading option is the Unite Nivo Pro. This is a commercial extension. But it is very cheap at only $12. To use a free simple version of this slideshow, scroll down the page to the Unite Nivo Slider. Click on Unite Nivo Slider to go to the extension page:
http://extensions.joomla.org/extensions/photos-a-images/slideshow/image-jquery-slideshow/20330

A slideshow is a great introduction to your website. The problem with most free Joomla slide show extensions is the difficulty for adding text over images. This simple extension is one of the best at combining text over images in a simple format. The Unite Nivo Slideshow is a responsive slider meaning it displays well even in mobile devices. The slideshow also has the ability to display inside of an article. Click on the DEMO to see the slideshow. Then click on Download to download the free slideshow component and module.

Next transfer these two extensions from your download folder to your website extensions folder. Then log into your Joomla Control Panel and go to Extensions, Extension Manager to upload the component and then the module to your website. Then click on Components, Unite Nivo Slider.

04

Click New to create a new slider.

05

Give the slideshow a title. Then click Save and Close.

06

Create your Slideshow Background Images
Unite Nivo Slider is a responsive slideshow in that the images automatically get smaller as the browser window gets smaller. But you should create the slideshow for the maximum width of your template. We have set the Design Control template to have a maximum width of 980 pixels.. Subtracting 20 pixels of padding on the right and left sides of the screen, this means our slideshow images should be about 940 pixels wide. Leave room for a small border on the sides and top and a bigger black border on the bottom to display readable text.


The height of each slide should be about 250 to 300 pixels. All slides should have exactly the same height and width. After saving your images be sure to optimize all of them by reducing the file size to under 100 KB each. Here is the first image in our slideshow. It is 940 pixel wide and 250 pixels tall.

07

How many slides should you create?
Studies indicate that most viewers will decide within one minute whether to continue viewing your website. The front page slide show is like the introduction to a book. You have one minutes or less to convince the viewer that your website is worth their time. Think of this as 60 seconds. At 6 seconds per slide, you have about 10 slides to present your case. It is actually less than this since your first slide is a Welcome Slide. If you had 9 sentences with 9 images to convince a viewer to invest more of their time visiting your website, what would be the 9 subjects? What are the 9 most unique and important aspects of your website? Be sure to end the slideshow with a “call to action” slide. For our Create Your Own Interactive Website, the most important reasons you should consider reading our website are...


Connecting People… Our goal is to change the world by making it easier for everyone to form online communities – using free open source tools!

Start with a Solid Foundation… We build our Interactive Website on the Joomla framework - one of the world's most secure and well organized web building platforms.

Build your website using simple interfaces… no need to waste time trying to learn complex computer programming.

We use a Flexible Template... that allows you to place any content in any location on any web page and change font and background colors with just the click of a button.

Add your own custom header image and slogan in a matter of minutes.

Share Your Ideas… Learn how to build your own community blog and connect it to Facebook.

Add a free responsive slideshow….with images that adjust to display correctly on any computer screen, any tablet or mobile device.

Organize Interactions… With an automated Feedback System to encourage questions & suggestions – and insure all comments are answered in a timely fashion!

Let's Get Started! Whether your goal is to build a local community or start your own online business, we can help you create your own interactive website!

After deciding on the text message of our slideshow, we need to create an image to act as a background image for these 9 sentences.

08

Upload Your Slideshow Images to the Joomla Media Manager
Once you have made your slideshow images, go to Content Media Manager and create a folder for your slides called frontpage_slideshow. Then upload your images to this slideshow. It is useful to include the dimensions of the images in the image file name. But remember that image file names must be lower case with no spaces. Here our images after being loaded into the media manager.


09

Create Slides and Add Text
Go to Components, Unite Nivo Slider and click on Edit Slides.


10

Click New to add your first slide.

11

Click New to add your first slide.

Give your slide a title. Then click Select to select the first 940x250 image from the slideshow folder in your Media Manager. Then if you have not already included text in the image, give the slide some descriptive text. Then click Save and Close. Repeat this process for your remaining slides.

Enable the Module to Display your Slideshow

Next, go to Extensions, Module Manager and open the Unite Nivo Slider Module.

12

Hide the slideshow module title. Select the module position you want the slideshow to appear in. We have used the Design Control Top Row 2 for our slideshow. Then go to the Menu Assignment tab and select the pages you want your slideshow to appear on. Assign the module to just appear on the HOME page.

13

Then go to the General Settings tab and set the width and height of the slideshow. Raise the pause time to 6000 to 9000 to slow down the transition between slides to once every 6 to 9 seconds. For custom effects, select a transition effect such as Fade.

Resolving Javascript Jquery Problems
This is a common problem with many Joomla slideshows in that you may have multiple instances of Javascript programs that may conflict with each other. You may see a loading circle when your website loads and the slideshow images might not load. To solve this problem, go to the module under Advanced Options there are two settings you need to try turning on and off: Include jQuery 1.7 js and Include nivo_slider.js in. The reason you don't see your slider is because of a js collision meaning your site is trying to load jquery twice. These two settings do the work 90% of the time.

If the slideshow still does not show for you, in the modules advanced settings enable the option to Add JS to body. This will load the necessary javascript after jquery is loaded, and the problem should be resolved. If there are any additional problems, enable the jQuery No Conflict option.

Click on the Advanced Tab. Set Jquery for Yes. Nivo_slider.js for Body and No Conflict Mode to No.

If the first slide shows, but not the rest, on the Module Edit, Appearance Settings tab, set Control Nav to True and Direction Nav to False.

Recheck all of the module settings. Clear your browser cache and reload the page. Then view your new slideshow. We now have a slide show in a module on our Home page.

14

In the next article, we will review how to add a slide show to an article. Keep reading to find out how it is done!