Textpattern CMS

#1 2008-08-17 18:57:34

daikw

Member

Registered: 2007-10-06

Posts: 39

fixing gallery issues

With the help of Stef Dawson and smd_gallery, I managed to create a successful gallery layout, with a list of articles down the left, loading a combination of thumbs with one large image.

Here are the forms we used:

photo_page form

<div id="gallery"> <txp:smd_gallery category="?title"> <txp:smd_if field="{counter}" operator="eq" value="1"> <div id="fullsize"> <txp:image id="{id}" /> <span id="caption">{caption}</span> </div> </txp:smd_if> <a href="{url}" class="thumb" title="{caption}" onclick="document.getElementById('fullsize').src = this.href; document.getElementById('caption').text = this.title; return false;"> <txp:thumbnail id="{id}" /> </a> </txp:smd_gallery> </div>

gallery_layout form

{changed:category_title} <a rel="lightbox" href="{url}" title="{title}">{object}</a>

As you can see here the layout works well, however:

1. When I click on one of the thumbs, nothing happens – what have we missed here?
2. When I click on the “gallery” link at the top of the page, I get a strange amalgamation of several sets of thumbs, whereas it would be better if this linked to the first article in the list (in this case – face texts, but it would change if another article was added to the top of this list)
3. How can I fix the width of the thumbnail rack to 3 accross by X down? currently they shift in width about depending on the width of the large image!

Thanks

Dai

#2 2008-08-17 19:41:07

Bloke

Developer

From: Leeds, UK

Registered: 2006-01-29

Posts: 11,447

Website GitHub

Re: fixing gallery issues

Good to see you’re getting there with this layout!

daikw wrote:

When I click on one of the thumbs, nothing happens – what have we missed here?

The div that surrounds the full size image has id="fullsize" and the javascript onclick is looking for a src attribute, which it won’t find. You should do one of two things:

1. assign the id to the img itself and use a different id (if any) for the enclosing div
2. change the javascript to document.getElementById('fullsize').img.src to go ‘into’ the image element inside the div

When I click on the “gallery” link… I get a strange amalgamation of several sets of thumbs

Not sure on this one. Since the link is simply pointing to a section, could you ‘hack’ it so that the <txp:article tag /> only showed a single, most recent article via limit="1" sort="posted desc"?

How can I fix the width of the thumbnail rack to 3 accross by X down?

You will have to be cunning :-) You can either:

1. set the width of the thumbnails either via the Images tab or from the plugin to a known value and make sure you give enough space in the enclosing div to fit exactly 3 across (don’t forget to include any CSS margin and padding you may have used into the calculation)
2. Make a best guess on how wide the ‘average’ thumbnail is and base your div width on that. With good use of individual margins/padding per thumbnail you can predict roughly how wide an image ‘cell’ will be and again set your containing div to that

Then they’ll ‘flow’ across the page 3 at a time. Other people who make galleries a lot, may have better solutions.

EDIT@: Incidentally — and stupidly I now realise — the replacement tag for the caption is {title} and not {caption}. My ToDo list includes adding {caption} as an alias for {title} in the next release.

Last edited by Bloke (2008-08-17 19:42:52)

---

The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

#3 2008-08-25 12:53:18

xzamen

Member

Registered: 2007-02-12

Posts: 18

Re: fixing gallery issues

Hi daikw,
Do you know how can I substitute category in smd_gallery with the current txp category or just dynamically substitute it with necessary image category? I also explained it here
Any help is much appreciated.

#4 2008-08-25 13:23:48

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,306

Re: fixing gallery issues

xzamen probably means here, at least around that post. xzamen, you can link to special posts by right-clicking onto the date of the post and copying that link.

---

_{In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links}

#5 2008-08-26 19:49:14

daikw

Member

Registered: 2007-10-06

Posts: 39

Re: fixing gallery issues

Thanks a million stef. Changing to document.getElementById('fullsize').img.src inside the photo_page form worked for loading the images from the thumbs, although unfortunately they are now opening in a new page, rather than loading in the designated fullsize image area. Any idea why this might be?

Thank you for your ideas on how to get the thumbnails to fit 3 across by X down. The problem I can see is that the fullsize images vary in width and the “gallery” div is a container for both the thumbnails AND the fullsize images. The thumbnails are always the same pixel dimension. So would it be possible to rejig your code so that the thumbnail rack is in its own div which can be given its own overall dimensions?

Thanks a million for all your help!! (got the captions working now too :-))