folioGallery Installation and Instructions



  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. 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: You must keep file and directory structure on your server same as contents of foliogallery-master folder, in order not to mess with file and directory paths.

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.


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

Stand Alone Examples Download & Comments

complete gallery

  1. Paste <div class="folioGallery" id="folioGallery"></div> to your page's html, where you want your gallery to appear.
  2. Both ID and CLASS attributes must be folioGallery

individual album

  1. Paste <div id="SOME_UNIQUE_ID" class="folioGallery" title="Las Vegas Strip"></div> to your page's html, .
  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.

descriptions for album

  1. To add descriptions to an album or image, create or edit a file called descriptions.txt in your album's folder and add 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