smd_gallery: super-flexible gallery generator

detail · 2010-08-11 11:16:26

Mr B,

I’ve managed to get a Showcase slideshow working on my front page which has its own section. Trrrrific.

Now, just as a special challenge I’m hoping to add a separate slideshow for each article in a 12 page section.

Maybe I’m not thinking correctly but can I get a slideshow, pulling the images from the images linked to the article rather than a gallery, ie the first page has images A, B, C and the second D, E, F, the third G, H I etc.

I want the images & captions to be separate from any other text ie so these slideshows would be placed outside each article on the page.

Or do I create 12 separate galleries and somehow link these to the individual page where each article appears?

Not quite sure if this question is just plain dumb or profound.

Bloke · 2010-08-11 11:59:39

detail wrote:

Not quite sure if this question is just plain dumb or profound.

The latter; I’m just too dumb to figure out what you mean :-)

Taking a stab at what I think you are trying to achieve:

you have a section called, for example, zodiac
in this section you have 12 articles — one for each sign of the zodiac
each article has some images associated with it (perhaps listed in the article_image field) of celebrities having that star sign
you want to display the article content on the left and the slideshow in its own doohicky on the right of the page

Is that about right? If so, you’re in luck. In your default article Form (assuming that’s the one you’re using!) you’d set up your page structure like this:

<div id="article_text">
... <txp:title />, <txp:body />, etc tags here
</div>
<div id="sideshow_bob">
   <txp:smd_gallery id="?article_image">
      <txp:image id="{id}" /><br />
      <span class="caption">{caption}</span>
   </txp:smd_gallery>
</div>

So when this is called from the <txp:article /> tag in your Page, the text is rendered on the left and your smd_gallery tag reads the list of image IDs you have placed in the article image field of the current article and makes a slideshow of them in its own div which you can float:right or whatever you like.

If you had already put your celebrity pictures in image categories you could be even more clever. If your articles were each named after a sign of the zodiac and you also placed the celebrities in image categories named after the star signs, you coud tie them together with this gallery tag:

<txp:smd_gallery category="?title" />

That means you don’t even have to use the article image field: your images are automatically read from the same image category as the current article title.

If you want to truly display the slideshow ‘outside’ the article flow then you could use a standard article tag on the left to render the text of the current article and use an article_custom tag on the right to grab a subset of articles, with an smd_gallery tag embedded inside it to render the relevant slideshow(s) based on the article contents.

Does that help or, if not quite right, give you some ideas to get where you want to be?

EDIT: corrected… articleUNDERSCOREimage

Last edited by Bloke (2010-08-11 13:59:02)

maverick · 2010-08-11 13:45:31

Bloke wrote:

<txp:smd_gallery id=”?article-image”>

<txp:smd_gallery category=”?title” />

Sorry to break into your discussion. For those of us watching and learning before we implement smd_gallery . . .

Does smd_gallery require the “?” in the attributes, or did some php accidently sneak in? :)

Bloke · 2010-08-11 13:58:00

maverick wrote:

Does smd_gallery require the “?” in the attributes

Yes if you want it to mean “get the thing after the ? from the current article”. If you don’t specify the ? then it uses the value literally. Viz:

category="title"
==> get images from the image category called "title"

category="?title"
==> get images from the image category with the same name as the current article's title

There are other modifiers and shortcuts, chiefly the ! to mean “not”. A silly example:

id="12-45, !42, !article_image"

That would grab all the images with IDs between 12 and 45 but would exclude image #42 and any images with IDs listed in the current article image field. So if your article image contained 30, 40, 60 you’d get any images between 12 and 45 except images 30, 40 and 42. The plugin takes everything you specify as a potential pool of images: whatever’s left after all the inclusions/exclusions have been considered are the images you see in your gallery.

Last edited by Bloke (2010-08-11 13:59:57)

detail · 2010-08-11 14:47:42

Wow, Mr B.

That’s really set the mind racing. Yup, I’ve a sort of direction to head.

I just have to work out how to throw those variables into url” “ & description” “.

<script type="text/javascript">
$(function() { 
$("#showcase_1080").showcase({
        css: { width: "1080px", height: "500px",},
        animation: { type: "fade", interval: 5000, speed: 1500 },
        images: [
         { url:"",
          description:""}
                     ],

If it doesn’t strain our fledgling relationship could you, perhaps, expand a little on:

If you want to truly display the slideshow ‘outside’ the article flow then you could use a standard article tag on the left to render the text of the current article and use an article_custom tag on the right to grab a subset of articles, with an smd_gallery tag embedded inside it to render the relevant slideshow(s) based on the article contents.

Bloke · 2010-08-11 15:11:00

detail wrote:

I just have to work out how to throw those variables into url” “ & description” “.

It’ll be the same sort of logic as on your front page I would guess. Are you using smd_gallery’s coallate mode? Got any tag code you could post please?

If it doesn’t strain our fledgling relationship could you, perhaps, expand a little on <snip>

It was just wondering out loud really. Without knowing if the approach I first proposed was the way you were thinking I just threw in an (expensive) alternative.

It boils down to separating the current article’s text from the sidebar slideshow’s content. If you wanted to show images that were assigned to the current article, then the first method should be the way to go. But if you wanted to decouple the views and have the sidebar show something different to the current article (perhaps to entice people to click on it and see the another article from which the images are associated), then you could approach it like this in your Page template:

<div id="article_text">
... <txp:article /> // Calls the form with title/body/etc
</div>
<div id="sideshow_bob">
   <txp:article_custom id="some_article_ID">
      <txp:smd_gallery id="?article_image">
         <txp:image id="{id}" /><br />
         <span class="caption">{caption}</span>
      </txp:smd_gallery>
   </txp:article_custom>
</div>

Not sure if that makes sense or is even useful — it uses two article calls so hits the DB twice. But you can do some wacky things like that with TXP!

Last edited by Bloke (2010-08-11 15:12:21)

maverick · 2010-08-11 16:02:07

Bloke

Thanks for the tutorial! That’s something I should have known, but either missed or forgot. Your explanation was excellent

Mike

detail · 2010-08-12 08:40:06

Bloke,

Clearly I still haven’t clicked on what to do here. Yeah, some of us are slow learners.

I’ve got this on the page template. (So I can see it all at once, and anyway my mother claims I was always a little on the messy side.)

      <div id="showcase_1080" class="article_image"> 

   <txp:smd_gallery id="?article_image">
      <txp:image id="{id}" /><br />
      <span class="description">{caption}</span> 
   </txp:smd_gallery>


<script type="text/javascript">
$(function() { 
$("#showcase_1080").showcase({
        css: { width: "1080px", height: "500px",},
        animation: { type: "fade", interval: 5000, speed: 1500 },
        images: [
         { url:"",
          description:""}
],

This produces a slideshow of the appropriate article image. Yippee!

There are 3 rather obvious issues.

1. It is, however, a slideshow of one image, no matter how many comma separated images are listed for the article. If I put anything in url:”“ it just comes up as an error in my web inspector.

2. There are no captions. if I try for “{caption}”, or any variation of that, the {caption}, or [{caption}], or {{caption}}, comes up exactly as that in the space. The captions do appear on my pointer when I hover.

3. Err, stickies don’t throw up an image at all. I have a sticky at the head of the article list on the initial section page.

(Here’s a confession. I got the slideshow up on my front page by hardcoding the url and description. Obviously can’t do that where there are multiple pages to a section. Well, whatever it takes, at least until it catches you out as is currently the case.)

Any easy solutions?

cheers, detail

Bloke · 2010-08-12 09:57:45

detail wrote:

Clearly I still haven’t clicked on what to do here.

I’ve just looked at the Showcase syntax you’re trying to create and I’m not surprised you struggled. I just tried it and it took some significant brain power to modge the output into the required format. We’ve got to do some naughty tricks in order to create the desired output.

I’ll just go through the thought process here so others can learn from the mistakes I made. If you don’t care about this part and want to just get it working, skip to the end :-)

Everything in the Showcase output is fixed, hard-coded stuff except the list of images. So first I tried writing the fixed stuff round the outside of a standard smd_gallery tag like this:

$("#showcase_1080").showcase({
   css: { width: "1080px", height: "500px",},
   animation: { type: "fade", interval: 5000, speed: 1500 },
   images: [
   <txp:smd_gallery category="your_images">
      { url: "{url}", description: "{caption}" }, 
   </txp:smd_gallery>
   ]
});

And you know what, it almost works but for one tiny weeny, pesky detail: the trailing comma on the final url/caption pair isn’t valid JSON format so it breaks things. I suppose if you were cunning you could capture the output and then trim the last comma off, but where’s the fun in that?!

So I changed approach. Showcase demands the following structure in the ‘images’ section; one of these for each image, separated by commas:

{ url: "http://some/URL", description: "some text" }

For this trickery we need collate mode, so instead of outputting every row as it finds it inside the smd_gallery tag it builds the output up internally and just outputs it once at the end, i.e. it collates all the info and runs the smd_gallery container just once.

Since we need the url and the caption quoted I tried this:

<txp:smd_gallery category="your_images" collate="quote:{url}:{caption}">
The URLs: {url}
The captions: {caption}
</txp:smd_gallery>

and indeed it quotes them nicely. But Showcase doesn’t want the two items — url and caption — separately, it wants them interleaved. The only way to do that is to build them up manually and, as luck would have it, smd_gallery has just such a tool: combos.

So I set about creating a combo. Here’s the first attempt at the attribute, trying to create a combo called sc_img:

combo="sc_img:{ url: {url}, description: {caption} }"

Uh-oh. Lots of problems there. For starters we’ve lost the quotes around url and caption. JSON is very picky about quoting and demands that it gets double quotes round things. Since we’re already using double quotes (and the collate="quote:{something}" trick won’t work in this case — it’s a long story!) we’ll have to use single quotes around our combo, like this:

combo='sc_img:{ url: "{url}", description: "{caption}" }'

The plugin still throws a wobbly though (lots of errors) because it uses the comma and the colon as delimiters. So it sees the comma and thinks we’re defining a second combo (which we’re not), and also sees the colons inside our string as separators between the combo definition name and its contents. So we need to tell smd_gallery to use something else. I arbitrarily chose the ‘@’ between items and the pipe | between parameters. Thus the final combos is:

combo='sc_img|{ url: "{url}", description: "{caption}" }' delim="@" paramdelim="|"

Phew!

Wrapping all that up into the script gives us this final output:

<txp:smd_gallery category="your_images"
      delim="@" paramdelim="|" collate="1"
     combo='sc_img| { url: "{url}", description: "{caption}" }'>
<script type="text/javascript">
$("#showcase_1080").showcase({
   css: { width: "1080px", height: "500px",},
   animation: { type: "fade", interval: 5000, speed: 1500 },
   images: [ {sc_img} ]
});
</script>
</txp:smd_gallery>

Or, since most of the output is static you can put most of the javascript outside the smd_gallery tag and just put the images segment inside:

<script type="text/javascript">
$("#showcase_1080").showcase({
   css: { width: "1080px", height: "500px",},
   animation: { type: "fade", interval: 5000, speed: 1500 },
<txp:smd_gallery category="your_images"
      delim="@" paramdelim="|" collate="1"
     combo='sc_img| { url: "{url}", description: "{caption}" }'>
   images: [ {sc_img} ]
</txp:smd_gallery>
});
</script>

How’s that?

EDIT: this debacle has given me an idea. The concept of a combo form would save the quoting / delimiter headaches so I might just alter the plugin to allow you to defer combo definitions to a form. Will give it some thought.

Last edited by Bloke (2010-08-12 10:05:01)

detail · 2010-08-12 10:15:27

Mr B

Yeah, I thought it was pretty easy.

I’ll work my way through this and let you know how it turns out.

Thanks for taking the time.

Cheers, GJ

detail · 2010-08-12 11:46:55

Mr B. I used the last of your options. Yes, she’s up and running, after eliminating the odd syntax error. Pop up captions and the lot. That definitely is working.

I popped in one of my uploaded galleries in the category “ “ and wondered why my computer started powering up for takeoff. Maybe a 96 image slideshow at that 80k size is a little hard to handle. So this works for a big gallery.

Then …

I whacked in the id=”?article_image” instead of the category and suddenly it was working precisely as I wanted, ie a single image associated with each article. (yes, a single image slideshow. Well, you have to keep the look consistent.) It’s … a miracle. It’ll take a day to make all my changes. The question will be: does it work for a multi image article? and what to do about the sticky no show.

Thanks for your efforts to get Showcase up and running. It’s a great little unobtrusive slideshow.

Bloke · 2010-08-12 12:13:26

detail wrote:

she’s up and running, after eliminating the odd syntax error.

Cool. Was the error in my code? Let me know if so and I’ll update the above post to correct it.

Maybe a 96 image slideshow at that 80k size is a little hard to handle.

From the plugin’s perspective it shouldn’t make much difference. The plugin is only rendering links to the image (though I don’t know how Showcase handles cacheing of upcoming images, so maybe it’s that). Using a category name of “<space>” might cause it to choose all uncategorized images and I’m not sure how it behaves if you’ve chosen to look at sublevels in that case. Note that if you do want to explicitly show uncategorized images you can use the special syntax category="SMD_EMPTY".

It’ll take a day to make all my changes.

To the gallery? Why? Isn’t the gallery code in a Form or your Page template so it can be written once and used repeatedly?

The question will be: does it work for a multi image article?

Yes it will. Put a comma-separated list of image IDs in the Article Image field and it’ll render the necessary code for Showcase.

and what to do about the sticky no show.

That’s nothing to do with the plugin. By default sticky articles don’t show up unless you explicitly tell them to do so via a separate article tag. Yes it’s a bone of contention around these parts but it’s surprisingly difficult to work around in the core (as it stands) so it has to stay that way.

Textpattern CMS

Textpattern CMS support forum

#745 2010-08-11 11:16:26

Re: smd_gallery: super-flexible gallery generator

#746 2010-08-11 11:59:39

Re: smd_gallery: super-flexible gallery generator

#747 2010-08-11 13:45:31

Re: smd_gallery: super-flexible gallery generator

#748 2010-08-11 13:58:00

Re: smd_gallery: super-flexible gallery generator

#749 2010-08-11 14:47:42

Re: smd_gallery: super-flexible gallery generator

#750 2010-08-11 15:11:00

Re: smd_gallery: super-flexible gallery generator

#751 2010-08-11 16:02:07

Re: smd_gallery: super-flexible gallery generator

#752 2010-08-12 08:40:06

Re: smd_gallery: super-flexible gallery generator

#753 2010-08-12 09:57:45

Re: smd_gallery: super-flexible gallery generator

#754 2010-08-12 10:15:27

Re: smd_gallery: super-flexible gallery generator

#755 2010-08-12 11:46:55

Re: smd_gallery: super-flexible gallery generator

#756 2010-08-12 12:13:26

Re: smd_gallery: super-flexible gallery generator

Board footer