How to create custom image galleries in Textpattern
I have spend quite some time today trying to find out how to create a custom image gallery in Textpattern. It is surprisingly easy to upload images and to display them by id within an article, yet a gallery behaviour is nowhere to be found.
One can of course create articles for every image, but that would be time consuming and clutter the database with unnecessary content.
In order to speed up the designing process for others, I decided to post a quick and dirty tutorial on how to create custom image galleries in Textpattern.
Features that I was looking for:
- The image gallery pulls all images in a given image category.
- No need for creating separate articles - Uploading the image through Textpattern is enough.
- Thumbnails are created through the Textpattern interface.
To clarify: I am not aiming to create a full-fledged image gallery, with editable categories and all the bells and whistles, but only something that would save me creating separate articles.
In order to achieve this I first created a new section fittingly called ‘gallery’. After that I wrote a single article in that particular section. What you write in that article is of no importance as long as it is called something descriptive. I called mine ‘detail’. The content of this article will never be shown, but we are effectively using its URL structure to display the detail page of our gallery.
After I changed the permanent link mode (in the basic preferences) to ‘/section/title/’, I now had a URL that read ‘mysite.com/gallery/detail’.
The next step is to create the code for the thumbnail list. Where you place this does not really matter, but for the sake of convience I put mine in the page that will be shown when the user accesses the URL ‘/gallery/’.
<ul>
<txp:wet_for_each_image category="IMAGE CATEGORY">
<li>
<txp:upm_image type="thumbnail" image_id="{id}" url="/gallery/detail/?i={id}"/>
</li>
</txp:wet_for_each_image>
</ul>
All images from the category IMAGE CATEGORY will be pulled into my unordered list. As you can see I made use of the two plugin wet_for_each_image and upm_image. The latter creates a linked image tag that points to my previously created URL ‘/gallery/detail/’.
Appended to that URL is a variable which identifies the image that the user will view in the detail section of the gallery.
So how does this detail page look? Well, the styling is up to you, but the basic code looks like this:
<txp:asy_wondertag>
<txp:upm_image type="image" image_id="<txp:php>echo $_GET['i'];</txp:php>">
<img src="<txp:upm_img_full_url />" alt="<txp:upm_img_alt />"/>
<div id="image_info">
<txp:upm_img_name />
<txp:upm_img_caption />
</div>
</txp:upm_image>
</txp:asy_wondertag>
This code goes into a custom article form (I called mine ‘gallery_detail’). To make sure that it is being used you need to make sure that either your entire section ‘gallery’ or only the article ‘detail’ use this article form. Which one you choose, depends on your site structure.
The beauty of creating your image gallery this way is that you can add a description/caption though the Textpattern image tab, thus eliminating the need to create an article for every new image.
I used this for an artist’s image gallery, thus allowing the artist to easily update their portfolio.
More importantly, you can create a custom user group, that can only access the image tab, because really, that is all that they need.
For those that have not noticed the code for the detail page also requires the plugin asy_wondertag, which allows you to nest tag. (Tags inside attributes)
So the complete list of plugin that you need for this wee image gallery is:
For some this list might be a little heavy, but I believe that it is better than having to use yet another third party product such as, for example, PhotoStack, in order to create your galleries.
I hope this speeds up the development of some other sites, especially because it seems to have taken me some time to come up with this relatively simple solution.
// Henrik Gemal
Monday, August 27th 2007
at 10:48 AM
I cant get it working. Where should the code for the detail page go?
// Dominik Lenk
Monday, August 27th 2007
at 11:09 AM
Hi Henkrik,
the code for the detail page goes into an article form of your choosing. Then you manually override the article form for the article that you created: in my case the article ‘detail’.
(You can do this in the advanced options of the write tab)
The actual article itself is never shown, but you are using its URL structure to display the gallery.
// Henrik Gemal
Monday, August 27th 2007
at 11:32 AM
I’ve got it working now.
I have a “Page” and is using
<txp:if_article_list>image list code
<txp:else/>
image detail code
</txp:if_article_list>
and it works just fine!