11. To Add a Slide Show to the Website

03 Tháng Sáu 201511:47 CH(Xem: 3549)
11. To Add a Slide Show to the Website
51Vote
40Vote
30Vote
20Vote
11Vote
32
blank (Download PDF)

To Add a Slide Show to the Website

Slide show is group of pictures that will be shown to the viewer one after another in a predetermined order. Pictures in a slide show should normally be of the same size. The size of the pictures should not be too large. Large pictures take more time to be downloaded to viewer’s computer.

In the following example, you will add a slide show with 8 pictures to the English section of your website. The name of the slide show is "Paths of Life". Here is how to do it.

A. Login the Control Panel as usual.

B. Click on Content Manager on the Top Menu, then select “Slide Show” in the drop down list.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

C. Select which language site to manage.


You are going to add a slide show to the English site, so you will click on the box near the upper left corner and select "English Site".

The list of existing slide shows will appear. The list might be empty like this.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

D.
Click the "Record Edit" button near the upper right corner of the screen. A blank record will appear.


E. Click the "New" button if the record is not blank. Otherwise, go on to the next step.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

F.
Please focus on the 3 essential data: Title, Category and Slide Show Images.


    1. Title. Fill in the title of this slide show. In this example you will fill “Paths of Life”. It is required.

    2. Category. Select the category that this slide show belongs to. It is required.

    3. Slide Show Images. Insert the pictures of this slide show into this box. It is required.

G. Let us insert our pictures into this box.

    1. Click the “Insert/edit Image” icon among the editing tools. It is the icon with a tree. The “Insert/edit Image” screen will appear.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    2. Click the icon at the end of the “Image URL” box. You will see the files in your web server. These files are organized into folders depending on their purposes. Our pictures belong to a slide show; you had better upload them into the folder Slide Show. Since you may have more than one slide show, you must create a subfolder inside the Slide Show folder to store the pictures for this slide show.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    3. Click on “Slide Show” on the left panel. You will enter the file area for all your slide shows. It is quite empty at this moment.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    4. Click "Create Folder" to create a folder for this slide show. A small screen will appear.


    5. Type the name of the new folder in the box. In this example, you will enter "Paths_of_Life".

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

It is recommended that you do not use space or special characters in folder name. Therefore, “Paths_Of_Life” should be used instead of “Paths Of Life”.


    6. Then, click the “Create Folder” button.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    7. Double click on the folder name you just created to open this folder. You will that it is empty. You will load your picture files in here.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    8. Click the "Upload" button. The “Upload” screen will appear.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

NOTES: On the right side of this screen there are some options you might want to use.


Rename if filename exists” is checked, as default. It means the program will rename the file if this file has the same name as another file in the web server.

If you want to replace the existing file with the file you are uploading, click “Overwrite if name already exists”.

Check the box at "Retain original image" if you want the prgram to keep the original file you upload.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

Check the box at "Slide show standard size" if you want the program to resize your pictures to the standard size for slide shows. You can change the standard size of slide shows to what you like in the System Tools.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    9. Click the "Add" button. You will see the files in your computer. If you want to see the thumbnail images of your pictures, click the icon at the end of the “Look in” box. Then, select “Thumbnails” in the drop down list.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    10. Select the files you want to upload. You may select a group of files to upload. In that case, click the first file, and hold the “Shft” key on your keyboard; then click the last file. Another way is to click the first file and hold the “Ctrl” key on your keyboard; while still holding the “Ctrl” key, click the next files until you have selected all the file you want to upload.


    11. Then, click the “Open” button. The Upload screen will reapear. You will see the list of files ready to be uploaded.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    12. Click the “Upload” button.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    13. The files will be uploaded to the web server. When transfering is completed, you will the the message “All Files has been uploaded”. Click “OK”.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    14. Then, click the “Close this window” to exit the upload screen.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    15. You will be asked to confirm. Click the "Yes" button.


    16. You will be back at the file area of your web server and see the list of image files just uploaded to the folder Paths_Of_Life.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    17. Click on the square boxes on the same line of the files you want to insert into the slide show. Then, click the "Insert" button at the right bottom of the screen.


    18. You will be back to the Insert/edit Image screen. This time, the Image URL box is now filled with the path to the images.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    19. Next, you may select a frame for all your pictures in the slide show. Click the icon at the end of the “Image Frame” box. If you do not select any frame here, your pictures will be shown without a frame.


You don’t need to concern about other boxes in this screen.

    20. Finally, click the "Insert" button at the left bottom. You will be back to the record of your slide show.

The “Slide Show Images” will now be filled with small images representing the pictures in your slide show. If you want to change the order of a picture. Click an hold the mouse button on the picture and drag it to the new place.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    21. Next, you will need select a thumbnail picture for your slide show. Click the "Browser" button at the end of the "Thumbnail Image" (markeb with a blue rectangle in the above picture).You will see the files you have just uploaded for the slide show. Whenever you click on a file, a small picture will be shown at the lower left corner. This will help you find the picture you want for your thumbnail. When you have found right picture, click the small box on the same line with the filename.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    22. Then, click the "Insert" button at the right bottom of the screen. You will be back to the record of the slide show. This time, the “Image Thumbnail” box is filled with the path to the thumbnail picture. A small picture is also shown above the box.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    23. Click the "Add" button at the top or bottom of the screen. The message "Data Added Successfully!" will appear near the upper left corner.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    24. Now, go to your website to check if the slide show has been added to the category “Photos”. You may need to refresh the web page. Click the "Refresh" button of your browser, or hit the "F5" key on your keyboard.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    25. If you see the thumbnail and the title of your slide show, it is OK now. You will also need to click on the title of the slide show to view the content of this slide show.


Supporting managing responsive web design vnvn cms 2.5 add a slideshow

    26. Now, click on the first picture, or any picture to view the normal size of this picture.While viewing this picture you may click “Next” button, or the “Prev” button when they appear to view to another image. You can click on the “Play” button at the bottm of the picture to start the slide show from this position.

Supporting managing responsive web design vnvn cms 2.5 add a slideshow

Gửi ý kiến của bạn
Tên của bạn
Email của bạn