smd_gallery: calling all testing masochists :-)

Bloke · 2008-02-14 02:35:49

PLEASE NOTE: Now officially released as a plugin

After many months of indecisiveness over ways to enhance smd_slimbox I finally took the plunge and just rewrote it almost from scratch. The result is smd_gallery and is proof that plugins don’t have to be beautiful to be powerful.

It takes the best features of wet_for_each_image and smd_slimbox, sits back wearing mid-priced lingerie puffing a fine cigar and says “you’re the boss: spank me”. It’s tested fairly well but isn’t fully released yet due to the partial plugin help and also it’s kind of work-in-progress to test the waters and see what the reaction is from you guys. If you like it or don’t like it or can think of ways to improve it now is the time to speak up before it becomes an official plugin.

A quick feature rundown

Anyone who has used smd_slimbox knows the sort of thing to expect in terms of options:

After a unanimous “yes” from my poll, smd_slimbox_inc is gone. Hurrah! You now specify your own javascript libraries and css such as mootools, jquery, prototype, lightbox, slimbox, thickbox, litebox, moonbox, yet-to-be-inventedbox, thumbpop, jpop, even slideshow (sorry rloaderro, though your plugin is still easier to use!)
Your gallery layout is defined in a form (or between the opening/closing smd_gallery tags). The way the plugin injects the picture details into the form is the same way wet_for_each_image works. Just moreso (see later). wraptag, break and class are supported as standard
Paging is now a bit like ob1_pagination. Not as many plugin options but virtually as configurable, and supports multiple galleries per page. Specify the layout of your pagination using a 2nd form controlled by the pageform attribute. navwraptag, navbreak and navclass do what you expect with this form. Again, more later
Pull images out of the TXP database using comma-separated lists of id and category exactly as with smd_slimbox. The usual document variable culprits are available: ?c, ?s, ?t, ?id, ?pg, ?article_image, ?keywords, ?customField plus any others you can find on the page (full list of useful ones to be published with the plugin help when it’s written). You can also negate fields with !c, !s, !t, etc or combine them e.g. category=“animals, big-?s_?c, “ to pull images out of categories labelled “animals” and (say) “big-zoo_lion”
Sub-category support has been enhanced with the new sublevel attribute. This takes an integer and specifies how many “levels” down to traverse each matching category. sublevel="0" (the default) is just the top-level, 1 is the top-level+1st sub-cat, 2=top-level+the next 2 sub-cats and so on. sublevel="all" is pretty much everything
Totally untested but there’s support for displaying images via directory. It works on /path/to/my/directory style dirs but of course the fullsize images don’t render. In theory it should also work with URLs depending on the compiled in PHP options of your ISP. I cannot test this because my ISP doesn’t have the required options; please let me know if it works. sublevel controls how far down you go in the directory structure and a companion attribute match works alongside this: it allows you to include or exclude images/subdirs in the tree using the usual syntax of either a fixed name, a variable/list of variables from an article field via ?fieldname, or words/fields to exclude via the !something syntax. Note that the dir should contain images in the format myImage.jpg and myImaget.jpg (for thumbnails) and all matches are automatically considered “wild”
sort is exactly the same as orderby in smd_slimbox except it now works like existing txp tags, e.g. sort="category asc". Random is supported (of course!) and works the same way as smd_slimbox. Untested with directory mode but it should work ok
limit is the number of images to show per page, maxlimit is the total maximum number of images to show across all pages. offset can be used to skip over ‘n’ images to start a little way into the list (not fully tested: reports welcome)
thumblimit and thumboffset can be used to stop the thumbnail output after ‘n’ images, thus allowing you to “launch” a lightbox effect from a single image. Judicial use of sort, id and thumboffset should allow you to select which image to display. If you want to launch it from a text link instead, use the text attribute
thumb displays the fullsize pic as a thumbnail instead of a fullsize pic :-s
thumbsize works the same as smd_slimbox to allow you to specify the width/height of thumbnails
galleryid works the same as smd_slimbox to override the default gallery ID assigned to each slimbox tag
delim allows you to override the comma as a delimiter. paramdelim allows you to override inter-parameter delimiters (see later). Default is the colon (:)
debug takes an integer and spits out varying levels of verbosity depending on how high you make the number. 4 is max.

Usage

OK, enough about the options, how do you use it? Well, with no options it just shows all images from your TXP database. Use the options to limit what it chooses to present to the form. Now, your form is where the action’s at. Let’s throw you in the deep end and give a taste of what’s possible:

<txp:smd_gallery category="animals" sublevel="all" form="gallery" />

If you wanted to make a thickbox gallery from the above images, you’d include jquery, plus the thickbox js + css files, then you could put something like this in your ‘gallery’ form:

<a class="thickbox" href="<txp:site_url />images/{id}{ext}" alt="{alt}" title="A picture of {title}" height="{height}" width="{width}">
 <txp:thumbnail id="{id}" />
</a>

The plugin replaces anything in curly braces {} with the corresponding value for each matching image. It’s wet_for_each_image on steroids: copious kudos to wet for the idea.

If you wanted to do it thumbpop-stylie so the image appeared on the page when the thumb was moused-over, your tag is the same (just add an img and a span to hold the fullsize pic/caption):

<img id="fullsize" src="empty.jpg" /><span id="fullcaption"></span>
<txp:smd_gallery sublevel="all" category="animals" form="gallery" />

Your form:

<a href="{url}" title="{title}" onmouseover="document.getElementById('fullsize').src = this.href; document.getElementById('fullcaption').innerHTML = this.title; return false;">
<img src="{thumburl}" alt="{alt}" />
</a>

Use your imagination to come up with alternatives. There are different ways of specifying stuff and plenty of shortcuts to save typing…

The replacement tags

Here’s the current list of replacement tags available in your form:

{id} : the image ID (or, in directory mode, the filename without its extension)
{name} : the full image filename as defined in the database, usually including extension
{ext} : the file extension including period
{category} : the image category
{author} : who uploaded the image
{url} : the URL of the fullsize image
{thumburl} : the URL of the thumbnail
{imagepath} : the directory the image is in
{imagedef} : just the file name part of the image (e.g. 5.jpg)
{thumbdef} : just the file name part of the thumbnail (e.g. 5t.jpg)
{alt} : the alt text
{title} : the caption
{date} : image upload date
{width} : image width
{height} : image height
{thumbwidth} : thumbnail width (if defined: see thumbsize)
{thumbheight} : thumbnail height (ditto)
{thumbwunits} : thumbnail width units (e.g. px, %, em etc. Only if defined via thumbsize)
{thumbhunits} : thumbnail height units (ditto)
{hasthumb} : if the image has an associated thumbnail or not (probably not much use)
{object} : a special item containing either the text OR the image tag of the corresponding thumbnail but only if thumblimit allows it. i.e. if thumblimit="1" this variable is only set for the first thumbnail in the list. Every other time it is empty

If you don’t like the above or find yourself always using a particular combination of tags, or want to inject any article variable (custom field, keyword, excerpt, etc) then define your own replacement tags! Yup, there’s a combo parameter. Use it like this to make as many comma-separated combinations of tags as you like:

<txp:smd_gallery category="animals" combo="artim:found in ?s (photographer={author} and extension is {ext})" form="gallery" />

so now {artim} is available to your form and might be replaced with “found in zoo (photographer=Bloke and extension is .jpg)”. $pretext is also available for those geeks who know what’s in it (temporarily use the debug="4" attribute to view all available variables). One thing to watch out for is that the space character isn’t necessarily a delimiter for ? variables (because custom fields can have spaces in them). So combo="doesnotwork:?s in ?category1" will look for a variable labelled “s in” and one called “category1”. Only one of those exists!

paging

Adding a pageform allows you to use the following replacement tags in your chosen form to output various navigation items that link to the relevant page of your gallery:

{navfirst} : the first page (default label: “First”)
{navprev} : the previous page (default label: “«”)
{navearlier} : any page numbers before the current page
{navthisurl} : the current page with a URL link to itself
{navthis} : the current page without a URL link
{navlater} : any page numbers after the current page
{navnext} : the previous page (default label: “»”)
{navlast} : the last page (default label: “Last”)

The current page has a fixed class of “current” and each item is currently a <li> for easy styling.

To avoid a zillion options, custom labels are defined directly in the form itself thus:

{navfirst:1st}

This is also a cheat which, although currently untested (anyone?), should allow you to use MLP snippets, e.g.:

{navfirst:##firstLabel##}

You can also override the number of items displayed by navearlier and navlater by specifying a colon and a number. So to only show 2 items to the left of the current page and 4 items to the right, use {navearlier:2} {navlater:4} in your form. Currently {navearlier} and {navlater} only display arabic numerals. Any ideas on how to offer other character sets greatly appreciated.

Advanced options

Primarily for mrdale because he loves playing with stuff, if you want to get really funky you can put the plugin into a 2nd mode called ‘collation mode’. In this mode your chosen form is not executed for every image; it is only replaced once at the very end. This allows you to build up an array of all matching images and output them in one go, which is very handy for doing slideshows and stuff.

It’s best explained by example:

collate="quote:{imagedef}:{alt}"

will flip the plugin into collation mode. Since the plugin delimiter is a comma by default, this will generate comma-separated lists of every matching id, every name, every alt and so on. So specifying {alt} in your form will insert the whole comma-separated list. Use the ‘quote’ (or ‘dblquote’) option to wrap each item in the given list of replacement tags with double-quotes. Use sglquote:{tag1}:{tag2}:… to apply single quotes. And, yes, you can quote your combos as well :-)

But what if you want to output a single image to start things off as well as your list? In collation mode you have additional tag syntax which allows you to pull individual images into your form as well. Simply add the id # to the tag; for example, in your form that has collated 3 images:

{name} might output "1.jpg","15.jpg","42.jpg"
(name#1} would only output 1.jpg (without quotes since it’s only one item)
(name#3} would only output 42.jpg

Messing around with pulling out individual items and lists can yield some very interesting results and allows some completely wacky galleries to be generated. Try combining smd_gallery tags with <txp:if_different> for a real mind scramble :-) TXP can probably be made to integrate with virtually every third party gallery out there. If I’ve missed any flavour, let me know!

Call to arms

Besides this post there’s little plugin help at the moment. Until the features and names are fully decided (based on your feedback) I’m not going to put to much effort into documentation. There’s a brief example text file to give you some ideas on usage and things you can do with it. The rest is up to your imagination.

If you make a particularly devious/awesome gallery with the plugin, let me know the tag/forms you used and I’ll include it in the help file with your name credited.

Please take the plugin away and make it bleed. I’m sure there are things that’ll make it cry and I’ll address them if I can. If you have any better names for things, or combos you think should be in the plugin by default, etc, make your cases here and we’ll shape this up for release.

I present the official public beta v0.1 (zipped version). No libraries currently required; all the library functions have been optimised/rewritten directly in the plugin to take advantage of things in the core I didn’t know when I started. They may get libraried at a later date.

Many thanks to numerous plugin authors (especially wet) and contributors over the past year or so, who have helped fuel inspiration for this mental plugin. I hope it’s useful.

Now, go play.

Revision history
————————

All available beta versions and changes are listed here. Each entry indexes the relevant post(s) in this thread to learn about the features.

14 Feb 08 | 0.1 [ compressed ] | Initial release, as above
19 Feb 08 | 0.2 [ compressed ] | Added {galleryid} (thanks rloaderro) and some skeleton docs

Last edited by Bloke (2008-03-12 03:21:00)

nardo · 2008-02-14 04:59:08

Thumbs Up Bloke

jstubbs · 2008-02-14 06:58:30

Fantastic! I’ll take a look this weekend.

gluteus · 2008-02-14 07:34:02

Borat will say: Niiiiiice!

Now, I collected all needed libraries…
Here you are Gallery Libraries

I didn’t look if the jquery.js is newer then the one in \textpattern…

dave

Last edited by gluteus (2008-02-14 07:44:10)

jelle · 2008-02-14 09:44:14

Thanks Bloke…..this is great!

gluteus · 2008-02-14 12:06:15

solved

It was the mootools.js. I clicked on nearly everything and now it works.

gallery.zip is updated.

—————solved——————
Need some help to get it work.

I try slimbox.
head:
Your example for slimbox. I include it over a form.
<script type="text/javascript"src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/slimbox.js"></script>
<link rel="stylesheet" type="text/css" href="/css/slimbox.css" />

Then I use in an article:
<txp:smd_gallery category="Bilder_Feb08" form="gallery" />

My form “gallery” is:
<a rel="lightbox-{category}" href="<txp:site_url />images/{id}{ext}" alt="{alt}" title="A picture of {title}" height="{height}" width="{width}"> <txp:thumbnail id="{id}" /> </a>

In this way the pictures are showing normal, no js…

Questions:
1. What should mootools.js have included? There are many options available. I just selected the first needed basic selection.

2. Should the form “gallery” be “misc” or “article”?

Thanks

dave

Last edited by gluteus (2008-02-14 14:11:22)

gluteus · 2008-02-14 18:39:06

Ok, now I’m stucked in Thumbpop.

My article looks like this:
<img id="fullsize" src="empty.jpg" /> <span id="fullcaption"></span>
<txp:smd_gallery category="Bilder_Feb08" form="gallery-thumbpop" />

My form “gallery-thumbpop” like this (your default):
<a href="{url}" onclick="document.getElementById('fullsize').src = this.href;return false;">
<img src="{thumbdef}" alt="{alt}" /> </a>

Effect: nothing is showing…

What did I misunderstood?

Thanks.
dave

Bloke · 2008-02-14 21:21:49

gluteus wrote:

It was the mootools.js. I clicked on nearly everything and now it works.

Hi dave, first of all thanks for trying the plugin out. Secondly, thanks for making the gallery.zip file; very useful. As you found out, slimbox has some very specific requirements from the mootools library. See Christophe’s slimbox page for the modules that are required. But since the plugin can handle many mootools type effects it’s probably a good idea that you selected most things!

Should the form “gallery” be “misc” or “article”?

I don’t think it matters; fwiw, I use “misc”.

Effect: nothing is showing… What did I misunderstood?

You have misunderstood nothing. I’ve just spotted a mistake in my example. The {thumbdef} outputs something like “5t.jpg”. On an article page this won’t resolve because the images are in the “images” directory. The slimbox one worked because it used the full URL to the image. I’ll update the examples, but try one of the following instead:

<img src="/images/{thumbdef}" alt="{alt}" />

or

<img src="{thumburl}" alt="{alt}" />

or:

<a href="{url}" onclick="document.getElementById('fullsize').src = this.href;return false;">
{object}
</a>

That should sort you out. Apologies for the wrong documentation; it was 3am when I wrote it. Not that the time of day is a valid excuse for sloppy testing :-\

Last edited by Bloke (2008-02-14 21:24:00)

jelle · 2008-02-14 21:54:51

Hi guys….

just letting you know about Jquery Lightbox -> http://leandrovieira.com/projects/jquery/lightbox/
I’m not sure but I think its like Moonbox…..a jQuery clone of Lightbox……

EDIT: The nicest feature is that it resizes to the browser if that is smaller than the actual picture.

Last edited by jelle (2008-02-15 10:12:22)

Bloke · 2008-02-15 02:42:28

Thanks for the link jelle.

I’ve just uploaded a slightly revised version of the plugin. It has the beginnings of help and also extends the debug system.

For anybody who is having trouble getting their head round the plugin, switch debug on and refresh your page. You will get back some ++ UPPERCASE HEADINGS ++ and diagnostic output beneath each section depending how high the number is:

0 = no debug output
1 = the query and the replacement arrays (useful to see what was matched per image and what tags are available for use in your forms)
2 = level 1 + combos, labels and matched IDs/categories
3 = level 2 + the database record set and final output sent to the page (saves doing “view source”)
4 = level 3 + a list of all available article variables. If you’re stuck for what you can use with a ? variable then this option is for you. NOTE: it contains potentially sensitive info so don’t leave it switched on for long in case search engines index it

Comparing the diagnostic output of your chosen debug level with the tag results should give you some clues as to what is available for your use and may also help you track down why things aren’t working the way you expect. It may also be useful for pasting salient parts of it in the thread here if you think you’ve found a bug ;-)

If you’ve already downloaded the plugin, grab the updated version from the 1st post.

Last edited by Bloke (2008-02-15 02:43:38)

gluteus · 2008-02-15 05:57:36

Hi Stef

Thanks a lot for helping.

—-Thumbpop—-
It works! But if this crazy jumping (second example with mouse over) is normal, I don’t like it… I have several pictures in different sizes, so it’s nothing for me. See for yourself: Example-gallery.
If there are possibilities…
1. The first time I see an inexistent picture. It’s the placeholder for the full pics. Little bit ugly…
2. Could in some way the position of the full pics be fixed? So there would not be this jumping around. Horizontally.
3. A mouse out would be nice, that let disapear the full picture and you are in the state like in the beginning. Till now the last visited pic last in place.

But hey, these are peanuts! I like your development very much! I’m a great fan of slimbox, I like these smooth transitions. GREAT!

Thanks

dave

Last edited by gluteus (2008-02-15 05:58:05)

gluteus · 2008-02-15 06:06:15

It would be great, if somebody could turn thumbpops into something similar like tip messages. For example like these here. What do you think? ;-)

Textpattern CMS

Textpattern CMS support forum

#1 2008-02-14 02:35:49

smd_gallery: calling all testing masochists :-)

#2 2008-02-14 04:59:08

Re: smd_gallery: calling all testing masochists :-)

#3 2008-02-14 06:58:30

Re: smd_gallery: calling all testing masochists :-)

#4 2008-02-14 07:34:02

Re: smd_gallery: calling all testing masochists :-)

#5 2008-02-14 09:44:14

Re: smd_gallery: calling all testing masochists :-)

#6 2008-02-14 12:06:15

Re: smd_gallery: calling all testing masochists :-)

#7 2008-02-14 18:39:06

Re: smd_gallery: calling all testing masochists :-)

#8 2008-02-14 21:21:49

Re: smd_gallery: calling all testing masochists :-)

#9 2008-02-14 21:54:51

Re: smd_gallery: calling all testing masochists :-)

#10 2008-02-15 02:42:28

Re: smd_gallery: calling all testing masochists :-)

#11 2008-02-15 05:57:36

Re: smd_gallery: calling all testing masochists :-)

#12 2008-02-15 06:06:15

Re: smd_gallery: calling all testing masochists :-)

Board footer