smd_gallery: super-flexible gallery generator

Bloke · 2009-03-20 19:36:15

kevinpotts wrote:

I am trying to display the number of images within a specific image category.

Although this seems on the surface a simple request, it’s actually quite tricky for the plugin, so I’m not surprised you’re struggling. Because the plugin essentially iterates through stuff one by one and passes each image to your form, it has two major drawbacks:

If you want to display something only once or twice you have to do it with another plugin
The plugin does not know how many images there are in each category until the category has changed, thus it cannot output in advance how many images there are about to be displayed

Point #2 won’t affect you if you only have one category, because the number of images is {totalimages} (or {maximages} if you are using paging). There may actually be a way to display the total images after the gallery by using onchange, but I’ve never tried it.

But to answer your question the simplest way to do it is to use smd_if inside your form to detect when {counter} equals 1. I do it all the time. There are other elaborate ways round it by using collate mode, or cheating and using the pagingform to just output the count, but it’s probably easiest to use smd_if and be done with it; at the expense of having another plugin lying around.

I’ve toyed with some kind of system to only output stuff at certain counts and I’ve not found a method that’s reliable enough or elegant enough to include. Yet.

Last edited by Bloke (2009-03-20 19:55:49)

kevinpotts · 2009-03-20 19:50:12

Stef — Thanks for the speedy response. I’m gonna post the question in another category and see what kind of response there is. I did find glx_image_count but the download URL no longer works. I’ll post back here if I can find anything.

Update: Question posted here

Last edited by kevinpotts (2009-03-20 20:08:50)

Bloke · 2009-03-20 19:55:30

kevinpotts wrote:

I’ll post back here if I can find anything.

Cool, the more solutions the merrier. Like I say, this works if you only have one category:

<txp:smd_gallery category="summat">
   <txp:smd_if field="{counter}" operator="eq" value="1">
      Number of images: {totalimages}
   </txp:smd_if>
   // rest of your gallery here
</txp:smd_gallery>

And I’m sure I can find a way to help without smd_if at some point in future.

Last edited by Bloke (2009-03-20 19:56:27)

Bloke · 2009-03-20 22:11:15

kevinpotts

Hahaha! My memory is pants this week. I’d forgotten I have actually implemented a system that might do what you want. Look in the plugin help of v0.51 and check out countform :-) Sorry for the bogus info earlier. I’m going to go and spank my brain.

Last edited by Bloke (2009-03-20 22:11:40)

mrtunes · 2009-03-21 20:35:34

Bloke wrote:

From Christophe’s site:

There are some options that you can specify in the form of a javascript object inside the script (look for “put custom options here”) | Have a look in the slimbox2.js file and see if you can override the options there.

just to follow up on what was going on. the images weren’t getting grouped. i couldn’t really find the info i wanted on the slimbox docs and forum, but then i looked at lightbox and saw there’s a propery where you use square brackets; rel=“lightbox[gall]” if it just said “lightbox” the images wont get grouped. by default it has the previous and next buttons but they’re not activated if it thinks the image is solo. not sure if this has been discussed ad nauseum ha

mlarino · 2009-03-27 02:42:12

Hi!
After you helpedme with this plugin creating a slimbox gallery is really easy,
But, I am implementing it in a new site, using slideshow2 and I cant figure it out all…:(

I need to create a slideshow in the articles that displays the article images. Thats all, no categoryes etc…

I read every post here and your example on the plugin help, but I am stuck.
I placed the js, and css for the slideshow2, then created the form “gallery” where I placed this:

<div class="slideshow" id="slideshow1">
 <img src="<txp:site_url />images/{id#1}.jpg"
     alt="{alt#1}" width="{width#1}" height="{height#1}" />
</div>

<script type="text/javascript">
myShow1 = new Slideshow("slideshow1",
  { hu: "<txp:site_url />images/",
    images: [{imglist}],
    captions: [{alt}],
    classes: ["prev","next","active"],
    type: "fade"
  });
</script>

then placed this on the article page:

<txp:smd_gallery
  category="birds, fish" form="gallery"
  combo="imglist:{id}{ext}"
  collate="quote:{imglist}:{alt}" />

I know is not much, but that is all I can do, dont understand were to go from here :)
could you help me?
thanks!

Last edited by mlarino (2009-03-27 02:51:38)

Bloke · 2009-03-27 09:22:12

mlarino wrote:

I need to create a slideshow in the articles that displays the article images. Thats all, no categoryes etc…

OK, if that’s the case, you should set category="?article_image". Then, assuming your article image field contains a comma-separated list of image IDs, the slideshow should work fine. I don’t think it needs to be told to ‘start’ (I think it does so automatically) but I know progre55 has done some work with it so if you find his posts in this thread they should help a little more.

Just so you know, here’s a rundown of what the code does:

<img src="<txp:site_url />images/{id#1}.jpg" alt="{alt#1}" width="{width#1}" height="{height#1}" />

You need to show one single image to ‘start’ the slideshow. So that line of code simply displays the first image in the list (wrapped in a placeholder div, labelled “slideshow1”, which I’ve omitted here for clarity). The #1 used in the example extracts the 1st image from your comma-separated list. If you wanted to use the information from the 2nd image, you’d use #2, and so on. Look at your page source code to see that it is included in the output immediately before the <script> section of the form, and check that it is finding the image OK (use Firebug’s ‘Net’ pane for this).

Next, since the above placeholder is inside a div with a given ID, we can use that HTML ID in the script to target that part of the DOM:

myShow1 = new Slideshow("slideshow1",

‘slideshow1’ in this case targets the placeholder div.

{ hu: "<txp:site_url />images/",

The base URL of all your images. In this case your standard ‘images’ directory.

images: [{imagedef}],

Outputs a comma-separated list of all images in your slideshow. You can check this in the source code of your page. You should see something like images: ["24.jpg","30.jpg","42.jpg"],. Note that I’ve changed the replacement tag here to one of the standard ones. The example uses a combo called {imglist} which is made up of the image {id} and its {ext}ension. That is actually the same as the {imagedef} so we don’t need the combo at all — it’s used in the example just to show how it could be used but is not actually necessary.

captions: [{alt}],

Outputs a list of all the alt text associated with each image. Again you should see a list of alt text inside square brackets in the page source code.

classes: ["prev","next","active"],
    type: "fade"

These are just things the slideshow plugin needs. I guess they can be changed for different effects (see Aeron’s documentation for ideas).

<txp:smd_gallery category="?article_image" form="gallery"
  collate="quote:{imagedef}:{alt}" />

And the thing that starts it all off is this. Reads your images from the article_image field, collects them into one looong list, puts quotes around each image number+extension and piece of alt text, then calls the gallery form (just once) to insert the relevant replacement tags.

One other thing to check when you look at the page source code is that your alt text is quoted properly. It should be HTML-escaped by default, but just check there aren’t any rogue double-quotes inside any of your alt tags that are causing the script to break.

Does that help at all?

mlarino · 2009-03-27 11:03:09

Hi Bloke,
Thanks for your response but still cant make it work….
I read all the Progre55 posts but still no luck.

Not sure what I am doing wrong, I tryed doing it so many different ways…

here is what I got:

form: “gallery”

<div id="my_show" class="slideshow">
  <a href="{imagedef#1}"><img src="{imagepath#1}{imagedef#1}" alt="{alt#1}" /></a>
</div>
<script type="text/javascript">
  var data = [{imagedef}];
  var myShow = new Slideshow('my_show', data, {controller: true, hu: '{imagepath#1}', linked: true});
  myShow.start();
</script>

I have this in the head

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<txp:css format="link" />
<script type="text/javascript" src="http://www.xxxxx.es/slideshow2/js/mootools.js"></script>
<script type="text/javascript" src="http://www.xxxxx.es/slideshow2/js/slideshow.js"></script>
<script type="text/javascript" src="http://www.xxxxx.es/slideshow2/js/slideshow.kenburns.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.xxxxx.es/slideshow2/css/slideshow.css" />
</head>

and this is the tag in the article page (using it right after the <txp:body /> tag

<txp:smd_gallery category="?article_image" form="gallery" collate="quote:{imagedef}" />

That is all I have, and I get nothing at all.
Am I missing something??

Thanks again!

Last edited by mlarino (2009-03-27 11:04:18)

Bloke · 2009-03-27 11:13:30

mlarino wrote:

(using it right after the <txp:body /> tag

Ah, if you are ‘outside’ the body then you are not in an individual article context, thus the plugin cannot ‘see’ the article image field! Try putting the gallery tag inside your article form.

mlarino · 2009-03-27 12:04:00

No no, it is inside the article form, I meant that is right after the <txp:body />

the form looks like this:

<txp:output_form form="doctype"/>
<txp:output_form form="head_anuncio"/>
<body id="home">
<h1><txp:title /></h1>
<txp:body />
<txp:smd_gallery category="?article_image" form="gallery" collate="quote:{imagedef}" />
</body>
</html>

mlarino · 2009-03-27 12:36:21

These are all the pluings I have installed, just in case.

gbp_admin_library
glz_custom_fields
hak_tinymce
ied_hide_in_admin
l10n
lam_image_uploader
rss_article_edit
rvm_counter
rvm_maintenance
sed_plugin_library
sed_section_fields
smd_gallery
smd_if
smd_lib
upm_image
wlk_helpful
zem_contact_lang-mlp

Bloke · 2009-03-27 12:51:28

mlarino wrote:

No no, it is inside the article form

Sorry, ok, I was just being dim. What do you see in your HTML source code? What does the <script> tag look like when it is rendered? And the slideshow1 div above it? Can you post those please so we can see if it is rendering anything at all?

Textpattern CMS

Textpattern CMS support forum

#421 2009-03-20 19:36:15

Re: smd_gallery: super-flexible gallery generator

#422 2009-03-20 19:50:12

Re: smd_gallery: super-flexible gallery generator

#423 2009-03-20 19:55:30

Re: smd_gallery: super-flexible gallery generator

#424 2009-03-20 22:11:15

Re: smd_gallery: super-flexible gallery generator

#425 2009-03-21 20:35:34

Re: smd_gallery: super-flexible gallery generator

#426 2009-03-27 02:42:12

Re: smd_gallery: super-flexible gallery generator

#427 2009-03-27 09:22:12

Re: smd_gallery: super-flexible gallery generator

#428 2009-03-27 11:03:09

Re: smd_gallery: super-flexible gallery generator

#429 2009-03-27 11:13:30

Re: smd_gallery: super-flexible gallery generator

#430 2009-03-27 12:04:00

Re: smd_gallery: super-flexible gallery generator

#431 2009-03-27 12:36:21

Re: smd_gallery: super-flexible gallery generator

#432 2009-03-27 12:51:28

Re: smd_gallery: super-flexible gallery generator

Board footer