smd_gallery: super-flexible gallery generator

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.

detail · 2010-08-14 08:12:11

Thanks Bloke, it’s all up and running (almost perfectly).

The syntax error was, well, I now know the difference between inches and “ when coding. ie 2” or 2 inches. Your code worked perfectly.

I’ve also created a work around for the lack of the stickies throwing out the article image, just hope anyone else doesn’t look under the bonnet. It’s what may be termed “unsightly”, but, hey, it seems to work. Cheers, GJ

Last edited by detail (2010-08-14 08:13:05)

mauricerm · 2010-08-20 18:32:17

hello, I was reading the forum but found no satisfactory answer. I am developing a website, and the main part I put a slideshow, and follow the instructions of Example 4, which I have just listed, and does not work.

Here the page:
http://www.acontecer.mx/tecuala.gob.mx

the slideshow should be displayed in the top of the page,

the tag is as follows:

<txp:smd_gallery category="ejes-de-desarrollo" form="slideshow" combo="imglist:{id}{ext}" collate="quote:{imglist}:{alt}"/>

the block is as follows:

<script type="text/javascript">
myShow1 = new Slideshow("slideshow1",
  { hu: "<txp:site_url />images/",
    images: [{imglist}],
    captions: [{alt}],
    classes: ["prev","next","active"],
    type: "fade"
  });
</script>
<div id="slideshow1"><img src="<txp:site_url />images/{id#3}.jpg" alt="{alt#3}" width="{width#3}" height="{height#3}" /></div>

Additionally,

I downloaded the most current version of the slideshow

and my head is formed as follows:

<script type="text/javascript" src="<txp:site_url />js/mootools.js"></script>
	<script type="text/javascript" src="<txp:site_url />js/slideshow.js"></script>
	<script type="text/javascript" src="<txp:site_url />js/slimbox.js"></script>
	<link rel="stylesheet" type="text/css" href="<txp:site_url />css/slimbox.css" />

detail · 2010-09-02 02:28:57

Yeah, me again.

Just a query here Mr B. I can’t see a way to produce a thumbnail from an article_image using smd_gallery. It doesn’t appear to have an easy call up for either just the image, a thumbnail or a popup. I can only get the image, not a thumb.

The deficiency is in either of two places, smd_g or at the top of my body, just under where the hair should be. I’m trying most variations along the lines of:

<txp:smd_gallery id="?article_image" thumb="1" limit="1" delim="@" imgsize="150px, 69px" />

This, of course, produces a link to a thumbnail from the full sized article image.

Nice to just produce the thumb.

Cheers

Last edited by detail (2010-09-02 07:20:36)

Bloke · 2010-09-02 08:30:05

detail

If you don’t specify a form or container content, smd_gallery uses default markup, which is ‘show me a full size image’. Hence that’s what you’re seeing. That should solve the mystery.

cuda · 2010-09-05 16:56:05

I am trying to grab image ids from my article image field but I get no output. My tag is this:

<txp:smd_gallery debug=“2” id=”?article_image” form=“main-image”/>

main-image form is:

<txp:image id=”{id}” />

in debug I get this:

++ INCLUDED/EXCLUDED IDs, NAMEs AND CATs ++

array ( 0 => ‘\‘article_image\’‘,
)

++ WHERE CLAUSE ++

(1=1 AND (txp_image.id IN (‘article_image’)) ) ORDER BY txp_image.id asc

SELECT DISTINCT txp_image.name,txp_image.id,txp_image.alt,txp_image.caption,txp_image.category,txp_image.author,txp_image.date,txp_image.ext,txp_image.w,txp_image.h,txp_image.thumb_w,txp_image.thumb_h,txp_image.thumbnail FROM txp_image WHERE (1=1 AND (txp_image.id IN (‘article_image’)) ) ORDER BY txp_image.id asc LIMIT 0, 99999

++ COMBOs ++

array (
)

So it is taking article_image literally and passing the string and not getting the ids from the field. Any ideas? Can I use multiple id’s in the article image field like so, 1,3,5?

I am on 4.2.0

smd_gallery 0.62
smd_library 0.36

Thanks in advance as always

Last edited by cuda (2010-09-05 17:01:00)

Bloke · 2010-09-06 08:00:31

cuda wrote:

it is taking article_image literally

As far as I recall, the only time it will do this is if you are using the gallery outside an article context because then article_image is not defined. Are you trying to display the gallery on a list page? It needs to be inside an article, or in an article (or article_custom) container/form.

And yes you can use multiple IDs.

Last edited by Bloke (2010-09-06 08:01:14)

cuda · 2010-09-06 20:06:37

<——Idiot alert – Yeah I was in a section not the article…thanks bloke as always! having some way to store section data would be kinda nice. Some sort of custom field for sections

detail · 2010-09-08 08:06:38

Just an update on my image display quest.

My conundrum was that I needed the article image ids for two conflicting reasons.

upm_article image for my thumbnail in an article list needs a comma separated list, although I only want one to show.

smd_gallery needs an @ to separate the numerous listed article images.

Solution: put both “comma” and “@” in the article image box, ie [31, 31@ 32@ 33@ 34] etc

Who wudda guessed that would work?

The [31,] works for the article list thumbnail, the [@s] for the slideshow. And it didn’t explode.

jrubio · 2010-10-11 02:07:17

Hi,

I am using smd_gallery with this from

bc.
<div id=“my_show” class=“slideshow”> <a rel=“lightbox” href=”{imagedef#1}”><img src=”{imagepath#1}{imagedef#1}” alt=”{alt#1}”/></a>
</div>

And this is my article tag

<txp:smd_gallery category=“front-page” form=“gallery_one” collate=“quote:{imagedef}” />

I actually want to add the thumbnails at the top of the slideshow, how do I do that?

Here’s my result:

http://bahamasny.net/photos

I am using [Aeron Glemann] slideshow with mootools.js.

Any help would be appreciated.

Last edited by jrubio (2010-10-11 08:29:27)

chris_goodhue · 2010-11-13 20:00:57

I’m having a weird problem, and am pretty sure I have done everything correctly.

All I am trying to do is have this work as a super straight forward gallery.
http://s111698.gridserver.com/machinery/

This is the smd_gallery tag:
<txp:smd_gallery category=“machinery” form=“gallery” />

This is the gallery form:
<li>
<a rel=“shadowbox{category}” href=”{url}” caption=”{name}”>
{name}
</a>
</li>

The images open up fine, but I can not go through the rest of the images in the gallery.

I apologize if this is ridiculously easy and I’m over looking something totally obvious.
-Chris

Textpattern CMS

Textpattern CMS support forum

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

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

Re: smd_gallery: super-flexible gallery generator

#756 2010-08-14 08:12:11

Re: smd_gallery: super-flexible gallery generator

#757 2010-08-20 18:32:17

Re: smd_gallery: super-flexible gallery generator

#758 2010-09-02 02:28:57

Re: smd_gallery: super-flexible gallery generator

#759 2010-09-02 08:30:05

Re: smd_gallery: super-flexible gallery generator

#760 2010-09-05 16:56:05

Re: smd_gallery: super-flexible gallery generator

#761 2010-09-06 08:00:31

Re: smd_gallery: super-flexible gallery generator

#762 2010-09-06 20:06:37

Re: smd_gallery: super-flexible gallery generator

#763 2010-09-08 08:06:38

Re: smd_gallery: super-flexible gallery generator

#764 2010-10-11 02:07:17

Re: smd_gallery: super-flexible gallery generator

#765 2010-11-13 20:00:57

Re: smd_gallery: super-flexible gallery generator

Board footer