Best Txp implementation of this gallery layout

keith · 2010-03-06 19:17:36

I know this should be obvious, but I’m feeling particularly woolly-headed at the moment and need some advice.

I want (broadly) to replicate the “gallery” approach used by this site – basically a page of thumbnails, each of which leads to an individual page containing the full-sized image and some narrative.

I can think of a few ways this might be done in Txp, but does anyone have any insight into the “best” way to deliver this funcationality in a Txp context using the built-in tags and/or plugins? In particular, can anyone think of a way to generate links from the thumbs to the individual full pages that doesn’t involve “hard-coding” the URLs in the thumbs?

I’m guessing it can’t be done natively or with plugins, but that’s why I’m asking…

Note that the site I’ll be doing this for uses a pre 4.2.0 version of Txp (just in case if article image is the way to go).

TIA.

redbot · 2010-03-06 19:52:08

Hi,
I’d set an article image for each article, then – in an article list – use an article form similar to:
<txp:permlink><txp:article_image thumbnail="1" /></txp:permlink>
and – in an individual article – something like:
<txp:article_image /><txp:body />.
That’s all. You can speed up things using iam_image_uploader

keith · 2010-03-06 22:08:20

Very useful, Redbot – thanks for that.

THE BLUE DRAGON · 2010-03-06 23:06:02

With smd_gallery you can have paging for the images and limit to only view 1 image per page.
But I don’t know how you will be able to also create the index with the thumbnails.
Maybe using “if_front_page” or something like that?
and then to link to the image (page number) by using adi_calc to see the position of the image in the gallery (category),
and just add the result number to the end of the url.

If it’s for you, and will be static, so you should also check jalbum

jakob · 2010-03-06 23:11:41

Another approach if you want to avoid making an article for each of your images would be to use txp:image_index and txp:image_display (or an image form) which work with images alone. Your text would have to be the image caption text but it can save time if you don’t really need articles.

In the standard setup txp:image_index creates a list of thumbnails and links to your current page adding ?p=99 to the link (where 99 is the image ID#). You place txp:image_display elsewhere on the same page and the respective image is displayed alongside the thumbnail images, e.g.:

<div id="thumb_grid">
   <txp:image_index wraptag="ul" break="li" />
</div>
<div id="image_display">
   <txp:image_display />
</div>

If you want to show only the image without the grid of thumbs, you can make use of adi_gps to detect when the URL has ?p= and show only the display image or only the image thumbs as follows:

1. Install adi_gps and at the top of your page add the following directly after your DOCTYPE and HTML statements:

<txp:adi_gps name="p" quiet="1" />

adi_gps automatically makes you a variable with the name p.

Then where you want your images to display use:

<txp:if_variable name="p" value="">
<!-- variable p is empty so show grid -->
<div id="thumb_grid">
   <txp:image_index wraptag="ul" break="li" />
</div>
<txp:else />
<!-- variable p has a number so show the image -->
<div id="image_display">
   <txp:image_display />
</div>
<!-- finally, add a link back to the index -->
<txp:section link="1">back to index</txp:section>
</txp:if_variable>

If you want more detailed control of the full image output than just the image_display you can use the txp:image tags or another plugin such as upm_image which gives you access to the alt and caption fields directly with tags such as <txp:upm_img_alt /> and <txp:upm_img_caption />. For this use id='<txp:variable name="p" />' in place of the ID (note single quotes in this case so that the tag in tag is parsed).

You can also do all of this with Stef’s all-singing-all-dancing smd_gallery which is a one-stop shop for these kinds of things. While it looks daunting at first, it’s not actually as complicated as it looks. The instructions are long because you can use it in different ways but it allows you to precisely control your image output, your grid and your pagination. It’s worth< of a post of its own.

To summarise: the advantage of just handling images is that you don’t need to create an article per image, taking a whole step out of maintaining your site. A caveat is that you don’t get URLs with the image name in the URL like in your sample.

jakob · 2010-03-06 23:18:45

cno_image_order might also be of interest if you want a custom image order.

colak · 2010-03-07 07:59:01

keith wrote:

Note that the site I’ll be doing this for uses a pre 4.2.0 version of Txp (just in case if article image is the way to go).

Hi keith

You can use chh_if_data for pre 4.2 installs.

keith · 2010-03-07 08:59:27

Thanks all – lots of ideas to try now.

jakob · 2010-03-07 09:22:48

A caveat is that you don’t get URLs with the image name in the URL like in your sample.

Thinking about it you could get URLs www.my-domain.com/gallery?p=14&imgname=red-necked-avocets (which you could neaten up with a one-liner in your .htaccess file to www.my-domain.com/gallery/14/red-necked-avocets. google is happy with either format) if you used something like smd_gallery which allows you to create links how you want them. The “red-necked-avocets” would be what is in the image name field in the txp image edit window (the name of the image you upload). It wouldn’t actually serve any purpose except to give google some keywords to log and make the link itself more human-readable.

Bloke · 2010-03-07 09:33:05

jakob wrote:

if you used something like smd_gallery which allows you to create links how you want them

Good trick, jakob. I’ve used that before somewhere and it’s a nice alternative to get pseudo-named images.

One other caveat for you to be aware of, keith, if you use smd_gallery you’ll have to check my plugin archive to get v0.51 (at most), since versions higher than that are for 4.2.0 only.

keith · 2010-03-07 09:49:28

Hi Stef,

I’ve had smd_gallery installed for ages mate, and I’m pretty comfortable with the basics, but haven’t been able to see a way to use it to deliver the functionality I’m after here.

Looking at it again now though!

Textpattern CMS

Textpattern CMS support forum

#1 2010-03-06 19:17:36

Best Txp implementation of this gallery layout

#2 2010-03-06 19:52:08

Re: Best Txp implementation of this gallery layout

#3 2010-03-06 22:08:20

Re: Best Txp implementation of this gallery layout

#4 2010-03-06 23:06:02

Re: Best Txp implementation of this gallery layout

#5 2010-03-06 23:11:41

Re: Best Txp implementation of this gallery layout

#6 2010-03-06 23:18:45

Re: Best Txp implementation of this gallery layout

#7 2010-03-07 07:59:01

Re: Best Txp implementation of this gallery layout

#8 2010-03-07 08:59:27

Re: Best Txp implementation of this gallery layout

#9 2010-03-07 09:22:48

Re: Best Txp implementation of this gallery layout

#10 2010-03-07 09:33:05

Re: Best Txp implementation of this gallery layout

#11 2010-03-07 09:49:28

Re: Best Txp implementation of this gallery layout

Board footer