WP-Gallery2 Plugin

What is it?

WP-Gallery2 is a WordPress plugin that makes it possible to display your albums and images from your Gallery2 installation on your WordPress site. It uses the Gallery2 Remote Protocol to get the information about all the albums and their images and display them in a WordPress page or post according to the style defined in the plugin’s style sheets.

Features

• Display Gallery2 albums and images directly on your WordPress pages or posts
• Use the features of Gallery2 to organize your images in albums
• Format the albums and images displayed on your WordPress site with style sheets
• Includes two ways to display gallery images – Shutter Reloaded JavaScript and FancyBox
• Page Templates (see Templates section)
• Support for loading of gallery content through background AJAX calls

Difference between WP-Gallery2 and other gallery plugins

There are several other Gallery plugins and at least two of the are plugins which interact with a Gallery2 installation in some way:

• NextGen Gallery Plugin is an excellent gallery plugin that is pretty configurable, however, it had one major drawback – since it doesn’t interact with a Gallery2 installation, I would have to duplicate all the images and albums.
• WPG2 is a plugin which embeds your Gallery2 into your WordPress. In my experience, it just displays the Gallery2 pages into the WordPress pages. In order to make them flow and look nice, there are a lot of CSS changes that would need to be made.
• WP-Gallery-Remote looked like, essentially, the same plugin as I have created. The difference was that when I tried it, it didn’t work. It also seemed to require much more configuration.

Future Development

Some of the things that I plan on for the future versions of the plugin:

• Gallery widget
• Further integration with Gallery2:
  1. Update view counts when images a viewed
  2. Allow user logins and image uploads
• Thumbnail caching
• Album highlights (see “Shortcomings” below)

 Loading ...

Shortcomings

1. One of the main reasons why I wanted to develop a plugin is that I wanted to leverage the features of Gallery2, namely, the great way it allows users to organize their image into albums and sub-albums and the ability to pick “highlight” images (thumbnails) for each album in an album tree.
   Unfortunately, the Gallery2 Remote Protocol does not provide a way for me to know which one of the images in the album tree has been assigned as the “highlight” for each of the albums. Therefore, currently, the plugin uses the first image that it finds in the tree.
2. I would have liked to have the plugin handle video files as well, since Gallery2 allows you to upload, organize, and show video files. However, the Gallery Remote Protocol currently does not seem to return any data for those files.

Templates

The plugin supports the usage of templates to define how albums and images are to be displayed on the page, allowing the user to have pretty much full control of the look that the WP-Gallery2 page will have. Currently, there is only one template included with the plugin, which duplicates the default view (what you would get if you select “None” as the Template in Settings Page). The reason that the template duplicates the default view is that it (the default view) is pretty simple and, therefore, it would be simple to explain the template.

First, let’s look at the template file:

<!-- WP-Gallery2 Default Template -->
<div class="wg2-gallery">
  <div class="wg2-gallery-path">
    %ALBUM_PATH%
  </div> <!-- div class=wg2-gallery-path -->

  <!-- ==ALBUMS== -->
  <div class="wg2-albums">
    <h3>Albums</h3>
    <div class="wg2-album-list">
      <!-- ==ALBUMLIST== -->
      <div class="wg2-album">
	<a href="%ALBUM_URL%">
	  <img class="album_thumb" src="%ALBUM_THUMBNAIL%"
	       width="%ALBUM_THUMBNAIL_WIDTH%"
	       height="%ALBUM_THUMBNAIL_HEIGHT%" />
	    <h2>%ALBUM_NAME%</h2>
	</a>
      </div>
      <!-- ==ALBUMLIST_END== -->
    </div> <!-- div class=wg2-album-list -->
  </div> <!-- div class=wg2-albums -->
  <!-- ==ALBUMS_END== -->

  <!-- ==IMAGES== -->
  <div class="wg2-images">
    <h3>Images</h3>
    <p class="wg2-album-summary">%ALBUM_SUMMARY%</p>
    <div class="wg2-image-list">
      <!-- ==IMAGELIST== -->
      <div class="wg2-image">
	<a href="%IMAGE_URL%" class="shutterset_wp-gallery2">
	  <img src="%IMAGE_THUMBNAIL%" /></a>
      </div>
      <!-- ==IMAGELIST_END== -->
    </div> <!-- div class=wg2-image-list -->

    <!-- ==PAGELINKS== -->
    <div class="wg2-page-links">
      <!-- ==PAGELINK_PREV== -->
      <div class="wg2-page-link-prev">
	<a href="%PREV_LINK%">&lt;&lt; Prev</a>
      </div>
      <!-- ==PAGELINK_PREV_END== -->
      <!-- ==PAGELINK_NEXT== -->
      <div class="wg2-page-link-next">
	<a href="%NEXT_LINK%">Next &gt;&gt;</a>
      </div>
      <!-- ==PAGELINK_NEXT_END== -->
    </div> <!-- div class wg2-page-links -->
    <!-- ==PAGELINKS_END== -->

  </div> <!-- div class=wg2-images -->
  <!-- ==IMAGES_END== -->

</div> <!-- div class wg2-gallery -->

As you can see, it’s pretty much a HTML file except that is has some odd looking comments and some tags that look like will be replaced with something more meaningful. Well, that’s exactly what is going to happen.

There are two main concepts in understanding the template files – sections and template tags. Sections are chunks of HTML code that logically group content. For example, image albums are grouped together, so the HTML code that formats them is included in the ALBUMS section. Template tags are tags which the plugin will replace with their actual value when it’s processing the template. Now, let’s look at the two in detail.

Sections

Since sections can contain HTML code which spans multiple lines, sections are marked with a start and end marker. The start marker is just the name of the section. The end marker is the name of the section plus the string “_END” appended to it. Each section marker is of the format “<!– ==<SECTION MARKER>== –>”. Section markers are given as HTML comments so they will be hidden even if a they are output to the browser.

The following sections are recognized by the plugin:

When processing the template, the plugin will not output sections that don’t have any content. For example, if the template defines an ALBUMS section but the particular album that we are viewing does not have any sub-albums, the ALBUMS section will not be output to the browser.

Template Tags

Template tags tell the browser where and what to substitute in to the sections’ code. Each template tag is surrounded by ‘%’ (percent) characters which marks it as a template tag. The following tags are recognized:

Classes

Another aspect of the templates that is important in order for the plugin to function properly is adding the correct classes to the template’s elements. The plugin’s scripts use a specific set of classes in order to recognize the different elements. The table below describes all those classes and in what situation to use them.
Your template elements can contain other classes but the ones below are required to be present, as well.

If you would like to use the Shutter Reloaded script in your template, all the links to the full sized images in your template should also contain the ‘shutterset_wp-gallery2‘ class.

Demo

For a demo you can see the WP-Gallery2 Page

NOTE: Current, the WP-Gallery2 plugin does not work nicely with the NextGen Gallery plugin. The incompatibility is due to the different version of the Shutter Reloaded script that the two plugins are using.

Download

Even though, the plugin has not been tested very thoroughly, it is functional. If you’d like to use it you can download it from the link below:

WP-Gallery2 Plugin
Version: 0.8.1

Categories:	WP-Gallery2, Code
Posted on:	Jun 25th, 2010 10:44
Description:

115.7 kB
128 Downloads