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?
- (optional) set the exif caption of your pictures (the ‘headline’ tag to be exact)
- name your pictures according to the convention someimage_thumb / someimage_big (so pic01_big, pic01_thumb, pic02_big, pic_thumb etc.)
- 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>« prevpic</r:phm_prev_link>
to display a “next” link
<r:phm_next_link>nextpic »</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.
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!