WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Droplets & Snippets => Topic started by: Stefek on April 03, 2010, 02:07:43 PM

Title: [*droplet*] microGallery (place Gallery anywhere)
Post by: Stefek on April 03, 2010, 02:07:43 PM

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.

Quote from: Droplet Name: microGallery

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;

Quote from: Droplet Comment

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]

Title: Re: microGallery *droplet* (place Gallery anywhere)
Post by: macsmet on April 05, 2010, 02:47:48 PM

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

Title: Re: microGallery *droplet* (place Gallery anywhere)
Post by: Harry P. on April 05, 2010, 03:37:05 PM

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?

Title: Re: microGallery *droplet* (place Gallery anywhere)
Post by: mr-fan on April 05, 2010, 03:56:31 PM

Quote from: macsmet on April 05, 2010, 02:47:48 PM

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

hi macsmet,

just copy the code from the case "all":