Questions answered by this recipe
- Can I add image carousels/slide-shows to my Home-page, or any page for that matter?
- Can my slide show automatically find every image in a particular directory?
- Can I use the image names to sort display order and also to set display names?
- Can I do all this with one line of Markup?
All sections are optional, you can remove those that do not apply to your recipe, and add new ones.
Simple Markup to build an Image Carousel from contents of a directory/folder
I wanted an image Carousel for a home-page, but I wanted it to be easy to update over time with different images.
This Markup identifies a single directory in your Wiki's domain and populates the Slide-Show/Carousel from all the
images in that directory. (.jpg, .jpeg, .png, .gif)
Contents are alpha-numeric sorted for display, and there is even code to allow you to set sort order but not display it:
03_-_Mallorca_Vacation.jpg would sort as the third image, and be displayed with the title,
"Mallorca Vacation" on the slide.
Extract the files from Carousel.zip
You will need to edit one line in the carousel.php file to identify your pmwiki URL.
The file is commented to make this easy to find.
Then place carousel.php in your cookbook directory.
(On a standard installation something like www.exampledomain.org/pmwiki/cookbook/ )
Edit your config.php file:
(Should be in your Wiki local directory something like www.exampledomain.org/pmwiki/local/config.php)
Add the following lines:
## Kirk's Image Carousel recipe include_once("$FarmD/cookbook/carousel.php") ;
Add the contents of the carousel.css file to your local.css file:
(usually found at www.exampledomain.org/pmwiki/pub/css/local.css)
Copy and paste the contents of the carousel.css file to the bottom of the local.css file
Now you're ready to use the Carousel Markup!
You might want to edit the carousel.php to comment out lines if you don't want the image 3/10 to display in the corner. Likewise, the image title can be displayed on the slide or not...
Obviously if you don't like my next and previous buttons, you would need to edit the css code.
The following strings can be translated in an XLPage:
Make sure you have a folder/directory with the images you want to use.
I keep a directory just for media files, often with subdirectories.
Then you just need a simple line of Markup in your page with the relative path to that directory.
Relative to your root pmwiki installation (Where the pmwiki.php file sits.)
To do / some day / maybe
- Add code to automatically rotate slides
- Add code to automatically embed the css file
If you have future plans or wishes for this recipe.
Change log / Release notes
If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".