Prepare images for slideshow

The first step is to collect the images you want to include in the slideshow. For this tutorial, we'll be using these three images:

Images for your first slideshow

It would be ideal if all the images were the same size. If not, you can have the admin panel resize the images automatically. We'll discuss more about automatic resizing later in this page.

Creating a new slideshow

In order to create a new slideshow, click Slideshows on the top menu bar, and then click Add New.

Click Add New

This will open the Add New form.

Add new slideshow Form

Enter the title and the size of the new slideshow you will create.

The title is used in the admin panel only. Enter a meaningful title.

Enter a title

Now, it's time to specify the size of the slideshow. If all the pictures are the same size, then simply input the size of the pictures in pixels.

Enter a size in pixels

If all the pictures are not the same size, then you need to come up with a good size that will satisfy how you want to display the slideshow on web pages. To do so, you should understand how the size information is used in Fade-In Slideshow. The next section will explain two important facts about slideshow size.

Understanding slideshow size

Slideshow can shrink but maintains the aspect ratio

Suppose you have a slideshow whose size is 200px(width) × 100px(height), like shown below:

Slideshow 200px wide and 100px high

Consider putting this slideshow into the space that has a width of 100px.

The available space is 100px wide

Then the slideshow shrinks to 100px in width and it's height becomes 50px accordingly.

Slideshow can shrink

As shown in the example above, slideshow can shrink to fit inside an available space, however it's aspect ratio remains the same.

Uploaded pictures will shrink to fit in slideshow

Suppose you have a 100px wide and 50px high slideshow.

A 100px wide and 50px high slideshow

Consider uploading a 200px wide and 100px high image onto the slideshow, which is clearly bigger than the slideshow,

Uploading a 200px wide and 100px high image

The image will automatically get resized to 100px wide and 50px high to fit inside the slideshow.

The image will automatically get resized

In the above example, they may be different size but still have the same aspect ratio, 2 to 1.

Aspect ratio = 2 : 1

In the next example, we will consider a case in which the uploaded image and the slideshow have different aspect ratios.

Uploading an image with a different aspect ratio

Just like the previous example, the image gets resized to fit in the slideshow. However, it creates spaces on sides because they have different aspect ratios.

Different aspect ratios create spaces

You can upload the image without maintaining the aspect ratio, so the image will get stretched to fill the slideshow.

The image gets stretched without maintaining the aspect ratio