Discover FolioPages CMS, a free, open source and lightweight Content Management System.


A lightweight, free and open source, self hosted flat file PHP and JavaScript photo and file gallery that does not require a database and is easy to install. List all file formats from local directories, display images, play mp3 and mp4 files with HTML5 native player, embed Youtube and Vimeo videos.

As of V4.5, jQuery Library is no longer required.





  1. Download and expand the zip file to your computer.
  2. Upload the contents of 'foliogallery-master' to the root directory of your domain.
  3. For each album, create a subfolder in the 'albums' folder and copy your images into it.
  4. Make sure the 'albums' folder and all its subfolders have write permissions.
  5. Make sure the CSS file is referenced in the head section of your page and the JS file before the ending body tag of your html.
  6. To enable responsive view, you must have the following line of code in head (between ) section of your page's html:
    <meta name="viewport" content="initial-scale=1, width=device-width" />

NOTE: As of version 4.3, directory structure is changed. The foliogallery.php and foliogallery-img.php files do not reside on the server root, they are located inside the gallery main folder. The package contains of 2 folders that reside on server root: foliogallery and albums.

NOTE: Version 4.3+ uses htaccess files in order to prevent directory indexing, therefore Apache web server is required.

Adding Videos

  1. To add a video from youtube, simply add an image to your album's folder and name it utube-1234.jpg where 1234 is the id of the video in youtube.
  2. To add a video from vimeo, simply add an image to your album's folder and name it vimeo-1234.jpg where 1234 is the id of the video in vimeo.
  3. To add a mp3 or mp4 file, simply copy it to your desired album. For custom image, add an image to your album's thumbs folder and name it YOUR_VIDEO_FILE_PREFIX.jpg


  1. The Available settings can be adjusted in foliogallery-config.php file
  2. The following can be adjusted for resizing the gallery:
  3. Display Gallery/Albums in scrollable container(s) or in full
  4. Thumbnail width during thumb creation
  5. Sorting
  6. Show/Hide captions
  7. Show/Hide titles
  8. Show/Hide partial exif data if available


As of v4.40 it is possible to embed gallery or albums using a shortcode. To do this:
  1. Include the PHP function at the beginning of your page.
  2. Replace the FolioGallery "div" elements with a shortcode.
  3. Place page content in a PHP variable.
  4. Output page content using the PHP function.
See the example below or refer to the source code of foliogallery-demo.php file in the package:

// include the PHP function before page content
include 'foliogallery/foliogallery-functions.php';

// place page content in a php variable
$content = '
// display the gallery

// display "Videos" album
// display "Scenery" album
// display "Los Angeles" album
[foliogallery=Los Angeles]';
// print page content using the PHP function
echo foliogallery_shortcode($content);


Complete Gallery

Paste the following to your page's html, where you want your gallery to appear:
<div class="folioGallery" id="folioGallery"></div>
Or bypass the above and use a shortcode instead (see how to use Shortcodes):
Either of the codes above will output the following:

Individual Album

  1. Paste the following to your page's HTML:
    <div id="SOME_UNIQUE_ID" class="folioGallery" title="Los Angeles"></div>
  2. The title attribute is the subfolder name where images are located.
  3. The ID attribute can be anything but must be unique.
  4. The class attribute must be folioGallery.
Or bypass the above and use a shortcode instead (see how to use Shortcodes):
[foliogallery=Los Angeles]
Either of the codes above will output the following:

Descriptions As Of v4.3

  1. To add descriptions to an album or image, create a folder in your album directory named descriptions then add a file in this folder called descriptions.txt and add your descriptions to it.
  2. ALBUM description must be added on the first line like so: album;description of album;.
  3. Image description must be added like so: imagefilename.jpg;description of image; where imagefilename.jpg is the name of the file in your album.
  4. Each image description must be entered after imagefilename.jpg; (note the semicolon).
  5. Each description must be on a new line and must end with a semicolon

Stand Alone Examples