[Radiant] Gallery Behavior

[Oliver Baltzer]

Hi All:

I wrote a behaviour that allows a page to act as a gallery of images
stored on the local filesystem of the server, so you can just dump your
images on the server via FTP or WebDAV. It scales images to desirable
sizes on-the-fly and uses the fancy Lightbox Javascript for displaying
individual images. It all is wrapped into a single Rails plugin and all
your need to get started is to have the RMagick library or gem installed
and a copy of the plugin in the vendor/plugins directory of your Radiant
installation.

The easiest way to get it is via Subversion

$ cd vendor/plugins
$ svn co http://nobits.org/svn/rails/plugins/gallery_behavior

or unpack the tarball (http://nobits.org/files/gallery_behavior.tar.gz)
into the same directory. If you are lucky, even the unit tests might pass:

$ rake test:plugins

Currently caching of gallery pages is not enabled so images are rescaled
on each request. On a slow server that might be annoying. You can enable
caching by just changing the return value of the cache_page? method in
lib/gallery_behavior.rb to 'true'.

Find a demo here (not very fancy): http://nobits.org/gallery/

Please let me know any comments or suggestions. Below follows the usage
description, copied directly from the source.

Cheers,
Oliver

Usage:

    The Gallery behaviour allows a page to act as an image gallery. The raw
    image is stored on the file system and the behaviour provides access to
    the image through RMagick. The actual gallery is realized using
    Lightbox v2 and the behaviour only generates the appropriate Lightbox
    links for the images found on the file system. Additionally RMagick
    also takes care of scaling the image to a desirable size for
    thumbnails and larger sizes.

    The only requirements for this behaviour are a working Radiant
    installation and RMagick installation. To get RMagick you can install
    the Ruby gem using:

      gem install rmagick

    The behaviour also does not require any specific installation steps.
    Just unpack the plugin in the 'vendor/plugins' directory of your
    Radiant installation and restart the webserver. Any additional files
    such as the Lightbox Javascripts or CSS are provided through the
    Gallery behaviour and do not need to be explicitly installed.
    
    A gallery pages consists of two required parts: 'gallery' and 'body'.
    The 'gallery' part is used to configure the gallery and contains the
    filesystem directory on the server from which the gallery should be
    created. The path specified here is a path relative to
    '$RAILS_ROOT/public'. For example if the gallery should be bound to
    '$RAILS_ROOT/public/photos/Canada/' the 'gallery' part should contain a
    single line 'photos/Canada'.

    The 'body' part is used for structuring the output of the Gallery
    behaviour. To do so, the behaviour provides the following tags:
    
      <r:gallery [lightbox="false"]>
         
        Sets up the gallery environment. The optional attribute
        'lightbox="false"' causes the tag to NOT generate any Lightbox
        specific '<script>' or '<link>' tags. Note, that when the Lightbox
        tags are generated HTML conformance will be broken, since '<link>'
        tags are not allowed in the HTML body, though most browsers still
        interprete the tag.

      <r:gallery:if_subgallery>

        Renders the content of this tag only if the currently displayed
        gallery is a subfolder of the folder bound using the 'gallery' page
        part. For the example above: assume the page '/traveling' is a
        gallery bound to 'photos/Canada' and 'photos/Canada' contains a
        subfolder 'Nova_Scotia', then if the currently displayed page is
        '/traveling/Nova_Scotia', the current page is a subgallery of
        '/traveling/' and the content of the '<r:if_subgallery>' tag is
        rendered. This tag can be used to generate navigational links, e.g.
        to parent galleries. See <r:gallery:parent:url>

      <r:gallery:parent:url/>

        Returns the URL of the parent gallery if such gallery exists.
        Usage example: 
          <a href="<r:gallery:parent:url/>">Go one level up</a>

      <r:gallery:folders:each>

        Iterates over each subfolder in the currently displayed gallery.
        
      <r:gallery:folders:each:link>

        Generates a link to the current subfolder.

      <r:gallery:images:each>

        Iterates over each image in the currently displayed gallery.

      <r:gallery:images:each:thumbnail>

        Generates a thumbnail link to a large version of the image. The
        link generated is compatible with Lightbox such that Lightbox can
        be used to 'click' through the larger images. If Lightbox is not
        present, the link will act like a normal link.

    Example:

    A typical example for a gallery page is the following: assume again
    the images you want to display are organized in a directory structure
    underneath $RAILS_ROOT/public/images/Canada. You now want to create a
    page in your Radiant CMS '/traveling' which is bound to that
    directory. To do so, you create a child for the 'root' page and give it
    the title 'Traveling' (this causes the slug to be 'traveling'). Now you
    remove the 'extended' page part and create a new page part called
    'gallery'. In the gallery page part you now enter the path relative to
    $RAILS_ROOT/public which you want to have bound to the gallery. In this
    example this is 'images/Canada'. Now you can fill the 'body' page part
    with HTML code and tags of your choice, e.g.:
    
    <r:gallery>

     <!-- check if parent gallery exists -->
     <r:if_subgallery>
      <a href="<r:parent:url/>">go up</a>
     </r:if_subgallery> 
     <div>
      Subfolders:
      <!-- list all subfolders -->
      <ul class="subgalleries">
       <r:folders:each>
        <li><r:link/></li>
       </r:folders:each>
      </ul>
     </div>
     <div>
      <!-- generate thumbnail links for images -->
      <r:images:each>
       <span class="thumbnail">
        <div>
          <r:thumbnail/>          
        </div>
       </span>
      </r:images:each>
     </div>
    </r:gallery>

    Finally set your favourite layout and make sure you use the 'Gallery'
    page behaviour.

    Todo:

    - allow user to specify thumbnail size and view size
    - custom sizes through configuration part
    - preview thumbnail of sub gallery
    - EXIF rotation and sorting
-- 
Oliver Baltzer
.web   > http://nobits.org/oliver/
.pgp   > 0x32B54706
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: application/pgp-signature
Size: 189 bytes
Desc: Digital signature
Url : http://lists.radiantcms.org/pipermail/radiant/attachments/20060526/de82e7e0/attachment.bin