PmWiki

PmWiki | Skins? | Photo Gallery

Parchment < Skins > PhpNet   (talk | users | test page | RWD? | set as default | unset | validate: HTML, CSS)

Summary: PhotoGallery is focused around the presentation of pictures, images, and photographs. It provides a basic tab navigation, and markup to ease the creation of albums. Designed to be used in conjunction with pmGallery and Galleria.
Version: 0.4.1 (25-Feb-2016)
Prerequisites: PmGallery (recommended), Galleria (recommended)
Status: Active
Maintainer: DaveG
Categories: Skins, PHP55
Download: ZIP or TAR
License: Copyright (c)2016 David Gilbert. This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License. Please retain the links in the footer.
Discussion: PhotoGallery-Talk
Users: +2 (View / Edit)

PhotoGallery is focused around the presentation of pictures, images, and photographs. It provides a basic tab navigation, and markup to ease the creation of albums. Designed to be used in conjunction with pmGallery and Galleria, basically providing a skin around your images stored in Google's Picasa. A dark colored skin, provides a selection of color options.

I'd love to know if you use this skin, or even if you like or hate it -- leave a comment!

Δ

Click to enlarge

Feature Summary

Demo

Since PhotoGallery is oriented around images, it doesn't look so great on the text oriented PmWiki! Full photo-oriented demo can be viewed at unphotographed.com.

Download and Installation

  1. Download the skin package (ZIP or TAR) and unzip it into your skins directory (usually pmwiki/pub/skins).
  2. Add the following to your local configuration file: 
$Skin = 'photogallery';
  1. Optionally add the following to your local configuration file: 
$WikiTitle = 'WIKI_TITLE';
$SkinColor = 'orange';
  1. You'll probably want to use PmGallery to pull images from Picasa (rather then using your own storage), and Galleria to show images in a carousel. Follow installation instructions on those pages. At the end, you should end up with line like this in your confi.php file.

Note: Not critical, but the Galleria dark theme works very well with PhotoGallery (that's the $galleria['skin']='dark'; line below. 

$DefaultName='Home';
$DefaultGroup='Unphotographed';

$pmGallery['user'] = 'USER_NAME';
$pmGallery['wrapper'] = 'ul>li';
$pmGallery['imagesize'] = '576';
$pmGallery['mode'] = 'linkdirect';
include_once("$FarmD/cookbook/pmgallery/pmgallery.php");

$galleria['list']='.pmGalleryWrapper ul';
$galleria['image']='#pmGalleryImage';
$galleria['scroll']='5';
$galleria['visible']='6';
$galleria['skin']='dark';
$galleria['carousel'] = true;
$galleria['history'] = true;
include_once("$FarmD/cookbook/galleria/galleria.php");

Helper Markup

Albums

PhotoGallery comes with a markup that generates the HTML required for Albums. Note that album covers will be displayed at 85px x 85px -- so select images that are close to square for album covers works best. 

(:album link="pmwiki_link" thumb="url_to_image_thumbnail" title="title" desc="description":)

Images

After clicking an album link, you'll probably want to show a carousel of images. If you're using PmGallery and Galleria, with config.php settings described above, the easiest way to get a list of images is by passing some parameters to the provided template Site.PhotogalleryTemplate: 

(:include tag="cars,trucks,horses":)

That will pull all images from the user defined in the config.php, with the tags, and generate a carousel of images.

You can also procide other parameters to override those in config.php:

Color Switching

You can switch the default blue color theme site wide by updating your config.php with: 

$SkinColor = 'red';

Or simply pass a parameter: 

?color=orange

The included color schemes are: blue, green, orange, red, yellow, lightblue.

If the existing color themes don't do it for you, simply:

  1. Copy one of the existing color files, named color-XXX.css in the PhotoGallery/ directory. For instance color-pumice.css.
  2. Change the colors appropriately.
  3. Add this line to config.php, replacing the colors with your new one(s). The file name must match the name of the color you add to the array: 
$ValidSkinColors = array('pumice', 'pink');
  1. Set the skin color in config.php 
$SkinColor = 'pumice';

Page Layout

HEADER uses $WikiTitle
TABS includes {$Group}.SiteNav {$Site}.SiteNav
MAIN

no pages included

FOOTER no pages included ACTION MENU includes {$Group}.PageActions {$Site}.PageActions

Header

Uses $WikiTitle set inside config.php. 

$WikiTitle = 'Unphotographed';

Top Navigation Tabs

The other likely change you'll want to make is to add links to the top navigation bar. In this case edit Site.SiteNav or Group.SiteNav, and use a list format as below: 

* [[Blog | blog]]
* [[About | about]]

The entire menu structure can be left/right/centered by adding a styling class ("left", "right", "center"): 

* %apply=list class=right%[[Blog | blog]]
* [[About | about]]

Right Sidebar

NOTE: PhotoGallery does not include an area to display the information usually stored in Site.Sidebar. This is by design, as the primary navigation used by the skin is the upper tabs, and albums.

Removing Page Sections

Sections can be removed from specific pages or the site-wide: 

SetTmplDisplay('PageXXXFmt', 0);   #XXX: Header,Action,Tabs

FAQ

Browser Compatibility

This is an incomplete listing of the browsers which have been seen working with this skin.

Known Issues

None known.

Change Log

0.4.1 (25-Feb-2016)

0.4.0 (12-Jun-2010)

0.3.0 (21-Dec-2008)

Contributors: DaveG

0.2.0 (21-Dec-2008)

Contributors: DaveG

0.1.0 (8-Dec-2008)

Contributors: DaveG

Credit

Comments

Leave a comment on the comments page.

User notes +2: If you use, used or reviewed "PhotoGallery", you can add your name. These statistics appear in the Skins listings and will help newcomers browsing through the wiki.

Original design adapted by David Gilbert, powered by PmWiki