5th August 2009 Page 1

Creating a web-based slideshow of pictures (using Irfanview) George Weir george.weir@cis.strath.ac.uk This ‘How to’ describes the process of creating a web-based slideshow from a set of existing digital photos using the freely available Irfanview software package. The resultant slideshow can be placed on personal web-space and made available over the Internet. It can also be run from local disk, USB memory, CD or DVD. We assume that you already have Irfanview installed on your system. If not, you can obtain a copy directly from http://www.irfanview.com or from a variety of free software distribution web sites. 1. Basic steps

1. Create a new folder that contains only the photos you want to include in the web slideshow.

2. (If necessary) resize the pictures. 3. Create the slideshow. 4. Upload the folder to your Web space. 5. Tell people how to reach your slideshow (i.e., publish the web address).

2. Resize the photos

1. Start Irfanview. 2. Type the letter ‘b’ to start the batch mode dialogue. This should produce the

display shown in Figure 1, below.

Figure 1: Irfanview batch mode dialogue

3. Using the ‘Look in’ menu (see Figure 1), select the folder that contains your

slideshow photos (in this case, ‘example’). The change should be reflected in the display (Figure 2).

‘Look in’ menu

5th August 2009 Page 2

Figure 2: Select the target folder

4. Click the ‘add all’ button to select all the photos in the target folder. This

should result in the change shown in Figure 3.

Figure 3: Select all of the target photos

We now have a variety of actions that can be applied to the selected files (in a batch operation). In what follows, I assume that all of the original pictures are the same size and that this is larger than the required size - most digital cameras produce larger files than we would want to publish on the web, so the batch operation is to resize all of the pictures. As well as changing the display size this reduces the data size of each file and makes it quicker to load across the web. Before proceeding, ensure that you have backup copies of your original photo files (we are about to alter the files in our example folder).

5. Ensure that the ‘Batch conversion’ option is selected (Figure 4).

Figure 4: Select ‘Batch conversion’

‘example’ folder selected

‘add all’ button

All files selected

Select ‘Batch conversion’

Select ‘JPG’ as output format

5th August 2009 Page 3

6. Ensure that the output format is set to ‘JPG – JPG/JPEG Format’ (Figure 4).

7. Ensure that the ‘Use advanced options (for bulk resize…)’ box is ticked

(Figure 5).

Figure 5: Advanced options for batch resize

8. We now set the options for resizing the photos. Click the ‘Advanced’ button

(Figure 5). Don’t be scared by the large set of options that this produces (Figure 6) – we will use only a few settings from this dialogue.

Figure 6: Advanced options

9. Ensure that the ‘Crop’ option is unticked and that the ‘Resize’ option is ticked.

Also tick the options for ‘Preserve aspect ratio’, ‘Use resample function’ and ‘Don’t enlarge smaller images’ (Figure 6).

10. Set the required picture size to height of 800 and width of 640 (Figure 7). (This is a reasonable size for Web display. If it proves to be too big, you may wish to reduce this to 640 x 480).

Figure 7: Set required size

Use ‘advanced options for

batch resize’

‘Advanced’ button

‘Resize’ option

Other required options

‘Crop’ option

Set size in height and

width

‘Overwrite existing files’

5th August 2009 Page 4

11. Finally, under the Miscellaneous options tick the box for ‘Overwrite existing files’ (Figure 7). Then click the ‘OK’ button to close the advanced options dialogue box.

12. On the main Irfanview ‘batch conversion’ dialogue, ‘set the output directory for the result files’ by clicking on the ‘Use current ‘look in’ directory’ button (Figure 8). Then start the batch process by clicking on the ‘Start batch’ button (Figure 8).

Figure 8: Set output directory

13. The batch conversion will process each file and display a status message for

each step (Figure 9). If all has gone to plan, your original files have now been resized in situ and we can proceed to the next section of the Web slideshow creation.

Figure 9: Batch process status display

3. Create the slideshow

1. From Irfanview, type ‘t’ to start the ‘Thumbnails’ program and browse to the folder that contains your photos (Figure 10). (Note: we do not use the ‘Slideshow’ option available from the ‘File’ menu since this is for running live slideshows on the local machine.)

‘Use current ‘look in’

directory’

‘Start batch’ button

5th August 2009 Page 5

Figure 10: Irfanview thumbnails program

2. From the ‘Options’ menu choose ‘Select all’ (or simply type ‘ctrl-a’) then from

the File menu choose ‘Save selected thumbs as HTML file…’ (Figure 11).

Figure 11: Save selected thumbs as HTML file

3. This produces another large dialogue but we will use only a few of the

available options (Figure 12).

Figure 12: Create HTML file

4. (i) Set the ‘Main result HTML file name’ to ‘index.html’. (ii) Set the destination

folder to the same folder that contains your photos, then (iii) click the ‘Create HTML slideshow’ option, and (iv) click ‘Start’ (Figure 13).

5th August 2009 Page 6

Figure 13: Set options

5. This creates the necessary HTML file in the background (there is no obvious

activity or feedback at this point). A new file (called ‘index.html’) will now exist in the folder that contains your photos. You can test the slideshow by browsing to this folder and double-clicking ‘index.html’. The slideshow should start in your default web browser (e.g., Figure 14).

Figure 14: Example slideshow

6. Conclusion 1. Upload the folder (including the photos and the index.html file) to your Web

space and tell people how to reach your slideshow (i.e., publish the web address).

2. Alternatively, you can have the files on your local disk, a USB memory stick, a

CD or DVD. To run the slideshow, simply browse to the index.html file and double-click to start.

(i) Set main HTML file name (ii) Set destination folder (iii) Tick ‘Create HTML slideshow’ (iv) Click ‘Start’