phm_gallery a gallery generator for radiant

i created a nifty little radiant extension for some friends which helps you to create seo friendly galleries from file system folders and so i wanted to share it with you.

if you want to skip the fluff, check it out on github:

http://github.com/mueller-wulff/radiant-phm_gallery

otherwise let me explain what it’s good for:

  • create thumbnail galleries from folders
  • display captions from jpg exif information
  • create seo friendly links
  • single view with ‘prev’ and ‘next’ links

in order to make the thumbnail gallery and especially the single view seo friendly i didn’t use any ajax.
you will need to generate two different pages – the gallery page which will show the thumbnails and the single view page which will show a single image (who’d guessed that?).

what do you need to get started?

  • the ‘mini_exiftool’ gem
  • radiant 0.9 or higher

how to install?

ruby script/extension install phm_gallery

or via git

cd /path/to/radiant

git clone git://github.com/mueller-wulff/radiant-phm_gallery.git vendor/extensions/phm_gallery

what next?

  1. (optional) set the exif caption of your pictures (the ‘headline’ tag to be exact)
  2. name your pictures according to the convention someimage_thumb / someimage_big (so pic01_big, pic01_thumb, pic02_big, pic_thumb etc.)
  3. upload your pictures to a subfolder of /path/to/radiant/public (for example “pics”)

how to use it?
go to the page where you want the thumbnail gallery to appear and enter

<r:phm_thumbs path="/path/to/gallery"
single_path="/page/where/single/fullsize/image/will/appear"
wrap="|" >Gallery</r:phm_thumbs>

the parameter path should be clear (in our example above it would be “/pics”)

the parameter wrap gives you the possiblity to wrap every single thumbnail with smth. (e.g. divs or spans) the | is the postion of the image tag so:

wrap="<div class="thumbnail">|</div>"

would create an according div around every thumb.

since we don’t use any fancy lightbox effects to display the fullsize images we need a page to display the “single view”

so go ahead an create a new page in your radiant an give it fitting name, take the slug (e.g. “/pics/single_view”) and paste it into the ‘single_path’ parameter from earlier

on the single_view page you have several tags to create a custom single view:

to display the “_big” picture

<r:phm_single_pic>Picture</r:phm_single_pic>

to display a “prev” link

<r:phm_prev_link>&laquo; prevpic</r:phm_prev_link>

to display a “next” link

<r:phm_next_link>nextpic &raquo;</r:phm_next_link>

to display the caption of a picture (the exif stuff from before)

<r:phm_subtitle >Caption</r:phm_subtitle>

if you have any questions, don’t be shy, write a comment.

enjoy.

One response to “phm_gallery a gallery generator for radiant”

  1. download hack subway surfers

    Having read this I thought it was rather enlightening.

    I appreciate you spending some time and energy to put this short article together.
    I once again find myself personally spending a lot of time both reading and leaving comments.
    But so what, it was still worth it!

Leave a Reply