smd_gallery: calling all testing masochists :-)

gluteus · 2008-02-15 14:29:16

Bloke schrieb:

Try this in your form…

It works.

Thank you for your informations. Very interesting. If you wish I may help you to comment your plugin more “newbie-friendly”.

I will tell you later if I succeeded with my tooltip-idea.

Bloke · 2008-02-15 14:57:20

gluteus wrote:

If you wish I may help you to comment your plugin more “newbie-friendly”.

Brilliant, thank you. I have made a start with the documentation but it’s currently “factual” in the sense it’s just “these are the options, this is what they do”. You should be able to see how far I’ve got in the latest version of the plugin.

I certainly think a section that gives an overview — a sort of logical flow of how the plugin does what it does and how it interacts with the TXP forms — would be very beneficial. Hmmm, is that a nooberview :-P

That might help people get in the right headspace for using the plugin; after that, the various levels of debug output should help iron out the technical aspects and offer assistance on what variables are available for you to (ab)use. debug="4" is ideal here.

If you have any ideas on this, feel free to send them over and I’ll incorporate them in the plugin help and/or the examples if I can. My documentation is traditionally difficult to grasp or over-wordy, so any help in taming it is greatly appreciated.

gluteus · 2008-02-18 15:35:28

Hi Stef!

Now I got finally the full power of your plugin!
I took this JS-tooltip from Walter Zorn: wz-tooltip.
Added this to an article:
<txp:smd_gallery category="Bilder_Feb08" form="gallery-tooltip" />
And this is how my form “gallery-tootip” is looking like:
<span href="<txp:site_url />images/{id}{ext}"
onmouseover="Tip('<img src=\'<txp:site_url />images/{id}{ext}\' />', CENTERMOUSE, false, ABOVE, true, OFFSETY, -300, FADEIN, 300, FADEOUT, 300, BGCOLOR, '', BORDERCOLOR, 'black', BORDERWIDTH, 7, PADDING, 0, SHADOW, true, CLICKCLOSE, true)" ><txp:thumbnail id="{id}" /></span>

This is the result: Example gallery.

Thank you very much!

If you are really interested in my help writing a newbie part of your help-file, please E-Mail me.

dave

Last edited by gluteus (2008-02-18 15:41:13)

Bloke · 2008-02-18 15:57:17

gluteus wrote:

I took this JS-tooltip from Walter Zorn… Added this to an article… Now I got finally the full power of your plugin!

W00t! Niiiiice.

Some of the images are rather large and take a while to start downloading, which sometimes gives the impression that the gallery isn’t doing anything at first (hey, it’s coming all the way from Switzerland – it’s still pretty quick!), but as a showcase for the flexibility of smd_gallery it’s brilliant :-)

Many thanks for taking the time to tinker with it and congratulations on integrating it into your site like that. I’m totally stoked it works in a “real world” situation.

As you progress with it and try other stuff, if you have any feedback on how the plugin should behave by default or any improvements I can build in to make the plugin work better/smarter/make your life easier then please continue to post here and I’ll see what I can do.

If you are really interested in my help writing a newbie part of your help-file, please E-Mail me.

Cool, thanks again. When I get a chance I’ll drop you a line.

Bloke · 2008-02-19 21:24:55

Minor update to add an extra Replacement Tag {galleryid}. Thanks to rloaderro for spotting that oversight. It’s only really of use in collate mode, but it may be useful elsewhere too. I also added a few more lines of documentation to the plugin.

v0.2 (zipped).

jakob · 2008-02-19 23:05:43

man, I can’t wait to get some more time. Just gotta try this out :-)

masa · 2008-02-22 13:42:47

Bloke wrote:

If you fix the dimensions of the img by adding width="400" and height="300" (or something) to the fullsize img placeholder it’ll stop doing that, but of course all your pictures must then be the same size or they’ll be squashed/stretched by the browser.

I just tried that using <img id="fullsize" src="/images/10.jpg" width="450" height="299" /> but it doesn’t have any effect. The placeholder image tag starts out collapsed.

I was also wondering whether it could be modified to pick a random image from the ones in the gallery?

The flexibility of the plugin really comes down to how devious you are with javascript and the TXP article fields. Of course that doesn’t help people who don’t know JS very well… which is why I want to build up the examples page over time (I’ll make it a proper HTML document soon so it looks better) and encourage people to submit their gallery ideas.

My knowledge of JS equals the one of a tomato, so I shall be looking forward to your samples :-)

What I would really like to be able to do is farming out the entire smd_gallery tag to a form and have it build the gallery from a custom field value that contains the image category. I have tried that with rss_thumbpop, but to no avail.

Cheers Martin

Bloke · 2008-02-22 14:14:58

masa wrote:

I just tried that using <img id="fullsize" src="/images/10.jpg" width="450" height="299" /> but it doesn’t have any effect. The placeholder image tag starts out collapsed.

Hmm, it should work, thanks for the report. I’ll look into it. What tag and form are you using?

I was also wondering whether it could be modified to pick a random image from the ones in the gallery?

I should think so. I’ll take a look at adding that explicitly but you can do it now by pulling out all the images you want, adding sort="random" then displaying just the first one :-)

My knowledge of JS equals the one of a tomato, so I shall be looking forward to your samples :-)

Hehehe, I’ll be hopefully updating the example text file in the next few days and making it a proper page.

What I would really like to be able to do is farming out the entire smd_gallery tag to a form and have it build the gallery from a custom field value that contains the image category.

Easy :-) Say you want a thickbox gallery, load your js/css libraries in the head of your page then put this in your form:

<txp:smd_gallery category="?my_custom_field">
  <a class="thickbox" href="{url}" alt="{alt}" title="{title}" height="{height}" width="{width}">
    <txp:thumbnail id="{id}" />
  </a>
</txp:smd_gallery>

And in your article just add the usual <txp:output_form /> where you want the gallery to appear. btw, your chosen custom field can have more than one category in it, comma separated. And don’t forget sublevel :-)

masa · 2008-02-22 18:51:09

Bloke wrote:

Hmm, it should work, thanks for the report. I’ll look into it. What tag and form are you using?

Pretty much the sample from the documentation. I currently have this in my article:

<p><img id="fullsize" src="/images/10.jpg" width="450" height="299" /></p>
<p id="fullcaption"></p>
<div><txp:smd_gallery sublevel="ALL" category="xxxxx" form="gallery2" /></div>

and in the form gallery2:

<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>

I changed the image reference to point at an existing image, but it still doesn’t pull up anything.

Easy :-) Say you want a thickbox gallery, load your js/css libraries in the head of your page then put this in your form:

<txp:smd_gallery category="?my_custom_field">
<a class="thickbox" href="{url}" alt="{alt}" title="{title}" height="{height}" width="{width}">
<txp:thumbnail id="{id}" />
</a>
</txp:smd_gallery>

OK, I’ll try that next.

And in your article just add the usual <txp:output_form /> where you want the gallery to appear. btw, your chosen custom field can have more than one category in it, comma separated. And don’t forget sublevel :-)

Yeah, I’m still making my way through the documentation and to be honest, it sometimes reads like the manual of a Klingon Battle Cruiser. ;-)

Mind you, this is not meant as a negative comment. I do realise the potential of the plugin and the fact that the wealth of customisation options comes with a learning curve. :-)

Thanks very much for your efforts!

masa · 2008-02-25 14:39:49

OK, this is starting to work really well for me. Regarding the full-size placeholder not loading I made a silly mistake: the image’s path was incorrect.

I now have an article form that automatically appends a (caption-less) gallery based on the value of a custom field.
From the article form I call <txp:output_form form="gallery" /> immediately after <txp:body />

Contents of form gallery:

<div><img id="fullsize" src="/txp406/images/10.jpg" width="450" height="299" /></div>
<div><txp:smd_gallery category="?custom1" form="gallery-thumbs" /></div>

Contents of form gallery-thumbs:

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

~~I tried to combine gallery and gallery-thumbs but couldn’t get that to work.~~

OK, scrap that, I got it working now with a single form:

<div><img id="fullsize" src="/txp406/images/10.jpg" width="450" height="299" /></div>
<div><txp:smd_gallery category="?custom1">
<a href="{url}" title="{title}" onmouseover="document.getElementById('fullsize').src = this.href; return false;">
<img src="{thumburl}" alt="{alt}" />
</a>
</txp:smd_gallery></div>

If you now could add the option to display a random image from the gallery as the placeholder, it would be perfect! :-)

Thanks again!

Cheers Martin

Last edited by masa (2008-02-25 14:58:43)

Bloke · 2008-02-25 15:06:29

Hey, glad it’s working for you.

masa wrote:

If you now could add the option to display a random image from the gallery as the placeholder, it would be perfect! :-)

It’s on the ToDo list. I’ll experiment with it when I get a chance. I have a TXP site that needs urgent attention just now (pertty much a complete rewrite) so that’ll be my focus for the next week or so. After that I’ll get back into my sand pit and play with this and the watermarking plugin.

Oh, and thanks for the comment about the docs. Brilliant! I know it’s something I have to work on and I’m hoping to enlist the help of gluteus for that. [ btw, you’ll see your quote crop up again in the near future; keep an eye on the forum ;-) ]

jelle · 2008-02-28 17:32:08

Hi guys…

it’s me again….I bumped in to another interesting “lightbox-look-a-like” called Highslide. -> http://vikjavev.no/highslide/

jstubbs · 2008-02-28 18:42:21

I like this one even more

jelle · 2008-02-28 19:59:12

jstubbs wrote:

I like this one even more

woah….that one is sexy!

jakob · 2008-02-28 22:23:42

Got a chance to play with it and it’s great! Not being familiar with your previous plugin or wet_for_each it took a bit of guessing to grab the article images. In the end I did it like this – is that right?

<txp:smd_gallery id="?article_image" limit="3">

It seemed to work just fine whether called from an article form or placed in the if_individual_article part of the page form. I have the thumbs and full-size images in different divs on the same page and the divs are numbered with an individual id (took the image id for this) so I used the tag a few times over (js variable definition in head, thumbs, images) but it worked fine without causing a huge number of queries.

Textpattern CMS

Textpattern CMS support forum

#16 2008-02-15 14:29:16

Re: smd_gallery: calling all testing masochists :-)

#17 2008-02-15 14:57:20

Re: smd_gallery: calling all testing masochists :-)

#18 2008-02-18 15:35:28

Re: smd_gallery: calling all testing masochists :-)

#19 2008-02-18 15:57:17

Re: smd_gallery: calling all testing masochists :-)

#20 2008-02-19 21:24:55

Re: smd_gallery: calling all testing masochists :-)

#21 2008-02-19 23:05:43

Re: smd_gallery: calling all testing masochists :-)

#22 2008-02-22 13:42:47

Re: smd_gallery: calling all testing masochists :-)

#23 2008-02-22 14:14:58

Re: smd_gallery: calling all testing masochists :-)

#24 2008-02-22 18:51:09

Re: smd_gallery: calling all testing masochists :-)

#25 2008-02-25 14:39:49

Re: smd_gallery: calling all testing masochists :-)

#26 2008-02-25 15:06:29

Re: smd_gallery: calling all testing masochists :-)

#27 2008-02-28 17:32:08

Re: smd_gallery: calling all testing masochists :-)

#28 2008-02-28 18:42:21

Re: smd_gallery: calling all testing masochists :-)

#29 2008-02-28 19:59:12

Re: smd_gallery: calling all testing masochists :-)

#30 2008-02-28 22:23:42

Re: smd_gallery: calling all testing masochists :-)

Board footer