Close

FolioGallery

A self hosted, free and open source photo and file gallery for your website without a need for a database.

File Manager Plugin

Built using core PHP and vanilla JavaScript. Lightweight, responsive, configurable and customizable interface via CSS.
Download the File manager plugin for easier management of your files and albums. Supports all file formats.
Support for Youtube & Vimeo videos as well as local audio/video files which use the HTML5 native player for streaming.
Option to display complete gallery or individual albums in an inline scroller or a paginated block using HTML or shortcode(s).
Option to add descriptions to an image/album from a text file located in each album. Style your gallery from a CSS file.
Automatic thumbnail creation, a feature rich file viewer and a centralized configuration are among other features.

Requirements

  • PHP 5+.
  • PHP GD library (for automatic thumbnail creation).
  • PHP EXIF library if you want to display exif data info.
  • Apache web server to prevent directory indexing using a htaccess file. Not required if you have other security measures in place.

Installation

  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 are writable (required for thumbnail creation).
  5. Make sure the CSS file is referenced in the head section of your page and the JS file before the ending body tag.
  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" />

Configuration

  1. The Available settings can be adjusted in foliogallery-config.php file
  2. Please see this file for available options.

Youtube & Vimeo 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

Embedding 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):
[foliogallery]
Either of the codes above will output the following:

Embedding An 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

  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

Shortcode

It is possible to embed gallery or albums using shortcodes:
  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
[foliogallery]

// display "Videos" album
[foliogallery=Videos]	

// display "Scenery" album
[foliogallery=Scenery]

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

FAQ's

  • Q: Does the gallery scan multi level subfolders?
    A: The gallery scans only 1st level subfolders located within the "albums" directory. Each 1st level subfolder represents an album.
  • Q: How do I modify album or gallery settings?
    A: Available variables can be configured by editing the foliogallery-config.php file. Each variable is described in this file.
  • Q: Can I sort files by a specific criteria?
    A: Yes, files can be sorted by modified date or alphabetically from the config file.
  • Q: Is there a limit on how many files I can have in an album?
    A: No, the script does not limit the number of files. But your server may.
  • Q: How do I increase the width of FolioGallery container?
    A: Modify the ".fg" class in CSS file.
  • Q: How do I display paginated thumbnails instead of a scroller?
    A:
    - In foliogallery-config.php file set $show_inline variable to TRUE;
    - Set $thumbs_per_page variable to the number of thumbs you want to display in each block.
  • Q: Is it possible to create my own thumbnails manually?
    A: Simply copy your thumbnails to the "thumbs" folder in your album. If "thumbs" folder does not exist, create it manually. The software will only create thumbnails if they do not exist in this location.
  • Q: My images load very slowly, how do I speed them up?
    A: Large images require additional bandwidth and server resources. To speed up loading time, optimize each image. You may also use caching but poorly optimized images will still load slow the first time.