Post navigation

How to create a WordPress carousel from images and videos inside a web folder

This tutorial will guide you how to create a WordPress carousel from images and videos inside a web folder. It will also show you how to dynamically define the web folder in the carousel shortcode so you can specify a different web folder on the post/page where the carousel is added.

In WonderPlugin Carousel, create a new carousel, in step 1, click the button "Import Folder".

In the "Import Folder" dialog, select the folder where you have uploaded the image and video files.

Please note, the plugin will only search files in the selected folder, it will not loop through its subfolders.

Step 3 - Add the carousel shortcode to a WordPress post or page

Save the carousel and add the generated shortcode to a WordPress post or page. For more information about how to use the plugin, please view the quick start tutorial: How to create a WordPress carousel.

An online demo is as follows:

Carousel

Cloud

Horse

Kitten

Lake

Lion

Mountain

Parrot

Sky

Wild

Zebra

Step 4 - Use list.xml file to define extra title and description information

You can use an xml file to define extra information, for example, title and description, for the images and videos in the folder.

The name of the xml file must be list.xml and it must be placed inside the folder.

For example, the following xml file adds extra information for two items in the carousel.

The first item myimage.jpg defines title and description for the image myimage.jpg.

The second item myvideo-poster.jpg defines title and description for the video myvideo.mp4, because the image myvideo-poster.jpg is the poster image of this video.

Please note, you need to use xml key image to add extra information to an image/video in the folder, and the filename must match.

You can also dynamically define a folder in the carousel shortcode so you can specify a different web folder on the post/page where the carousel is added.

For example:

[wonderplugin_carousel id="55" data-importfolder="galleries/2018"]

Please note, the carousel itself must be an "Import folder" gallery, otherwise the attribute data-importfolder will not work. The value of data-importfolder should be the relative path to the WordPress root folder. If you don't know the value of your selected folder, you can goto the plugin, select the folder in the "Import Folder" dialog, and copy the value of the "Selected folder".