smd_gallery: super-flexible gallery generator

Bloke · 2009-03-01 16:59:43

New version released. v0.51 | gzipped adds a little conditional magic so that maniqui’s tip can be condensed and done natively, without the need for smd_if. It’s not a replacement for smd_if, as it only allows conditional logic that compares stuff to {counter} but I figured that since it was such a recurring theme in the thread, it made sense to include it.

In essence it allows you to create any number of forms and pass the replacement variables to those forms when you hit a particular image (e.g. the 4th and 10th images in the gallery). You can choose to render the form contents above or below the image(s) in question, i.e. prepend or append stuff to the usual form/container at any point in the gallery creation. You can use this for special effects, to annotate particular images, to highlight stuff, to insert adverts mid-gallery, for CSS or other rendering uses, or get completely freaky and pass every image (or some subset thereof) through two or more forms so you can do some bizarre interleaving galleries. You can also use it to simplify a complicated container by farming out different jobs to different forms. The most wacky real-world example you can come up with wins a gold star.

Although it may be considered a contrived example — because it requires three extra forms to be created, which is quite a bit of hassle — to demonstrate the new countform attribute in extremis, you may elect to render maniqui’s 3-pictures-to-a-row gallery natively like this:

<txp:smd_gallery category="animals" countpos="below"
     countform="1:gal_a:smd_above,
               {totalimages}:gal_c,
               smd_every:3:!{totalimages}:gal_b">
   <a href="{url}">
      <txp:thumbnail id="{id}" />
   </a>
</txp:smd_gallery>

Create your three forms like this:

gal_a: <div class="photo-row"> [ for use before 1st image]
gal_b: </div><div class="photo-row"> [ for use after every 3rd image, except the last]
gal_c: </div> [ for use after the last image]

and that will wrap those divs around every 3rd image. See example 10 and the new segment of the help on Count forms for an explanation of the syntax, including how to do stuff when you are not at a particular image in the gallery.

Have fun.

P.S. progre55

For some reason I thought the core slideshow2 script had user callbacks in it. Looks like just the aro_slideshow plugin does, which is a shame. Unless you can make slideshow2 work with the old plugin?

Last edited by Bloke (2009-03-01 17:03:47)

progre55 · 2009-03-01 17:13:58

Bloke;

For this project, I could use the old aro_slideshow if you could give me a little guidance. I would like to stay away from flash if at all possbile to accomplish this effect.

I should add, that I may use slideshow2 for other sections, but the effect with the backgroundcolor changinging will be just for six images as a sorta introduction to the site and so I would be fine with the first aro_slideshow for this …

By the way, still working on the datepicker, but I believe I have a solution that works nicely with the publish/expirey dates so that I will use this as a temp solution for now until the custom field functionality is set. Once I get the final niggles ironed out I will post the solution.

Thanks.

progre55

Last edited by progre55 (2009-03-01 17:19:21)

Bloke · 2009-03-01 17:32:41

progre55 wrote:

I could use the old aro_slideshow if you could give me a little guidance.

I can try but I’ve never used it myself. On the first post it mentions a callback parameter which you might be able to use to read stuff from the DOM like I did in the example I posted before. But I can’t tell from the docs whether this callback is executed every time an image changes. You could test it out like this:

<txp:aro_slideshow some="options" go="here" callback="alert('hello world');" />

But open the page in a completely new browser window because you might have to kill it if it goes mad.

If that works then you can gauge how often the alert box pops up. It’ll either do it once — in which case it’s probably no good to you — or it’ll pop up every time an image changes. In that case you can remove the alert command and try putting in some code like I did above, so that every image will read the “href” of the currently showing image link, and use jQuery to set the background-image CSS property on your chosen target element. Not sure how to do it in practice, it’ll depend how good the callback mechanism is.

Last edited by Bloke (2009-03-01 17:33:58)

progre55 · 2009-03-03 21:49:01

Bloke:

I was unsuccesful in using the Aro Slideshow but, I have found a jquery slideshow that does allow callbacks. I have tested it and I have it operational and transmitting the callback alert – and nothing exploded –

function onAfter() {
    $('#output').html("alert('hello world');");
}

I should have been clearer the last time, I mispoke, what I am looking to do is change is the background color of the web page so each time the slide changes the background color changes in coordination with the slide.

I continue to tinker, but your last sentence is a little puzzling for me. Any additional detail would be appreciated.

Once I get that work, I think it will be straight foward to integrate it into the plug in (at least that is what I am hoping.

progre55

Last edited by progre55 (2009-03-03 22:16:43)

Bloke · 2009-03-04 09:05:53

progre55 wrote:

what I am looking to do is change is the background color of the web page so each time the slide changes the background color changes in coordination with the slide.

Glad your callbacks are working. That’s a start. But to change the bg color is actually far more tricky because you need to have somewhere to read the colour info.

To elaborate a little on what I said above, the way the callback would work is (roughly) this:

when the callback fires, you know an image has changed in the slideshow
get hold of the reference you have been given in your callback function, e.g if you told the callback to call onAfter(this) then you would have a reference to ‘this’ image that is about to be displayed
read some property of the HTML object you have been given — in my first example it was the href, but that’s no good to you if you need to get some colour string like #123456. I’m not sure there are any image attributes you could use for this purpose. Perhaps try wrapping your image in a span, or putting an empty span tag inside your image (<span style="background-color: #123456"></span>?) But if you go to this amuont of trouble and you end up hard-coding the colours in the form to generate the gallery you might as well just hard-code the colours instead of trying to be clever. Depends how many images you are talking about
once you have that background colour string, apply it to the body or some other container div (probably via jQuery)

Maybe something like this (untested) :

function onAfter(obj) {
   var object = jQuery(obj); // Convert the DOM object (aka 'this') to a jQuery object
   var colour = jQuery(object+' span').css('background-color'); // Read the span's colour
   jQuery('#output').css('background-color', colour); // Apply it to the output element
}

? Not sure if that’d work. Might be a lot of hassle and it’ll depend if you can get the colour info to be placed on the page along with each image.

jpdupont · 2009-03-04 11:09:35

Hello Stef,
is it possible with your plugin to generate a xml file, with the list of the images ? I use the monoslideshow flash plugin who need a xml file as param of the swf file. The xml need to be writed in a directory before displaying the slideshow.

Example :

<?xml version="1.0" encoding="utf-8"?>
<slideshow>
	<preferences
		showLoadingIcon = "false"
		showAlbumsButton = "false"
		showThumbnailsButton = "false"
		showImageInfo = "never"
		kenBurnsMode = "random"
		controlAutoHide = "true"
		markFile = ""
	/>
	<album title="Diaporama" description="Diaporama" imagePath="http://www......./images">
		<img src="19.jpg" title="sdfsd" description="sdfsdf" />
		<img src="20.jpg" title="sfsdf" description="sdfsdf" />
		<img src="22.jpg" title="sdfsdf" description="sdfsdf" />
		<img src="21.jpg" title="sdfsdf" description="sdfsd" />
	</album>
</slideshow>

Bloke · 2009-03-04 11:19:02

jpdupont wrote:

is it possible with your plugin to generate a xml file

You mean a bit like this?

keith · 2009-03-04 12:05:51

Aaah dammit, you’re freakishly good, Stef!

jpdupont · 2009-03-04 13:01:50

Yes !!! Thanks Stef ! I’ll try as soon as possible.

jpdupont · 2009-03-04 14:53:24

Works fine if I hardcode the image category in the page.

I create the xml section and page, with the code below. I want to extract with adi_gps the category GET variable :

www.mysite.com/xml?c=bannieres

The variable is extracted, and the images list is correctly generated by the smd_gallery plugin, but xml is badly generated because I get this error messages at the first line : …No txp:article tag….

If I call the same page without variable in URL, xml is ok (and plugin list all the site images).

Where I’m wrong ? I get the no txp:article message only if I put variable in URL.

<txp:mg_setheader /><?xml version="1.0" encoding="utf-8"?>
<slideshow>
<txp:output_form form="monoslideshow_pref"/>
<album title="Diaporama" description="Diaporama" imagePath="/images">
<txp:smd_gallery category='<txp:adi_gps name="c" />'>
     <img src="{name}" title="{alt}" description="{title}" />
</txp:smd_gallery>
</album>
</slideshow>

Bloke · 2009-03-04 15:00:41

jpdupont wrote:

I get this error messages at the first line : …No txp:article tag….

That’s annoying isn’t it! Have you tried adding this:

<txp:if_individual_article>
<txp:article pgonly="1" />
</txp:if_individual_article>

to your page somewhere to sort of “pretend” to TXP that there’s an article tag there?

jpdupont · 2009-03-04 15:12:11

Same problem with your code, BUT …
works fine with this line :

<txp:article pgonly="1" />

TXP bug ?

Bloke · 2009-03-04 22:38:57

jpdupont wrote:

Same problem with your code

Oh, ok. It must be because the one with the URL variable is being treated as an article list. I assumed (wrongly) it was being treated as an individual article.

Bug? Possible, but unlikely. Annoyance? Yes: sometimes you just don’t want an article on the page… :-\

koobs · 2009-03-06 14:16:37

Hey Bloke,

Unusual request here!

Is there a way i can add the same image twice in the article image field? At the moment it seems duplicated entries are ignored (a good idea).

eg. 1-4, 3 returns only 1-4 and not additional instance of image 3.

thanks for any advice.

progre55 · 2009-03-06 22:24:41

Bloke:

Sorry I haven’t responded the last couple of days. I am still working on the background color change item. I think I am close – (and wouldn’t you know I do not need it anymore for the project) – I am going to still try to get it to work and I will let you know how it turns out.

Regarding the calendar plug in and dates (I know it is a different thread) but I wanted to let you know I am using Kevin Luck’s datePicker and applying it to both the published and expired fields. I still need to test it more, but I think it will work. Kevin was nice enough to give me a push in the right direction so that I could modify his datePicker from altering pulldown fields to altering text input fields.

progre55

Textpattern CMS

Textpattern CMS support forum

#391 2009-03-01 16:59:43

Re: smd_gallery: super-flexible gallery generator

#392 2009-03-01 17:13:58

Re: smd_gallery: super-flexible gallery generator

#393 2009-03-01 17:32:41

Re: smd_gallery: super-flexible gallery generator

#394 2009-03-03 21:49:01

Re: smd_gallery: super-flexible gallery generator

#395 2009-03-04 09:05:53

Re: smd_gallery: super-flexible gallery generator

#396 2009-03-04 11:09:35

Re: smd_gallery: super-flexible gallery generator

#397 2009-03-04 11:19:02

Re: smd_gallery: super-flexible gallery generator

#398 2009-03-04 12:05:51

Re: smd_gallery: super-flexible gallery generator

#399 2009-03-04 13:01:50

Re: smd_gallery: super-flexible gallery generator

#400 2009-03-04 14:53:24

Re: smd_gallery: super-flexible gallery generator

#401 2009-03-04 15:00:41

Re: smd_gallery: super-flexible gallery generator

#402 2009-03-04 15:12:11

Re: smd_gallery: super-flexible gallery generator

#403 2009-03-04 22:38:57

Re: smd_gallery: super-flexible gallery generator

#404 2009-03-06 14:16:37

Re: smd_gallery: super-flexible gallery generator

#405 2009-03-06 22:24:41

Re: smd_gallery: super-flexible gallery generator

Board footer