JPLGC Pictures

Table of Contents
Introduction
Step 1: Collect the Images to be Added
Step 2: Create a Folder On The Web Site For The Image Files
Step 3: Copy The Image Files To The Folder
Step 4: Create A PHP File That Uses Galleria To Display The Images
Step 5: Modify The Content File "pictures.txt"
Configuring Galleria
Miscellaneous

Introduction

Pictures from JPLGC activities are displayed on the club web site. This document describes the steps to add a collection of pictures (image files) to the web site.

The image gallery program Galleria is used to display the pictures.

Summary of steps to add images to the web site are:

  1. Collect the image files to be added
  2. Create a folder on the web site for the image files
  3. Copy the image files to the folder
  4. Create a PHP file that uses Galleria to display the images
  5. Modify the content file "pictures.txt"

Step 1: Collect the Image Files To Be Added

Collect the image files you want to display. JPG and PNG files work best.

The downloading of images is slowed by very large images files. To speed up the downloading, scale-down, trim, and crop image files.

Step 2: Create a Folder On The Web Site For The Image Files

Create a sub-folder under the folder "./pictures". Each sub-folder should have a meaningful name to distinguish it from the other folders. For example, "pistol_mar_20_2010".

Nothing but image files should be placed in the sub-folder.

Note: You can use a FTP client to create the sub-folder.

Step 3: Copy The Image Files To The Folder

Use the FTP client to upload the image files to the sub-folder.

Nothing but image files should be placed in the sub-folder.

Step 4: Create A PHP File That Uses Galleria To Display The Images

A PHP file is placed in the folder "./pictures" which activates Galleria to display images. Each sub-folder containing image files should have its own PHP file. The PHP file should have a name related to the sub-folder. For example, "pistol_mar_20_2010.php".

Note: To simplify PHP file creation, copy an existing file and modify it.

The following PHP file uses Galleria to display images in a specific sub-folder. Modify the area marked in bold. The area is the name of the directory contaning the images to be displayed. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name='keywords' content=' JPLGC, JPL Gun Club ' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="./galleria/src/galleria.js"></script>

<style>
/* any custom CSS will override the theme */
body
{
  background-color: #f0f0f0;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 1.2em;
}
/* enlarge the thumbnails */
.galleria-thumbnails .galleria-image{width:90px;height:60px;}
.galleria-thumbnails-list{height:60px;}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right{height:55px;}
</style>

<title>JPL Gun Club</title>

</head>

<body>

<div id="images">
<?php 

  $dirname = "./pistol_mar_20_2010";

  if ($dir = opendir($dirname))
  {
    while (false != ($file = readdir($dir)))
    {
      if (($file != ".") and ($file != ".."))
      {
        echo "<img src=\"$dirname/$file\" />\n";
      }
    }
  }

?>
</div>

<script type="text/javascript" charset="utf-8">

  // Load fullscreen theme

  Galleria.loadTheme('./galleria/src/themes/fullscreen/galleria.fullscreen.js');

  // activate galleria

  $('#images').galleria({
               image_crop: false,
               frame_color: '#000000',
               transition: 'slide',
               hide_dock: false,
               extend: function() { this.$('info,counter').hide(); }
               });

</script>

</body>
</html>

Step 5: Modify The Content File "pictures.txt"

Modify the content file "pictures.txt" by adding a link to the PHP file.

Note: Content files are described elsewhere.

Configuring Galleria

The Bottom of Images Is Hidden

In step 4 the Galleria option "hide_dock" is set to "false". This means the bottom of each image is covered by the thumbnail images. Setting "hide_dock" to "true" will hide the thumbnail images until the cursor is moved to the bottom of the frame.

Image File Names

The PHP code in step 4 reads image file names from a folder and generates HTML. Image file names can be "hard coded" into HTML and PHP not used at all. For example:

PHPHTML

<div id="images">
<?php 
 $dirname = "./pistol_mar_20_2010";
 if ($dir = opendir($dirname))
 {
  while (false != ($file = readdir($dir)))
  {
   if (($file != ".") and ($file != ".."))
   {
    echo "<img src=\"$dirname/$file\" />\n";
   }
  }
 }
?>
</div>


<div id="images">
  <img src="./pistol_mar_20_2010/img_01.jpg" />
  <img src="./pistol_mar_20_2010/img_02.jpg" />
  <img src="./pistol_mar_20_2010/img_03.jpg" />
  <img src="./pistol_mar_20_2010/img_04.png" />
  <img src="./pistol_mar_20_2010/img_05.png" />
</div>

I Only Want To Use HTML, Not PHP

a. See the previous information to remove PHP code
b. Rename the file from "*.php" to "*.html"
c. Copy the HTML file to the "./pictures" folder
d. Modify the content file "pictures.txt" by adding a link to the HTML file

Miscellaneous

This HTML File

This HTML file is "hard coded" and not created dynamically. This makes printing the file easier. (No extra "stuff" printed, missing files not a problem, etc.)