Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2013-04-30 21:35:04

gavnosis
Member
From: Milton Keynes, UK
Registered: 2005-03-12
Posts: 151
Website

txp:article_image versus txp:thumbnail

Looking back through a site I built (and left!) a long time ago I’ve been displaying an article image as a thumbnail, and putting a wrapper around and aligning etc. in the default article form with this:

<txp:article_image thumbnail="1" wraptag="div" class="floatright" />

And then I remembered that the <txp:thumbnail /> has a poplink attribute, to display the full size image if clicked…

poplink="boolean"

What’s the best was to add the poplink functionality to the thumbnail of the article image? RSS Thumbpop seems like it was written in a different age(Stef’s probably got a plugin to do this…)

Thank you :-)

Offline

#2 2013-05-01 07:35:25

Dragondz
Moderator
From: Algérie
Registered: 2005-06-12
Posts: 1,549
Website GitHub Twitter

Re: txp:article_image versus txp:thumbnail

Hi

With all the lightbox script on the web i am not sure there are a lot that use poplink to show full images!

Offline

#3 2013-05-01 08:25:37

gavnosis
Member
From: Milton Keynes, UK
Registered: 2005-03-12
Posts: 151
Website

Re: txp:article_image versus txp:thumbnail

Thank you Dragondz! Okay… so if I’ve got the thumbnail (displayed using the <txp:article_image > tag), then how can I then bring something like <txp:smd_gallery > to use this thumbnail for a lightbox type effect? It’s the getting this article image into a lightbox style effect that I’m stuck with…

Thank you :-)

Offline

#4 2013-05-01 08:46:45

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,952
Website GitHub

Re: txp:article_image versus txp:thumbnail

Lightbox effects are normally achieved by choosing one from the dazzling array available on the web, uploading the js/css files, calling it all into your page’s <head> and then wrapping an anchor around each article image, giving it a specific class or rel attribute (depending on the lightbox solution you’ve chosen). The anchor usually contains the URL to the full size image.

When your page loads, the lightbox script looks for the given class or rel (or whatever their documentation says it needs) and hooks into every matching picture so that when you click the anchor-wrapped-image it launches the lightbox instead of following the link to the full size picture.

Normally, no plugins are needed for this unless you want to do some really fancy stuff like multiple independently navigable galleries on a single page.

Last edited by Bloke (2013-05-01 08:49:16)


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

#5 2013-05-01 12:25:23

gavnosis
Member
From: Milton Keynes, UK
Registered: 2005-03-12
Posts: 151
Website

Re: txp:article_image versus txp:thumbnail

Thank you Bloke …but (ah there’s always a ‘but’), where do I add an attribute of say rel="lightbox" when the tag of <txp:article_image doesn’t seem to have a link attribute i.e. to make it a hyperlink to the original image when I’m displaying only the thumbnail. Is this something that can’t fly as it stands? There’s an image associated with each article, which I’m currently showing as a thumbnail, and had this idea it would be nice to use something like shadowbox to show the full size image when clicked :-)

I would like something like <txp:article_image thumbnail="1" wraptag="div" class="floatright" link="1" rel="lightbox" />

…but I think those last two attributes are make-believe!

Offline

#6 2013-05-01 12:37:39

Dragondz
Moderator
From: Algérie
Registered: 2005-06-12
Posts: 1,549
Website GitHub Twitter

Re: txp:article_image versus txp:thumbnail

Hi try this

<txp:images><txp:image thumbnail="1" link="1" class="floatright" /></txp:images>

then point the javascript of the lightbox to use the class like that:

$('.floatright').lightbox();

eg: just an example if the lightbox is using lightbox() as his function.

Offline

#7 2013-05-01 13:07:10

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,952
Website GitHub

Re: txp:article_image versus txp:thumbnail

gavnosis wrote:

…but I think those last two attributes are make-believe!

:-) Yeah, the <txp:article_image> tag just outputs a pre-formatted image tag.

As Drgondz says though, you can roll your own markup using <txp:images>, which allows you to put anchors or whatever markup your chosen lightbox script needs inside the tag’s container; or you can use a form if you prefer.

One thing I would advise on top of Dragondz’ code is to explicitly check if the article image has any content before trying to invoke <txp:images>. Its default operation is to display all images if it finds none in the article image field, which is not usually what you want. Wrapping the code in <txp:if_article_image> will protect you from that, and also allow you to branch to display some “no images here, mate” message using <txp:else /> if you so desired.

Last edited by Bloke (2013-05-01 13:08:48)


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

#8 2013-05-01 13:30:56

gavnosis
Member
From: Milton Keynes, UK
Registered: 2005-03-12
Posts: 151
Website

Re: txp:article_image versus txp:thumbnail

You guys are good! Thank you, I shall now go and ‘roll my own’ ;-)

Offline

Board footer

Powered by FluxBB