Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Single image that leads to image set
Hi, probably this question is a little bit broader than just textpattern.
I want to make galleries filtered by category, to make them modal. So far that is relatively simple, but what I’ve noticed in most tutorials and plugins (like Lightbox) is that you have a set of thumbnails that once clicked go to the same set of full sized images.
But what I’d like to do instead is just have a single thumbnail for a category, and then once clicked a modal window with the full sized images gallery.
What’s the right approach in terms of structure? Should I make a page for each gallery, and then a section for it, and make them appear as an iframe? Should it be some sort of hidden div? What is the right approach for it?
Thank you very much in advance.
Offline
Re: Single image that leads to image set
It’ll depend on the rest of the site structure.
One way would be to use articles for image sets. article_image for the single image, and article list to show the list of article images…
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Single image that leads to image set
Pablo Apiolazza wrote:
have a single thumbnail for a category, and then once clicked a modal window with the full sized images gallery.
A few ways you could do it, as colak suggests, all of them fairly easily served by smd_gallery (shameless plug, sorry).
The way I tend to approach this is to set it up so that each gallery is an article. You can upload your pictures to a single image category and put that category name in either the article-images field or a custom field of your choosing. Then use smd_gallery with thumblimit="1" to only display one image from the gallery which, when clicked, will reveal the rest lightbox stylie.
If you want to display a completely different image for your category you can maybe make a category tree up something like this:
gallery1
|-> g1_launch_pic
gallery2
|-> g2_launch_pic
...Then upload your gallery images into gallery1/2 etc and upload your launch pictures into the relevant subcats. Then through judicial use of the sublevels attribute you can ignore the launch pic in your main gallery and just reveal the launch pic in the smd_gallery form/container for the first image.
Alternatively, a variation on what colak suggests is to use the article image for the ID of your launch pic and use a custom field to hold the category name of the image gallery. Then your gallery form can pick from either to achieve what you’re after. In this instance you probably won’t need a plugin because TXP’s image tags can do it all.
Hope some of that is useful.
Last edited by Bloke (2011-03-10 12:35:22)
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
#4 2011-03-10 13:05:27
- redbot
- Plugin Author
- Registered: 2006-02-14
- Posts: 1,410
Re: Single image that leads to image set
Bloke wrote:
…Alternatively, a variation on what colak suggests is to use the article image for the ID of your launch pic and use a custom field to hold the category name of the image gallery. Then your gallery form can pick from either to achieve what you’re after. In this instance you probably won’t need a plugin because TXP’s image tags can do it all.
Adding to what Bloke says you can use the article image for the ID of your launch pic and any custom field to hold a comma-separated list of image ids.
Doing so your whole gallery will be managed by a single article and – as a bonus – you’ll be able to sort gallery images as you like.
To ease things in the admin side I suggest my plugin bot_image_upload which will let you perform all of the above from the “write” tab with a GUI. This includes images upload and drag’n‘drop sorting.
Offline
Re: Single image that leads to image set
Ok, I’ve got it… actually the “icon” image would always be the same, so I wouldn’t need to make it dynamic, let’s say.
I installed both plugins but I cannot get how the markup should be to summon the article inside the anchor link.
Right now the static link it’s something like:
<a class=“thumbsimg” href=”#”> <span class=“overlay01”> <span class=“caption01”>Logos Gallery</span> </span> <img class=“thumb” src=“images/logos icon.jpg” alt=“Logos” />
The thing is that I don’t use sections, just default and blog, so how can I summon the gallery inside that link? I suppose that txp markup should be where the # is, am I right?
About the redbot plugin, it’s really nice, but once it’s installed I cannot write for instance the category in the article image field, since the field itself is gone. Is there a workaround for it?
Once again, sorry for my newbie questions.
Last edited by Pablo Apiolazza (2011-03-10 23:41:28)
Offline
#6 2011-03-11 01:02:17
- redbot
- Plugin Author
- Registered: 2006-02-14
- Posts: 1,410
Re: Single image that leads to image set
Pablo Apiolazza wrote:
…About the redbot plugin, it’s really nice, but once it’s installed I cannot write for instance the category in the article image field, since the field itself is gone. Is there a workaround for it?
Hi,
As I said in my post above you could use the “article image” field for the ID of your category pic and any custom field to hold a comma-separated list of image ids.
As you can see this method is an alternative to what Bloke suggested involving the use of categories, so if you follow it you don’t need to specify a category (and exactly for this my plugin is not intended to insert categories).
Of course you’ll have to configure the plugin accordingly.
Last edited by redbot (2011-03-11 01:03:26)
Offline
Re: Single image that leads to image set
This is what I have done. It looks like what you want to accomplish, but I’m not sure. Anyway:
<txp:images category='<txp:custom_field name="photo-category" />' break="" limit="1">
<a href="<txp:image_url />" title="<txp:image_info />" rel="<txp:custom_field name="photo-category" />"><txp:smd_thumbnail type="430" /></a>
</txp:images>I’ve created a custom field named “photo-category”. When writing an article, this is where I put the name of the category of photos belonging to this article. The limit="1" limits the output of the thumbnail to one, hiding all other thumbnails. Clicking the thumnail pops up the modal window (rel="<txp:custom_field name="photo-category" />") with all photos in this category. And I’ve used the brilliant smd_thumbnail for creating and outputting thumbnails.
…Prrrrrrrr…
Offline
Re: Single image that leads to image set
@TNT, are you sure your suggestion will work?
I can’t see how it will work, as the full images (the ones belonging to the same category, which aren’t displayed as thumbnails) aren’t referred in the output at all. There is no way, afaik, that the modal will know which images to navigate, even if you are using the rel attribute referring to some existing image category.
In other words, the only ways to make this work (again, afaik) are:
- by hiding (via CSS) all the linked thumbnails (that share the same
relattribute) but the first one (the one that triggers the modal). - by creating a JS array that holds all the necessary info for fetching the images once the modal is triggered.
I can’t see none of those two approaches in your code snippet. I just see one linked thumbnail in the output, but no reference to all the other images that should be displayed when navigating the modal.
Offline
Re: Single image that leads to image set
maniqui wrote
@TNT, are you sure your suggestion will work?
It’s definitely working, as you can see here: http://www.hugovandrielen.nl (the website of my newborn son).
The declaration of the category in <txp:images> calls all images in that category. (At least, that’s how I guess it works.) From there, the limit="1" limits the output of the thumbnail (between <txp:images></txp:images>), but all full size images are recognized.
Of course, the rel-attribute calls the Lightbox, and I’ve put all references to the scripts in place.
…Prrrrrrrr…
Offline
Re: Single image that leads to image set
@TNT,
Well, I can see this in the output code:
<div id="gallery">
<a href="http://www.hugovandrielen.nl/images/68.jpg" title="Hugo vindt het inderdaad fijn als er met hem wordt gespeeld." rel="week5"><img src="http://www.hugovandrielen.nl/images/430/68.jpg" width="430" height="430" alt="" title="Hugo vindt het inderdaad fijn als er met hem wordt gespeeld." class="430" /></a>
<a href="http://www.hugovandrielen.nl/images/69.jpg" title="Total loss na het drinken van een fles. Het is ook niet makkelijk..." rel="week5"><img src="http://www.hugovandrielen.nl/images/430/69.jpg" width="430" height="430" alt="" title="Total loss na het drinken van een fles. Het is ook niet makkelijk..." class="430" /></a>
<a href="http://www.hugovandrielen.nl/images/70.jpg" title="Thomas kijkt het geheel eens aan." rel="week5"><img src="http://www.hugovandrielen.nl/images/430/70.jpg" width="430" height="430" alt="" title="Thomas kijkt het geheel eens aan." class="430" /></a>
<a href="http://www.hugovandrielen.nl/images/71.jpg" title="Slapen op de Euromast. Veel mensen betalen daar veel geld voor..." rel="week5"><img src="http://www.hugovandrielen.nl/images/430/71.jpg" width="430" height="430" alt="" title="Slapen op de Euromast. Veel mensen betalen daar veel geld voor..." class="430" /></a>
<a href="http://www.hugovandrielen.nl/images/72.jpg" title="Na vijf push ups was Hugo al moe." rel="week5"><img src="http://www.hugovandrielen.nl/images/430/72.jpg" width="430" height="430" alt="" title="Na vijf push ups was Hugo al moe." class="430" /></a>
<a href="http://www.hugovandrielen.nl/images/73.jpg" title="De sirene." rel="week5"><img src="http://www.hugovandrielen.nl/images/430/73.jpg" width="430" height="430" alt="" title="De sirene." class="430" /></a>
<a href="http://www.hugovandrielen.nl/images/74.jpg" title="Lekker chillen bij papa." rel="week5"><img src="http://www.hugovandrielen.nl/images/430/74.jpg" width="430" height="430" alt="" title="Lekker chillen bij papa." class="430" /></a>
</div>So, definitely, the limit="1" doesn’t seem to be taking effect. In fact, if it would take effect, you won’t have such a nice slideshow combined with lightbox.
In other words, all the images shown by the slideshow (which can also be viewed/navigated in full version via the Lightbox) are referenced/linked there directly in the markup.
The Lighbox itself wouldn’t be able to guess which is the prev/next image if it wasn’t somehow referenced in the code (directly in the HTML markup, as you have done, or via a JS array, as some others do).
Finally, your example (beautiful site, congrats for the new born) is not exactly the thing the OP is asking for (“single image that leads to image set”), as you have all the thumbnails (that trigger the lightbox) already there in the markup (displayed on a one-by-one basis).
Does it makes sense?
If so, I still maintain my words that the code I pasted above can’t be the output of some TXP snippet that includes limit="1". But, of course, prove me wrong :)
Offline
Re: Single image that leads to image set
I guess you’re right… I actually forgot how I managed to do this, but it is indeed all thumbnails, only displayed one by one (hence break="").
On one of my other sites, I used smd_gallery to do exactly as OP asks. I was under the impression that the new <txp:images> was able to do the same thing without using the plugin. Have to think about that…
For reference, this is the code I used there (link in action).
Inside a page
<txp:smd_gallery category="?photo-category" form="v5_galleryform" objectform="v5_objectform" thumblimit="1" />v5_galleryform
<a rel="shadowbox[{category}]" href="{url}" title="{title}">{object}</a>v5_objectform
<img src="{thumburl}" alt="{alt}" title="{title}" class="captify" rel="<txp:article_id />" />…Prrrrrrrr…
Offline
Re: Single image that leads to image set
Good to know.
I’ve never used the object capabilities of smd_gallery, and I would certainly have done it differently (probably testing something like this: if this is first image: use this markup; else: use this other markup), but good to see an example of doing it using object.
If you look at the source code of the page you linked, there are the link to all the full images too, although they are all empty but the first one (which is the one corresponding to the thumbnail).
Offline