[*droplet*] microGallery (place Gallery anywhere)

[Stefek]

Welcome to the microGallery Droplet.

You may use this Droplet to place a (small)Gallery where ever you like (NEWS Posts etc.).
This droplet, of course, doesn't replace a general image-gallery-module, but it comes in handy if you need to display some pictures from a media-directory without to much effort.

Edit: I'm placing a recent version in this post (see code).
Thanks to all for further suggestions.
Thanks to User 'macsmet' for his initial code for Table Display.
Thanks to User 'DarkViper' for his explanation of the procedures the Droplet Engine uses (explanations & hints of this kind allways appraciated).
Thanks to User 'iradj' for reporting a bug.
Thanks to User 'Jamesypoo' for his request on sorting functionality (ASC|DESC|RANDOM).

I merged all those Ideas into this new Version, cleaned up the code and made the error hints "multilanguage".
New Parameters in use, see list below.

Important: The microGallery Droplet just gets the images from the directories and has no influence on the JS Files you use. If you want to use microGallery with a specialized JS, you will need to include it yourself. The microGallery will then deliver the images you specified in the droplet-call.

Description: Place a microGallery anywhere

Code: ( Droplet Code ) [Select]

<?php
/*
"microGallery - place Gallery anywhere"
----------------------------------------
@Author: Christian M. Stefan (Stefek) <stefek@designthings.de>
*/

global $MESSAGE;
$output_value ="";
//  check if the 'folder' Parameter is set in the Droplet
if (!isset($folder)):
$output_value = $MESSAGE['MOD_FORM']['REQUIRED_FIELDS'].":<b>microGallery call =></b> <tt>folder={path/to/the/folder}</tt>";
endif;

$img_dir = WB_PATH.MEDIA_DIRECTORY.'/'.$folder.'/';
$img_url = WB_URL.MEDIA_DIRECTORY.'/'.$folder.'/';  

// directory exists --->
if (is_dir($img_dir)):
// open directory and go through the files
$dir = dir($img_dir);

while (FALSE !== $image_file = $dir->read()):

//use jpg, gif and png files only
if (!preg_match('/.+\.(jpeg|jpg|gif|png)$/', $image_file) || 
substr($image_file, 0, 1) == ".") 
continue;
    
   /**
    * Make Array of images for the microGallery if image files exist
    */
// convert filenames into Titles    
$img_title = str_replace(array(".png", ".jpg", ".gif", ".jpeg"), "", $image_file);
$img_title = str_replace("_", " ", $img_title); 
if (isset($img_title) && !empty($img_title)):     
    $link = $img_url.$image_file;    
    $group = isset($group) ? $group : ''; //ignore $group if &group Parameter isn't set in Droplet-Call
    $image_array[] = "<a class='colorbox' href='".$link."' rel='lightbox[".$group."]' title='".$img_title."'>file'".$img_title."'</a>";
    $linkonly[] = $link;
    $image_show[] = "<a class='colorbox' href='".$link."' rel='lightbox[".$group."]' title='".$img_title."'>
    <img src='".$link."' alt='".$img_title."' title='".$img_title."' style='width:auto; height:120px; border:0;'/></a>";
endif;
endwhile;

if(empty($image_show)): //no images in this directory
$output_value = $MESSAGE['MEDIA']['NONE_FOUND'].': (<tt> '.$img_url.' </tt>)';
return $output_value;
endif;

/**
* DISPLAY microGallery
*/
$display =  (isset($display)) ? $display : 'table';
$cssclass = (isset($cssclass)) ? ' class="'.$cssclass.'"' : ''; //&cssclass=yourclass
// check sorting
if((isset($sort) && $display == 'table') || (isset($sort) && $display == 'all')){
if($sort=='ASC') asort($image_show);
if($sort=='DESC') rsort($image_show);
if($sort=='RANDOM') shuffle($image_show);
}
switch ($display):
case 'table': //&display=table OR not-set at all
$picsperrow = (isset($cols)) ? $cols : 4; // Set the amount of pics per row
$output_value = "<table".$cssclass."><tr>";
for ($i=0; $i<count($image_show); $i++):
if (($i > 0) && ($i % $picsperrow == 0))
$output_value .= "</tr><tr>";
$output_value .= "<td>".$image_show[$i]."</td>";
endfor;
while ($i % $picsperrow > 0):
$output_value .= "<td>&nbsp;</td>";
$i++;
endwhile;
$output_value .= "</tr></table>";
break;
case 'all':  //&display=all
if(isset($sort) && $sort=='ASC') asort($image_show);
if(isset($sort) && $sort=='DESC') rsort($image_show);
if(isset($sort) && $sort=='RANDOM') shuffle($image_show);
sort($image_show);
$output_value = "<ul".$cssclass.">";
foreach ($image_show as $image){     
    $output_value .= '<li>'.$image.'</li>';
}
$output_value .= '</ul>';
break;
case 'first':  //&display=first
$output_value =  $image_show[0];
break;
case 'notfirst': //&display=notfirst 
array_shift($image_array); //skip first Element of Array
$output_value = '<ul style="display:none">';
foreach ($image_array as $image){     
    $output_value .= '<li>'.$image.'</li>';
}
$output_value .= '</ul>';
break;

case 'firstlink': //&display=firstlink
$output_value =  $linkonly[0];
break;
endswitch;

// <-------end: if directory exists
else:
// directory doesn't exists --->
$output_value = $MESSAGE['MEDIA']['DIR_DOES_NOT_EXIST'].': (<tt> '.$img_url.' </tt>)';
endif;    
return $output_value;


Comment:Use the Droplet as follows:
[[microGallery?folder={path_to_image_directory}&display={first, notfirst, all, firstlink}&group={any_group_name}]]

Explanation of all Parameters.

?folder Parameter:
^{(this should be your firs parameter in the droplet call. Note the '?' (quotation mark) for the first parameter whereas '&' is used for all following settings)}

What you need to do is simply install the droplet below and then use (example):
[[microGallery?folder=flowers]]
Be sure the folder 'flowers' exists in your media directory and has images in it.

You can also use deeper directories like this:
[[microGallery?folder=cars/german/oldtimer/borgward&display=all]]

Note: the starting point for your galleries is MEDIA_DIRECTORY/
If the specified folder is empty or doesn't exists you will get a massage in frontend.
Further Settings:

&display Parameters:

• first: will display the first image in the directory only (as a scaled thumbnail)
  
• notfirst: will place all image links except the first one in a hidden div (style: display:none;)
  
• all: will display all images of the directory as scaled thumbnails
  
• firstlink: wil place only the path of the first image in the directory

New Parameters (for table):

• table: wil place only the path of the first image in the directory (experimental for use with chicos Members Module)
  
  • Use the &cols Parameter to change the amount of table-columns. Example &cols=3
    
  ...
  NOTE: you can leave the &display Parameter empty. Default is set to 'table' with 4 columns.
  (leaving it empty will result in the same as &display=table&cols=4)

&cssclass Parameter:
Now you can use a custom class for the <ul> or <table> tag.
This may be of some importance to you due to your template stylesheet.

• Use the &cssclass Parameters. Example: &cssclass=microgallery
  

&group Parameter:

Set what ever you like. This is important for multiple microGalleries on the same page only (if you use ColorBox or a simmilar JS Lightbox)
&sort Parameter:

Sort ascending, descending or random.
Use:
&sort=ASC
&sort=DESC
&sort=RANDOM
(uppercase)

Enjoy!
Any feedback  welcome.


Regards,
Stefek

[/list]

[macsmet]

Hi Stefek,

I like it very much and makes adding photogallery's so much simpler.
I also like the ColorBox integration. I didn't test all the options yet but will in a few days.

I think the 'display:all' should be default (without extra code).  Is that possible?
I don't like the images to be listed this way. I like it more with colums and rows and will try to add that.
And is there a way to add slideshow to the ColorBox?

Keep up the good work!

Greetings,

MacSmet

[Harry P.]

Hi Stefek,

quite handy, that droplet!

Question: I tried to replace class='colorbox' with class='pic_fb' for FancyBox

I have the FancyBox module installed and the init code for it in my template's index.php

Yet it doesn't seem to work to simply replace? the class definition?

[mr-fan]

I think the 'display:all' should be default (without extra code).  Is that possible?

hi macsmet,

just copy the code from the case "all":

Code: [Select]

$images = '<ul>';
foreach ($image_show as $image){    
    $images .= '<li>'.$image.'</li>';
}
$images .= '</ul>';
replace it with the the default case:

Code: [Select]

default:
$images ='"&display" parameter is wrong by <tt>'.$folder.'</tt>, please correct';
endswitch;
then you got the "all" param as default...

regards martin

[Stefek]

Hello guys, thanks for testing and feedback.

Unfortunately I have no time these days to give further support for it.
Try to figure it out for yourself.

I will come back to this thread in the middle of the week.

Kind regards,
Stefek

[Harry P.]

As for using FancyBox, I found the answer:

Besides using class= 'pic_fb', one also needs to remove rel='lightbox[".$group."]'

Then the fancy popup display works just fine!

[Stefek]

I think the 'display:all' should be default (without extra code).  Is that possible?

hi macsmet,

just copy the code from the case "all":

Code: [Select]

$images = '<ul>';
foreach ($image_show as $image){    
    $images .= '<li>'.$image.'</li>';
}
$images .= '</ul>';
replace it with the the default case:

Code: [Select]

default:
$images ='"&display" parameter is wrong by <tt>'.$folder.'</tt>, please correct';
endswitch;
then you got the "all" param as default...

regards martin

Hello Martin,
this won't work.
It can't.

Because, in this case the default switch is meant to catch cases where the user typed in a name which doesn't exist (example, he writes: &display=wholedirectory or  &display=allll - both of them are not defined), so the default switch is called and returns &display parameter is wrong by yourfolder/bladibla, please correct.

Hello MacSmat,

I think the 'display:all' should be default (without extra code).  Is that possible?

I don't think, that this should be default.
But if you want to make it default, you well need to rewrite/change the "else condition" after the switch.

Find the // &all isn't set comment and the following code :

Code: [Select]

else:
// &all isn't set
 echo "'&all' isn't set";
 return TRUE;
endif;
and replace it with:

Code: [Select]

else:
/*  &all isn't set
echo "'&all' isn't set";
return TRUE;
*/
$images = '<ul>';
foreach ($image_show as $image){    
    $images .= '<li>'.$image.'</li>';
}
$images .= '</ul>';
return $images;
endif;

Regards,
Stefek

[Stefek]

@MacSmet

I don't like the images to be listed this way. I like it more with colums and rows and will try to add that.

Ye, cool.
Just work it out.

And is there a way to add slideshow to the ColorBox?

I am not sure of that.
Please check the developers Site.

The Droplet just gets the images from the directories and has no influence on the JS Files you use.


@HerryP
Cool.
I am glad you figured it out by yourself.

Regards,
Stefek

Happy Easter!

[macsmet]

@Stefek:
I figured it out myself just one hour ago because Martin's suggestion didn't work.
Thanks anyway!

Now working on the columns and rows.

Greetings,

MacSmet

[maverik]

if you use my colorbox snippet slideshow will go with

Code: [Select]

Make Array of images for the microGallery ----->
    */
    if (file_exists($img_dir.$image_file)):    
    $link = $img_url.$image_file;    
    $group = isset($group) ? $group : ''; //ignore $group if &group Parameter isn't set in Droplet    
            $image_array[] = "<a rel='cslide' href='".$link."'  title='".$img_title."'>file'".$img_title."'</a>";
            $linkonly[] = $link;
            $image_show[] = "<a rel='cslide' href='".$link."' title='".$img_title."'>
    <img src='".$link."' title='".$img_title."' style='width:auto; height:120px'/></a>";
       
   endif;
i dont now if there is a problem with $group, i have deletet it and it works.

but i think it isnt good to load the great image and make it with height 120 to a thumbnail >> loadingtime !

it works as slideshow here http://wbsvn.developer-base.de/pages/micro.php

[Stefek]

Hello Maverik,

yes it works with the slideshow, but unfortunatly only then, if you have only one Group (and the droplet is used only once).

On the page where I make use of this roplet, I am not using the "thumbs" at all.
Only links.
And only to the first picture of the group (the others are hidden with css).

So, when I have then 3 different Galleries with links to them, they all will mess up together using the slideshow.

Link1
Link2
Link3

Any of them should be handled as a unique set (group) of images.
I wasn't able to find the right trick (if it exisist) on developers site.

If you know and can share would be mostly appreciated.

Kind regards,
Stefek

[maverik]

the only trick with colorbox i know is to make more than one rel groups.

i mean:

rel=cslide1
rel=cslide2

and so on.

in frontend.js you duplicate

Code: [Select]

$("a[rel='cslide1']").colorbox({ .....code for slideshow
$("a[rel='cslide2']").colorbox({ .....code for slideshow


i hope you understand my some brocken english 

[Stefek]

And is there a way to add slideshow to the ColorBox?

Hello MacSmet,
the way to make use of the ColorBox Slideshow is quite easy.

Change (in Droplet Code) the line $image_show[] to: $image_show[] = "<a href='".$link."' rel='cslide_".$group."' title='".$img_title."'>in the Java Script add the asterisk * in the selector, like this$("a[rel*='cslide']").colorbox({  
now you will be able to add any group name you want:
&group=1 will work but, &group=birds or &group=books will work also and will make a slideshow group for every single droplet call.

Regards,
Stefek

[macsmet]

@Stefek:
Thanks for all your suggestions!
I played with adding colums and rows for the images and the following works for me (it's not perfect yet):

Code: [Select]

$images = '<table border="0" cellpadding="0" cellspacing="0" width="500"><tr><td width="120">';
foreach ($image_show as $image){    
    $images .= ''.$image.'';
}

$images .= '</td></tr></table>';

return $images;

Maybe you can add this to your droplet.

Greetings,

MacSmet

[Stefek]

Hello MacSmet,
as I can see by the code, there is some problem with nesting the table data cells (td's) and table rows, right?
I will think it over next days.
A kind of controller would be helpful, in order to control the amount of td's per row.

Let me see, if I'll find some time next  days.
Or maybe some one else will have fun to extend the droplet.
We will see.

Regards,
Stefek

[macsmet]

Yes my solution is to limt the with of the table to 500px.
I found a solution in another imagegallery so maybe you can use this:

Code: [Select]

// count elements in array
$img_count = count($img_list);
$img_total = count($img_list);

//figure out how many pages are needed to display all the thumbs
$page_count =  ceil($img_count / ($img_rows * $img_columns));

if(is_dir($WB_PATH.$gallery_path)) {
// start outputting content
echo '<table class="lb" cellspacing="4">' . "\n";
// Check which image to start with on the page
if (isset($_GET['img_count'])) {
$img_count = $_GET['img_count'];
}

// Set count to zero for initial view
if (!isset($_GET['img_count'])) {
$img_count = 0;

}

$row_count = 1;
$col_count = 1;

while($row_count <= $img_rows) {

echo '<tr class="lb" >';

while ($col_count <= $img_columns) {
echo '<td align="center" style="border:solid 0px #000">';
if ($img_total > $img_count){
echo '<a href="' . WB_URL . $gallery_path . $img_list[$img_count] . '" class="lb_image_link" rel="lightbox[' . $gallery_name . ']" title="' . $gallery_name . '"><img class="lb_image" src="' . WB_URL . $thumb_path . $img_list[$img_count] . '" border="0" /></a>';
}
echo '</td>' . "\n";
$col_count++;
$img_count++;
}
echo "</tr>\n";
$col_count = 1;
$row_count++;
}

echo '</table>';

Greetings,

MacSmet

[Stefek]

Hello MacSmet,

the following code should work for you.
Just replace between "else:" / "endif;"

Code: [Select]

<?php
/*
 -------------| output microGallery in table
 */
 
$picsperrow = 4; // Set the amount of pics per row
$images = "<table><tr>";

for ($i=0; $i<count($image_show); $i++):
if (($i > 0) && ($i % $picsperrow == 0))
$images .= "</tr><tr>";
$images .= "<td>".$image_show[$i]."</td>";

endfor;

while ($i % $picsperrow > 0):
$images .= "<td>&nbsp;</td>";
$i++;
endwhile;

$images .= "</tr></table>";

return $images; 

Regards,
Stefek

[macsmet]

@Stefek: You're amazing!
Thanks. This is one of the best droplets ever!!!!

One thing missing.Like Maverick said: thumbnails should be generated by GD (if possible)


Greetings,

MacSmet

[Harry P.]

Could you guys please post the complete table version? Can't get the patches working... thanks! 

[Stefek]

@macSmat.

I will freeze the development of this droplet for now.
GD would be possible, but it's really complicated for a droplet.
And I am using this droplet in a different way (as mentioned, only first image and the rest in a hidden div, only links).
However, I will have a look into it later. My Job doesn't allow me to be too experimental right now. ^^

@HarryP
Here's the merged droplet.

Code: (microGallery_with_Tebles_as_default) [Select]

<?php
/*

"microGallery - place Gallery anywhere"
----------------------------------------
 DROPLET for use with WebsiteBaker CMS
----------------------------------------

@Author: Christian M. Stefan (Stefek)

TODO:
1) check the code by pro coder
2) create massage if the folder is empty (small bug occurs if a empty dir is called)
3) making the costumization easier (needed?)
4) using of GD Library to create thumbs on the fly (needed?)
5) small documentation

*/


//  check if the &#39;folder&#39; Flag is set in the Droplet
if (!isset($folder)):
echo "Your droplet-call is not complete, please set &#39;folder={path}&#39;";
return TRUE;
endif;

$img_dir = WB_PATH.MEDIA_DIRECTORY.&#39;/&#39;.$folder.&#39;/&#39;;
$img_url = WB_URL.MEDIA_DIRECTORY.&#39;/&#39;.$folder.&#39;/&#39;;  

// directory exists --->
    if (is_dir($img_dir)) { 
    // open directory and go through the files       
      $dir = dir($img_dir);
      
      while (FALSE !== $image_file = $dir->read()): 
      
    // skip index files and pointers         
        if (preg_match("~.php~", $image_file) || substr($image_file, 0, 1) == "."):
         continue;
        endif;      
       
   // convert filenames into Titles    
    $img_title = str_replace(array(".png", ".jpg", ".gif", ".jpeg"), "", $image_file);
    $img_title = str_replace("_", " ", $img_title); 
   
    if (!file_exists($img_dir.$image_file)) :
     echo &#39;directory empty&#39;;
    return TRUE;
    endif;
   
    /**
     * Make Array of images for the microGallery ----->
     */
    if (file_exists($img_dir.$image_file)):    
    $link = $img_url.$image_file;    
    $group = isset($group) ? $group : &#39;&#39;; //ignore $group if &group Parameter isn&#39;t set in Droplet      
            $image_array[] = "<a class=&#39;colorbox&#39; href=&#39;".$link."&#39; rel=&#39;lightbox[".$group."]&#39; title=&#39;".$img_title."&#39;>file&#39;".$img_title."&#39;</a>"; 
            $linkonly[] = $link; 
            $image_show[] = "<a class=&#39;colorbox&#39; href=&#39;".$link."&#39; rel=&#39;lightbox[".$group."]&#39; title=&#39;".$img_title."&#39;>
     <img src=&#39;".$link."&#39; title=&#39;".$img_title."&#39; style=&#39;width:auto; height:120px&#39;/></a>"; 
         
   endif;
   // <!------
   
endwhile;

}
// <------- directory exists
else {
// directory doesn&#39;t exists --->
echo "Directory (<tt> &#39;.$img_dir.&#39; </tt>) doesn&#39;t exist";
return TRUE;
     }    


/**
* DISPLAY microGallery
*/
if (isset($display)):

switch ($display):
case &#39;first&#39;:
$images =  $image_show[0];
break;

case &#39;notfirst&#39;:
array_shift($image_array); //skip first Element of Array
$images = &#39;<ul style="display:none">&#39;;
foreach ($image_array as $image){     
     $images .= &#39;<li>&#39;.$image.&#39;</li>&#39;;
}
$images .= &#39;</ul>&#39;;
break;

case &#39;all&#39;:
$images = &#39;<ul>&#39;;
foreach ($image_show as $image){     
     $images .= &#39;<li>&#39;.$image.&#39;</li>&#39;;
}
$images .= &#39;</ul>&#39;;
break;
case &#39;firstlink&#39;:
$images =  $linkonly[0];
break;

default:
$images =&#39;"&display" parameter is wrong by <tt>&#39;.$folder.&#39;</tt>, please correct&#39;;
endswitch;

return $images;

else: 
/*
-------------| output microGallery in table DEFAULT, if &display Flag isn&#39;t set
*/
 
$picsperrow = 4; // Set the amount of pics per row
$images = "<table><tr>";

for ($i=0; $i<count($image_show); $i++):
if (($i > 0) && ($i % $picsperrow == 0))
$images .= "</tr><tr>";
$images .= "<td>".$image_show[$i]."</td>";

endfor;

while ($i % $picsperrow > 0):
$images .= "<td>&nbsp;</td>";
$i++;
endwhile;

$images .= "</tr></table>";

return $images; 
endif;


Regards,
Stefek

[Harry P.]

Thanks, Stefek!  


EDIT: Just tried the table version, but images still show up in one column (like with the original droplet).

Anything else to adjust?

[Stefek]

Anything else to adjust?

No, just leave the &display parameter. (don't use it at all.)

Example:
[[microGallery?folder=cars]]

Regards,
Stefek

[Harry P.]

Ah, now it's working... perfect - thanks!

[snark]

not that it is of great importance but it does not run under camino / mac

[macsmet]

@snoork: you must be doing something wrong because it works just fine here with Camino 2.02 on OSX 6.3.

greetings!