Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
I'll figure out this layout if it kills me!
I’ve been using Txp for years now – most recently on my bird photography site.
The gallery function is delivered by the excellent smd_gallery, and it works great.
However… I’ve realised that I’d prefer a gallery presentation a la this site but – for the life of me – I haven’t been able to get anything like this to work in my site.
In summary, I’d like a set of thumbnails at the top of the page which link to full-sized images further down on the same page along with a “back to top” anchor. Being able to add some descriptive text directly beneath the full-sized image is pretty important too.
I could do it easily enough in HTML, but I don’t want to resort to that approach (I’ve got a lot of pictures and pages to post up yet) but can’t figure out which combination of tags and/or plugins I need to use to get this layout.
But it must be possible – this is Txp after all!
If anyone out there can provide an indication of what I need to do to achieve this end-result, I’ll be hugely grateful.
Last edited by keith (2008-02-25 20:07:58)
Keith
Blyth, Northumberland, England
Capture The Moment
Offline
Re: I'll figure out this layout if it kills me!
Have you tried wet_for_each_image? Combined with upm_image (for displaying the full size pics and captions) it might just be what you’re after.
Failing that, you could give smd_gallery a spin. With some cunning use of a form to group thumbnails into one div at the top and the fullsize pics lower down it might work, although off the top of my head it may require two calls to the plugin in its current incarnation (one for thumbs, one for fullsize pics, which is far from optimal).
If you find it’s too awkward to use and you get nowhere with the other ones (or any weird combinations thereof), shout back and I’ll see if I can beef up the gallery plugin to help you out.
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
Offline
Re: I'll figure out this layout if it kills me!
Hey Stef,
actually, it’s your smd_gallery I’m currently using – my mistake!
Interesting approach you’ve come up with there – I’ll look into it – and I’ll see what I can do with wet_for_each_image and upm_image too.
Very grateful for the pointers.
Keith
Blyth, Northumberland, England
Capture The Moment
Offline
Re: I'll figure out this layout if it kills me!
Hehe, no probs. Well you can do it with smd_gallery thusly:
<div id="thumbs">
<txp:smd_gallery category="birds">
<a href="#img{id}"><img src="{thumburl}" alt="{alt}" /></a>
</txp:smd_gallery>
</div>
<txp:smd_gallery category="birds">
<a name="img{id}"><img src="{url}" alt="{alt}" width="{width}" height="{height} "/></a>
<div class="caption">{title}</div>
<a href="#thumbs">Back to the top</a>
</txp:smd_gallery>(you can farm the stuff between the gallery tags out to forms if you prefer).
It works, I tried it, but the problem is the fact you have to use two calls. I’ve not wrapped my brain around it enough to see if it can be done in one or if I need to fix the plugin to allow this sort of thing (I did have some ideas on how to do this but thankfully rloaderro showed me a few flaws in my approach before I started anything). You might have more mileage with upm_image/wet_for_each_image, I’m not sure at this moment.
But at least you know the fallback is that smd_gallery can do it, albeit slightly less optimally than I’d like it to be. I’ll give it some thought.
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
Offline
Re: I'll figure out this layout if it kills me!
Thanks again, Stef.
I haven’t had the chance to sit down and test this out, but I just want to post a “ta!” so that you know I appreciate your help…
Keith
Blyth, Northumberland, England
Capture The Moment
Offline
Re: I'll figure out this layout if it kills me!
Hi Keith,
How did you achieve the nested sections on your bird site? I am new to Textpattern and have a similar project with a lot of image galleries, and details of each image. Any directions would greatly help :)
Thanks!
Husain
Offline
Re: I'll figure out this layout if it kills me!
Hi Husain,
unfortunately, I haven’t been able to get Stef’s smd_gallery idea to work: it should, but for some reason it just doesn’t happen for me.
And I’m not knowledgeable enough in Textpattern and CSS to figure out how to use the upm_image and wet_for_each_image plugins in the way we’re discussing, I’m afraid.
At the moment I’m looking favourably at rss_thumbpop – this allows me to have a set of thumbnails in a document which will open to a large version of each image in the same page and which allows me to display information about each picture by populating the “Caption” field of the image.
Look at the example at the bottom of the linked page for a rough idea of what it can do.
I have a few wrinkes to iron out, like why, if I put any HTML in the caption for one picture, that caption is appended to the details output for every other image; and I haven’t yet worked out how to style the large image to put a border around it (if I change the class rssImg, it affects the thumbnails rather than the large image), but so far I’m pretty happy with how it looks and functions.
Edit: Actually Husain, I’m starting to think that I might just stay with my “default” implementation of smd_gallery – it works extremely well, and allows me to include details of the picture in the caption, just like rss_thumbpop.
Staying with smd_gallery also means I won’t need to tear my site down and rebuild it!
Last edited by keith (2008-03-09 13:15:03)
Keith
Blyth, Northumberland, England
Capture The Moment
Offline
Re: I'll figure out this layout if it kills me!
Keith, if you want a hand getting smd_gallery to work, post your tag code here or give me a shout and I’ll see if I can help figure out why it’s not working for you.
Edit: try and get your pages to validate. I notice at least one of your div tags has a missing ‘>’. Wrap stuff you don’t want to appear on the page with <txp:hide>...</txp:hide> tags. Some of the tags where you have used ‘<!’ are causing the validator to complain. That might help a tad.
Last edited by Bloke (2008-03-09 13:19:54)
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
Offline
Re: I'll figure out this layout if it kills me!
Hi again, Stef – very grateful.
As you might see from my edited response to Husain, I think I’m going to stick with smd_gallery as is.
Now, if you know of a “batch” way to re-do every single thumbnail to 60 × 60 square/cropped, I’m all ears!
Keith
Blyth, Northumberland, England
Capture The Moment
Offline
Re: I'll figure out this layout if it kills me!
D’oh, my Edit to the above post crossed with yor edit :-)
keith wrote:
Now, if you know of a “batch” way to re-do every single thumbnail to 60 × 60 square/cropped, I’m all ears!
Alas, not from within TXP itself. If you don’t mind a bit of manual intervention, you could download all the thumbnail ‘t’ images from your site via FTP and run them through BIMP to resize them, then re-upload them.
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
Offline
Re: I'll figure out this layout if it kills me!
Sounds like a plan, Stef – thanks again.
Keith
Blyth, Northumberland, England
Capture The Moment
Offline
Re: I'll figure out this layout if it kills me!
No, probs. I forgot: if you want to do it automatically within TXP, you could try Steve’s lam_dynamic_image. Think it works on thumbs as well, not sure.
Last edited by Bloke (2008-03-09 13:33:12)
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
Offline