smd_gallery: super-flexible gallery generator

idesign123 · 2010-01-16 01:18:18

Stef – Thanks so much for the “caption” code!!! It worked perfectly :-)

Last edited by idesign123 (2010-01-16 01:18:37)

-P- · 2010-01-22 12:24:04

Hello! Firstly, thank you for a great plugin. Assumably all went good but on cross browser testing it seems like gallery does not work with IE7 and prior versions.

I am quite (very) n00b with javascript so maybe I just messed up?
Sorry if my code looks horrible, I basicly just gathered and copypasted stuff I found from this thread

It’s supposed to be Slideshow2 gallery with non linking images, no controls or captions, just thumbnails and gallery image. Seems to work on everything else than on IE…

article form
<txp:smd_gallery form="gallery" category="first" collate="quote:{imagedef}" sort="id" order="asc"/>

gallery form

<div id="photos" class="gallery">
<img src="{imagepath#1}{imagedef#1}" alt="{alt#1}" />
</div>
<script type="text/javascript">
  var data = [{imagedef}];
  var myShow = new Slideshow('photos', data, {controller: false, hu: '{imagepath#1}', linked: false});
</script>

Atm even quick and dirty solution will do, I just need to get this up and running also with IE.
But am also open to other gallery options with smd_gallery, as long as they give same slideshowish effect and are preferably as light as possible.

Last edited by -P- (2010-01-22 12:25:34)

THE BLUE DRAGON · 2010-01-31 17:36:26

For some reason the paging is not working for me.
It was working fine in the past with an older version of the plugin and on txp 4.0.8
but now it just not paging o_O
I run it on TXP 4.2 with plugin ver 0.53 + lib ver 0.36

I do get the paging links and after I click on them it does changing the url,
but the images are staying as the first page images.
and the current page link ({navthisurl}) is staying on “1” even that the url is now on page #4

This is my gallery form:

<txp:smd_gallery category="?Photos Category" pageform="photos_paging" pagepos="above,below" navwraptag="div" navclass="photos_paging" navbreak="div" limit="150">
<a href="{url}" rel="photos<txp:article_id />" title="<txp:custom_field name="Photos Gallery Title" />" class="photo" onfocus="if(this.blur)this.blur()"><img src="{thumburl}" border="0" alt="" /></a>
</txp:smd_gallery>

This is my paging form:

{navfirst}{navprev}{navearlier}{navthis}{navlater}{navnext}{navlast} <div>Displaying {totalimages} of {maximages} photos.</div>

What am I missing here please?

Bloke · 2010-02-01 10:58:56

THE BLUE DRAGON wrote:

What am I missing here please?

Nothing as far as I can tell, it works fine for me. We might need to do some diagnostic tomfoolery here to figure out what’s going on. First, a few checks:

Are you generating the gallery from an individual article context? It needs to be that way so it can read the custom fields you are using
When you click on the next page, does the URL stay the same apart from the ‘X’ in the ?smd_glry_nnnn=X part? If not, I suspect it’s because it’s falling back to an article list view and is thus “losing” the custom field containing the gallery attributes
What does the plugin set ?smd_glry_* to? Using your code, I see smd_glry_984f (yours will be different because the category names are different for you). Does that value prevail in the URL when you navigate between pages or does it change? If it changes, that’s the problem and we need to figure out why
150 images per page! Wow… does it make any difference if you reduce this, just to test it out?

If none of that helps, try adding debug="1" to the tag and let’s see if we can figure out why things are breaking by looking at the SQL.

Incidentally, one of the things I was missing was a bug in v0.53 (and, in fact every version prior to this). The short version of proceedings is that I was (stupidly) not limiting the category name to image categories. Thus, if you had an image category called “cat1” with a title “First image cat” and created a file category called “cat1” with a title “First file cat”, smd_gallery would duplicate each image — since the two categories differ only by title, my brain-damaged SQL statement included them both.

This is now fixed in v0.54. I suspect this contributed to the problems that maniqui, cuda and visualpeople had with duplicated images. Sorry it took me so long to figure this out guys.

Bloke · 2010-02-01 11:05:53

P wrote:

gallery does not work with IE7 and prior versions.

I’m not very good at figuring out why stuff doesn’t work across browsers. My usual hit-list is to check the DOCTYPE and/or markup isn’t triggering quirks mode, then check that the javascript is doing what it is supposed to be doing (i.e. no odd errors are generated). If that fails you could seek help on the slideshow2 forum, if there is one. Last resort is to put a big banner on your page telling people to use a proper browser ;-)

THE BLUE DRAGON · 2010-02-01 17:04:09

◦Are you generating the gallery from an individual article context?
◦When you click on the next page, does the URL stay the same apart from the ‘X’ in the ?smd_glry_nnnn=X part?

yep

◦What does the plugin set ?smd_glry_* to?

?smd_glry_f47e=3

Does that value prevail in the URL when you navigate between pages or does it change?

yep it’s prevail

◦150 images per page! Wow… does it make any difference if you reduce this, just to test it out?

I changed it to 50 and still not working, I got 568 images in that category.

Here is the debug info:

++ WHERE CLAUSE ++
(1=1 AND  (txp_image.category IN ('my_image_category_name'))  AND txp_category.type = "image") ORDER BY txp_image.category 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, txp_category.title AS category_title
			FROM txp_image LEFT JOIN txp_category
			ON txp_image.category = txp_category.name
			WHERE (1=1 AND  (txp_image.category IN ('my_image_category_name'))  AND txp_category.type = "image") ORDER BY txp_image.category asc
			LIMIT 0, 99999

++ REPLACEMENTS : IMAGE 1 ++
array (
  '{navfirst}' => '<div class="empty">First</div>',
  '{navprev}' => '<div class="empty">&laquo;</div>',
  '{navearlier}' => '',
  '{navthis}' => '<div class="current empty">1</div>',
  '{navthisurl}' => '<div class="current"><a href="/photos/my_image_category_name/?smd_glry_f47e=1">1</a></div>',
  '{navlater}' => '<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=2">2</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=3">3</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=4">4</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=5">5</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=6">6</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=7">7</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=8">8</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=9">9</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=10">10</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=11">11</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=12">12</a>
</div>',
  '{navnext}' => '<div><a href="/photos/my_image_category_name/?smd_glry_f47e=2">&raquo;</a></div>',
  '{navlast}' => '<div><a href="/photos/my_image_category_name/?smd_glry_f47e=12">Last</a></div>',
  '{navthispageurl}' => '/photos/my_image_category_name/?smd_glry_f47e=1',
  '{navnextpageurl}' => '/photos/my_image_category_name/?smd_glry_f47e=2',
  '{navprevpageurl}' => '',
  '{navfirstpageurl}' => '/photos/my_image_category_name/?smd_glry_f47e=1',
  '{navlastpageurl}' => '/photos/my_image_category_name/?smd_glry_f47e=12',
  '{totalimages}' => 50,
  '{totalpages}' => 12,
  '{maximages}' => 568,
  '{id}' => '349',
  '{name}' => '290.jpg',
  '{ext}' => '.jpg',
  '{category}' => 'my_image_category_name',
  '{category_title}' => 'my_image_category_name',
  '{author}' => 'admin',
  '{hasthumb}' => '1',
  '{url}' => 'http://www.my-domain-name.nl/images/349.jpg',
  '{thumburl}' => 'http://www.my-domain-name.nl/images/349t.jpg',
  '{imagepath}' => 'http://www.my-domain-name.nl/images/',
  '{imagedef}' => '349.jpg',
  '{thumbdef}' => '349t.jpg',
  '{alt}' => '',
  '{title}' => '',
  '{caption}' => '',
  '{thumbwidth}' => '80',
  '{thumbheight}' => '80',
  '{thumbwunits}' => '',
  '{thumbhunits}' => '',
  '{width}' => '720',
  '{height}' => '480',
  '{wunits}' => '',
  '{hunits}' => '',
  '{date}' => '13.01.10',
  '{galleryid}' => 'smd_glry_f47e',
  '{index}' => 0,
  '{counter}' => 1,
  '{thumbindex}' => 0,
  '{thumbcounter}' => 1,
  '{onchange:category}' => 'my_image_category_name',
  '{grouptagend}' => '',
  '{grouptagstart}' => '',
  '{object}' => '<img src="http://www.my-domain-name.nl/images/349t.jpg" width="80" height="80" />',
)

++ PAGING REPLACEMENTS ++
array (
  '{navfirst}' => '<div class="empty">First</div>',
  '{navprev}' => '<div class="empty">&laquo;</div>',
  '{navearlier}' => '',
  '{navthis}' => '<div class="current empty">1</div>',
  '{navthisurl}' => '<div class="current"><a href="/photos/my_image_category_name/?smd_glry_f47e=1">1</a></div>',
  '{navlater}' => '<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=2">2</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=3">3</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=4">4</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=5">5</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=6">6</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=7">7</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=8">8</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=9">9</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=10">10</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=11">11</a></div>
<div>
<a href="/photos/my_image_category_name/?smd_glry_f47e=12">12</a>
</div>',
  '{navnext}' => '<div><a href="/photos/my_image_category_name/?smd_glry_f47e=2">&raquo;</a></div>',
  '{navlast}' => '<div><a href="/photos/my_image_category_name/?smd_glry_f47e=12">Last</a></div>',
  '{navthispageurl}' => '/photos/my_image_category_name/?smd_glry_f47e=1',
  '{navnextpageurl}' => '/photos/my_image_category_name/?smd_glry_f47e=2',
  '{navprevpageurl}' => '',
  '{navfirstpageurl}' => '/photos/my_image_category_name/?smd_glry_f47e=1',
  '{navlastpageurl}' => '/photos/my_image_category_name/?smd_glry_f47e=12',
  '{totalimages}' => 50,
  '{totalpages}' => 12,
  '{maximages}' => 568,
)

Bloke · 2010-02-01 17:16:49

THE BLUE DRAGON

Weird. If your article is an individual article, I can’t figure out why the paging URLs look like this:

/photos/my_image_category_name/?smd_glry_f47e=2

That implies that your section is ‘photos’ and your article is called ‘my_image_category_name’, right? If so, I don’t know where the trailing slash before the question mark is coming from. Perhaps that’s throwing things into disarray? Can you somehow generate the URL without the slash? (although I must admit it makes no difference on my test site)

Another wild card: are you using gbp_permanent_links? If so, is there a rule getting in the way and not passing the ?smd_glry_f47e variable back to the page?

THE BLUE DRAGON · 2010-02-01 17:56:57

Yea that was the problem that my article title was same as the category name
so I changed the title + the URL-only title to something else, and now it works fine :)

Thank you! =)

And is there a way to show the paging only when it needs to
so if it’s less then 150 images (as my limit#) it will not show any of the paging form?
maybe putting the pageform="" pagepos="" navwraptag="" navclass="" navbreak="" into some “if” tag ?

Bloke · 2010-02-01 21:31:32

THE BLUE DRAGON wrote:

And is there a way to show the paging only when it needs to

Untested but perhaps something like this inside your pageform might work:

<txp:smd_if field="{maximages}" operator="gt" value="150">
{navfirst}{navprev}{navearlier}{navthis}{navlater}{navnext}{navlast} <div>Displaying {totalimages} of {maximages} photos.</div>
</txp:smd_if>

THE BLUE DRAGON · 2010-02-01 21:50:20

why not, why not! yep working good :)
thank you ;)

Bloke · 2010-03-01 16:28:15

Just published an enhancement to the plugin: v0.55 introduces the ability to filter by image name. It’s a bit more involved than the id and category attributes because you can do some wild things with it. For example:

name="tiger.jpg, zebra.jpg, penguin.jpg" would show those 3 images
name="monkey:regex" would find any images with the word ‘monkey’ in them
name="tiger.jpg, ^monkey:regex" would find any images that started with the word ‘monkey’, and also show tiger.jpg
name="^monkey[[:digit:]][[:digit:]].jpg$|regex" would find any jpg images that started with the word ‘monkey’ and were followed by two digits. Note that in this example paramdelim="|" would need to be specified as well because we’re using the colon in the regular expression

You can do all the usual things like get lists of images from custom/article fields by specfying a ? at the start. You can also negate lists of image names using the ! operator, however, due to the way it works this can be hit and miss if used directly inside the attribute (more miss than hit).

To circumvent this, it’s often best to define your regex somewhere else — for example a <txp:variable /> or in an article field and then negate that. For example:

<txp:variable name="excludes">^(penguin|bird)</txp:variable>
<txp:smd_gallery name="!excludes:regex">
   // form contents here
</txp:smd_gallery>

would display a gallery of all images that did not start with ‘penguin’ or ‘bird’.

I’m sure there’s a lot more you can do with this, but you need to keep your wits about you because it can pull out some seemingly unexpected results if combined with the id and category attributes, especially if you have images that aren’t categorised.

But for those people who have a good naming convention, have uploaded a tonne of images and can’t be bothered to categorise them, this new attribute might get you out of a hole. Have a play with it and let me know how you get on.

eivl · 2010-03-03 08:34:53

Hello Stef, i have a question and i am hoping you can answer before i have finnished reading through all 65 pages!

this is my article:

<txp:smd_gallery category=“Barn, Mann, Dame” sort=“name” form=“gallery” onchange=“category_title” onchangewraptag=“h3”>
</txp:smd_gallery>

This is my form:

{onchange:category_title}<a href=”{url}” title=”{title}” rel=“shadowbox[gallery{alt}]”>
<img class=“img” src=”<txp:site_url/>images/{thumbdef}” alt=”{alt}” />
</a>

—————

i have the following setup on my images, i have the same name in the ALT field on tree and tree pictures. but i only want to show the first image skip the second and third, and then show the first and skip the two next and so on and so on.

every time i upload new images it will always be three and three.

i want to click a image (the first) and shadowbox shows with a slideshow off the three images.

hope i have explained it enough.

eivl

Textpattern CMS

Textpattern CMS support forum

#637 2010-01-16 01:18:18

Re: smd_gallery: super-flexible gallery generator

#638 2010-01-22 12:24:04

Re: smd_gallery: super-flexible gallery generator

#639 2010-01-31 17:36:26

Re: smd_gallery: super-flexible gallery generator

#640 2010-02-01 10:58:56

Re: smd_gallery: super-flexible gallery generator

#641 2010-02-01 11:05:53

Re: smd_gallery: super-flexible gallery generator

#642 2010-02-01 17:04:09

Re: smd_gallery: super-flexible gallery generator

#643 2010-02-01 17:16:49

Re: smd_gallery: super-flexible gallery generator

#644 2010-02-01 17:56:57

Re: smd_gallery: super-flexible gallery generator

#645 2010-02-01 21:31:32

Re: smd_gallery: super-flexible gallery generator

#646 2010-02-01 21:50:20

Re: smd_gallery: super-flexible gallery generator

#647 2010-03-01 16:28:15

Re: smd_gallery: super-flexible gallery generator

#648 2010-03-03 08:34:53

Re: smd_gallery: super-flexible gallery generator

Board footer