smd_gallery: super-flexible gallery generator

Bloke · 2009-12-30 17:27:19

afewimages wrote:

WAIT!! I installed version 2 of both the css and js files and now it works! (please update the documentation)

What part of the documentation? Do you mean the Slimbox example? It’s just to give you an idea of how to use the plugin and not to be used as a drop-on-your-page-and-go example.

Anyone knows COLORBOX? … How can i implement this in the plugin?

I don’t know it but it’ll work fine with the plugin, like this:

<txp:smd_gallery category="trees" sublevel="all" wraptag="ul" break="li">
   <a rel="example1" href="{url}" title="{caption}"><txp:thumbnail id="{id}" /></a>
</txp:smd_gallery>
<script type="text/javascript">
   jQuery(function(){
      jQuery("a[rel='example1']").colorbox();
   });
</script>

In the examples they give, the anchor’s rel attribute is tied to the jQuery. You could probably use something else, like a class if you preferred.

afewimages · 2009-12-31 09:33:49

Thanks Bloke,

I’ll try this out. What i meant with the docs is that there is no reference to the version2 slimbox. I did not look any further than the startpage and find out later that there was also a version 2 which worked.

Steven.

MattD · 2009-12-31 22:03:51

Bloke, I’m using the following to create a list of images for use with Galleria.

<txp:smd_gallery category="portfolio" onchange="category_title" onchangeclass="category" onchangewraptag="li" sublevel="all">
{onchange:category_title}
<li class="thumb<txp:smd_if field="{counter}" operator="eq" value="1"> active</txp:smd_if>"><a href="{url}" title="{caption}"><img src="{thumburl}" alt="{alt}"></a></li>
</txp:smd_gallery>

I need to add an id, of the category name, to the li of the category but I’m a bit confused on how to do more with onchange. Also, is there a better way to add an active class to the first item?

Last edited by MattD (2009-12-31 22:04:19)

Bloke · 2010-01-01 11:09:37

MattD wrote:

I need to add an id, of the category name, to the li of the category but I’m a bit confused on how to do more with onchange.

v0.53 adds the ability to let you define your own onchange forms. Thus you can now do this:

<txp:smd_gallery category="portfolio" onchange="category_title:oc_form" sublevel="all">
{onchange:category_title}
<li class="thumb<txp:smd_if field="{counter}" operator="eq" value="1"> active</txp:smd_if>"><a href="{url}" title="{caption}"><img src="{thumburl}" alt="{alt}"></a></li>
</txp:smd_gallery>

and you can create your oc_form thus:

<li id="{category}" class="category">{category_title}</li>

to customise it to your needs. Does that help?

Also, is there a better way to add an active class to the first item?

Not really :-( If you have any ideas on how it could be achieved though, I’m all eyes.

Happy New Year!

idesign123 · 2010-01-06 03:14:23

I’m trying to figure out how to add “captions” to my Gallery. I’m using smd_gallery combined with a custom Gallery script (Galleriffic).

Example URL – http://www.jwdlicensing.com/index.php?id=4#0

Here is the code snippet in the gallery page…
<div id="thumbs" class="navigation"> <txp:article listform="gallery" form="gallery" sort="Posted asc" limit="1" /> </div> <div id="content"> <div id="gallery" class="content"> <div id="slideshow" class="slideshow"></div> <div id="controls"> </div>

And here is the code in the gallery “form”…
<txp:smd_gallery category="?article_image" form="article_image_form" sort="name" break="li" wraptag="ul" class="thumbs noscript" /> <txp:hide> <txp:upm_article_image form="article_image_form" wraptag="ul" class="thumbs noscript" /> </txp:hide>

Does anyone know what I need to change or add in order for my captions to show up?

Thank you very much for your help!

MattD · 2010-01-06 04:04:42

What’s in your article_image_form form?

idesign123 · 2010-01-06 06:45:32

Oops, sorry.

That one has…
<a href="{url}" title="{title}" class="thumb" ><img src="{thumburl}" alt="{alt}" /></a> <div class="caption"> <div class="image-title">{alt}</div> </div> <txp:hide> <li><a href="<txp:upm_img_full_url />" title="<txp:upm_img_caption />" class="thumb" ><img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />" /></a> <div class="caption"> <div class="image-title"><txp:upm_img_alt /> </div> <txp:if_upm_img_caption><div><txp:upm_img_caption /></div></txp:if_upm_img_caption> </div> </li> </txp:hide>

I’m actually not sure it’s needed anymore now that I’ve switched to smd_gallery. But I left it in just in case.

idesign123 · 2010-01-07 04:11:45

Any ideas? It appears Stef is on vacation – does anyone else know how to make my captions visible?

Bloke · 2010-01-07 12:01:23

idesign123 wrote:

It appears Stef is on vacation

Vacation, my eye! Cheeky sod :-)

I’ve never used Gallerific but a quick look through the usage docs leads me to believe you need to put your image captions inside <div class="caption">caption in here</div>.

You appear to be putting <div class="caption"><div class="image-title">alt text is here</div></div> which means your caption is your alt text (and it looks like it’s empty). If you want to show the caption, you should use {caption} or {title} in your form.

Last edited by Bloke (2010-01-07 12:03:13)

idesign123 · 2010-01-08 05:22:39

Wow, I’ve never been called a “cheeky sod” before! I admit I had to look it up (since our England friends speak an unusual variation of the true “English” language, spoken in America ). Just kidding!!!

Oops – I hope you’ll still help me after that one…

I’m obviously not understanding something very basic in how Textpattern works. As a test, I tried adding a caption to a totally new page. No “Galleriffic” code or anything else unusual. I tried adding the caption three different ways, and none of the tests worked.

Here’s the code on the test page…

<txp:article_image /> <br /><br />
Caption Attempt #1 - {caption} {title} <br /><br />
Caption Attempt #2 - <txp:caption /> <txp:title /> <br /><br />
Caption Attempt #3 - <txp:article form="test" />

The third attempt references a form with the following code..

{caption} <txp:caption /> {title} <txp:title />

The resulting page can be viewed at http://www.jwdlicensing.com/index.php?id=40

If I look in the source code, I do see that the caption text (“This image is available for sale”) is showing up in the “title” tag, but this caption text is not visible on the page itself.

Adding the “title” variation of the code does nothing on the first attempt. In the second & third attempt, it shows the word “test”, which is the page title, but not the caption text.

Do you see what I’m doing wrong?

Last edited by idesign123 (2010-01-08 05:37:31)

Bloke · 2010-01-08 09:45:19

idesign123 wrote:

I’m obviously not understanding something very basic in how Textpattern works.

OK, no worries. It’s partly due to the syntax that smd_gallery employs. It’s not very “TXPish”. Here goes, step by step (hope it’s not too patronising!) :

Edit your test article and make sure there is a valid image category name in your article_image field. This will be the category containing the images you want to display on that page
Go to your Images tab and make sure you have some images assigned to that category
In each image, check its Alternate Text and Caption fields have something in them. The alternate text will become the <img> tag’s alt attribute and Caption will be what you want to see under the picture
Assuming the code in your gallery page/form is the same as you first posted above, put <a href="{url}" title="{title}" class="thumb" ><img src="{thumburl}" alt="{alt}" /></a> <div class="caption">{caption}</div> in your article_image_form

({title} and {caption} are synonymous)

Your smd_gallery tag calls the article_image_form for each image in your chosen category so it will render:

<a href="http://site.com/images/N.jpg" title="The caption here" class="thumb" >
   <img src="http://site.com/images/Nt.jpg" alt="The alt here" />
</a>
<div class="caption">The caption here</div>

for every image. Hopefully, gallerific will know what to do with that markup and make your slideshow accordingly. If not, alter the markup so it understands :-)

The {replacement} syntax is a feature of the smd_gallery plugin so it cannot be used outside the smd_gallery tag’s container or nominated Form. That’s why you can’t see it on your test page. Sadly (at the moment) Textpattern does not have a native tag for outputting the image caption — which is why you were using upm_image before, because it does have tags for doing that.

Has that demystified it a bit? Shout back if you’re still confused.

Last edited by Bloke (2010-01-08 09:47:11)

speeke · 2010-01-15 04:43:57

Hiya Stef,

I know, I know – I’m popping up all over the place, but your plugins are just soooo good …

I posted a query in “How Do I…? & Other Questions” recently, without reply. I thought I’d flag it here because there may be others, who are using smd_gallery (and smd_bio), who have an elegant solution.

Much appreciated.

Textpattern CMS

Textpattern CMS support forum

#625 2009-12-30 17:27:19

Re: smd_gallery: super-flexible gallery generator

#626 2009-12-31 09:33:49

Re: smd_gallery: super-flexible gallery generator

#627 2009-12-31 22:03:51

Re: smd_gallery: super-flexible gallery generator

#628 2010-01-01 11:09:37

Re: smd_gallery: super-flexible gallery generator

#629 2010-01-06 03:14:23

Re: smd_gallery: super-flexible gallery generator

#630 2010-01-06 04:04:42

Re: smd_gallery: super-flexible gallery generator

#631 2010-01-06 06:45:32

Re: smd_gallery: super-flexible gallery generator

#632 2010-01-07 04:11:45

Re: smd_gallery: super-flexible gallery generator

#633 2010-01-07 12:01:23

Re: smd_gallery: super-flexible gallery generator

#634 2010-01-08 05:22:39

Re: smd_gallery: super-flexible gallery generator

#635 2010-01-08 09:45:19

Re: smd_gallery: super-flexible gallery generator

#636 2010-01-15 04:43:57

Re: smd_gallery: super-flexible gallery generator

Board footer