Easiest Photo Gallery

[superkat]

Hi, Just got CMS Made Easy going (Superb bit of software) and need to integrate a photo gallery.

Whats the easiest and best way to do this.

btw my php is still at beginner level.

Cheers
Jamie

[Redguy]

I'm making a user defined tag that you can just insert into CMSMS, very short code!
Uses the thumbs that CMSMS creates with the Image Manager!

take a look at the tags current state under "Gallery" here: http://redguy.funpic.de/cmsms/

if this is what your looking for just PM me and I'll send you my Beta version in advance;)

[Redguy]

Well, since there have been several people who have PM'ed me about the gallery, I have decided to make it public here:)

The gallery makes use of the thumbnails that the CMSMS Image Manager creates so you should upload your pictures there, or upload via FTP and open the folder with the Image Manager to create the thumbnails.

You insert the code into a new User Defined Tag and just insert the tag anywhere in you homepage {yourtagname}

there are several functions you can pass to the tag, for example {yourtagname type='popup' picFolder='uploads/images/artwork/'} the complete list is of functions are in the code under //SETUP (DEFAULT) and //LAYOUT (DEFAULT):

Code: Select all

/*************************************
* thumbnailGenerator v2.25
* last update: 21|07|2004
* written by michael kloepzig
* mischer@save-the-gummybears.org
* http://www.save-the-gummybears.org
*************************************/
/*********************************
* Modified for CMS Made Simple by: Redguy
*********************************/

//SETUP (DEFAULT)
$type = 'click'; // "click" ... CLICK-THROUGH-GALLERY | "popup" ... POPUP WINDOW 
$picFolder = 'uploads/images/';  //PATH TO THE PICS, RELATIVE TO THIS FILE, ENDING WITH /
$thumbSpacing = 4; //SPACE BETWEEN THE THUMBNAILS IN PIXEL
$picsInARow = 4; //NUMBER OF THUMBNAILS IN A ROW
$thumbCount = 'on'; //SWITCH INCREMENT NUMBERS BELOW THUMBNAILS "on" or "off"
$sortBy = 'name'; //SORT IMAGE FILES BY 'name' OR 'date'
$sortByOrder = 'asc'; //SORT IMAGE FILES IN ASCENDING ORDER: 'asc' OR IN DESCENDING ORDER: 'desc'

//LAYOUT (DEFAULT)
$borderCol = '#DDDDDD'; //COLOR FOR THE BORDERS AROUND THUMBNAILS & BIG PICTURES
$borderSize = 3; //SIZE OF THE BORDERS AROUND THUMBNAILS AND BIG PICTURES IN PIXEL

//GET CMSMS SETUP
if(isset($params['type'])) $type = $params['type'];
if(isset($params['picFolder'])) $picFolder = $params['picFolder'];
if(isset($params['thumbSpacing'])) $thumbSpacing = $params['thumbSpacing'];
if(isset($params['picsInARow'])) $picsInARow = $params['picsInARow'];
if(isset($params['thumbCount'])) $thumbCount = $params['thumbCount'];
if(isset($params['sortBy'])) $sortBy = $params['sortBy'];
if(isset($params['sortByOrder'])) $sortByOrder = $params['sortByOrder'];

//GET CMSMS LAYOUT
if(isset($params['borderCol'])) $borderCol = $params['borderCol'];
if(isset($params['borderSize'])) $borderSize = $params['borderSize'];

//check php version and abort if it is obsolete
$pv = explode(".", phpversion());
if(($pv[0] < 5) && ($pv[0] > 3 && $pv[1] < 2) || ($pv[0] <= 3)) die("Your version of PHP (" . phpversion() . ") is obsolete. You need PHP 4.2.0 or above on your server in order to run thumbnailGenerator. Check <a href='http://php.net' target='_blank'>php.net</a> for further information.");
$selfA = explode('/', $_SERVER["PHP_SELF"]);
$self = $selfA[sizeOf($selfA)-1] . '?page=' . $_GET['page'];
$picDir = dir($picFolder);
//READ OUT PIC DIR
$liste = array();
while($check = $picDir->read()) {
	if(strpos($check,'.jpg') || strpos($check,'.gif') || strpos($check,'.png')) {
		$cThumb = explode("_", $check);
		if($cThumb[0] != "thumb" && $cThumb[0] != "editor") {
			$liste[] = $check;
		}
	}
}
if($sortBy == "date") {
	$tmp = array();
	foreach($liste as $k => $v) {
		$tmp['file'][$k] = $v;
		$tmp['date'][$k] = filemtime($picFolder . $v);
		}
	($sortByOrder == 'desc') ? array_multisort($tmp['date'], SORT_DESC, $tmp['file'], SORT_DESC) : array_multisort($tmp['date'], SORT_ASC, $tmp['file'], SORT_ASC);
	$liste = $tmp['file'];
} else ($sortByOrder == 'desc') ? rsort($liste) : sort($liste);
//OUPUT
$count = 1;
$output = '';
//thumbcount
if($thumbCount == 'on') {
	$deci = array();
	for($i=1; $i<=sizeof($liste); $i++) {
		$deci[$i] = $i;
		while(strlen($deci[$i]) < strlen(sizeof($liste))) $deci[$i] = '0' . $deci[$i];
	}
}
if($type == 'click' && isset($_GET['img'])) { //click through gallery
	$bigPic = $picFolder . $liste[$_GET['img']];
	$imgSize = getImageSize($bigPic);
	$img = (!isset($_GET['img'])) ? 1 : $_GET['img'];
	$next = ($_GET['img'] == (sizeOf($liste)-1)) ? $self : $self . "&img=" . ($_GET['img']+1);
	$output .= '<table border="0" cellspacing="0" cellpadding="' . $borderSize . '">' . "\n";
	$output .= '<tr>' . "\n" . '<td align="center" valign="middle" bgcolor="' . $borderCol . '">' . "\n";
	$output .= '<a href="' . $next . '"><img src="' . $bigPic . '" border="0" ' . $imgSize[3] . ' alt="next" /></a><br />' . "\n";
	$output .= 'Image ' . ($_GET['img']+1) . ' of ' . sizeOf($liste) . '<br />' . "\n";
	$output .= ($_GET['img'] == 0) ? "" : "<a href='" . $self . "&img=" . ($_GET['img']-1) ."'>Previous</a> | ";
	$output .= "<a href='" . $self . "'>Index</a>";
	$output .= ($_GET['img'] == (sizeOf($liste)-1)) ? "" : " | <a href='" . $next . "'>Next</a>";
	$output .= '<br />' . "\n" . '</td>' . "\n" . '</tr>' . "\n" . '</table>' . "\n";
} else { //thumbgeneration & popup window
	$output .= '<table border="0" cellspacing="' . $thumbSpacing . '" cellpadding="' . $borderSize .'">' . "\n" . '<tr>' . "\n";
	$i = 1;
	foreach($liste as $key => $value) {

		$bigPic = $picFolder . $value;
		$imgSize = getImageSize($bigPic);

		$tmbPic = $picFolder . 'thumb_' . $value;
		$tmbSize = @getImageSize($tmbPic) or ($tmbSize[0] = 96) and ($tmbSize[1] = 96);

		$output .= '<td bgcolor="' . $borderCol . '" align="center">' . "\n";

		if($type == 'click') {
			$output .= '<a href="' . $self . '&img=' . $key . '">' . "\n";
		}
		else {
			$output .= '<a href="javascript:;" onclick="JustSoPicWindow(\'' . $bigPic . '\',\'' . $imgSize[0] . '\',\'' . $imgSize[1] . '\',\'Popup Image ' . ($key+1) . '\',\'#000000\',\'hug image\',\'0\');return document.MM_returnValue">' . "\n";
		}
				
		$output .= '<img src="' . $tmbPic . '" border="0" width="' . $tmbSize[0] . '" height="' . $tmbSize[1] . '" alt="click for full sized image" /></a><br />' . "\n";

		if($thumbCount == 'on') {
			$output .= $deci[$i] . "\n";
			$i++;
		}
		$output .= '</td>' . "\n";

		if($count == $picsInARow && $key != count($liste)-1) {
			$output .= '</tr>' . "\n" . '<tr>' . "\n";
			$count = 1;
		} else {
			$count++;
		}
	}
	$output .= '</tr>' . "\n" . '</table>' . "\n\n";
}
echo $output;

if you wan't to use the popup function you have to put the popup javascript below into the header of your Gallery's page ()

Code: Select all

<__script__ type="text/javascript">
function JustSoPicWindow(imageName,imageWidth,imageHeight,alt,bgcolor,hugger,hugMargin) {
// by E Michael Brandt of ValleyWebDesigns.com - Please leave these comments intact.
// version 3.0.4  
	if (bgcolor=="") {
		bgcolor="#FFFFFF";
	}
	var adj=10
	var w = screen.width;
	var h = screen.height;
	var byFactor=1;

	if(w<740){
	  var lift=0.90;
	}
	if(w>=740 & w<835){
	  var lift=0.91;
	}
	if(w>=835){
	  var lift=0.93;
	}
	if (imageWidth>w){	
	  byFactor = w / imageWidth;			
	  imageWidth = w;
	  imageHeight = imageHeight * byFactor;
	}
	if (imageHeight>h-adj){
	  byFactor = h / imageHeight;
	  imageWidth = (imageWidth * byFactor);
	  imageHeight = h; 
	}
	   
	var scrWidth = w-adj;
	var scrHeight = (h*lift)-adj;

	if (imageHeight>scrHeight){
  	  imageHeight=imageHeight*lift;
	  imageWidth=imageWidth*lift;
	}

	var posLeft=0;
	var posTop=0;

	if (hugger == "hug image"){
	  if (hugMargin == ""){
	    hugMargin = 0;
	  }
	  var scrHeightTemp = imageHeight - 0 + 2*hugMargin;
	  if (scrHeightTemp < scrHeight) {
		scrHeight = scrHeightTemp;
	  } 
	  var scrWidthTemp = imageWidth - 0 + 2*hugMargin;
	  if (scrWidthTemp < scrWidth) {
		scrWidth = scrWidthTemp;
	  }
	  
	  if (scrHeight<100){scrHeight=100;}
	  if (scrWidth<100){scrWidth=100;}

	  posTop =  ((h-(scrHeight/lift)-adj)/2);
	  posLeft = ((w-(scrWidth)-adj)/2);
 	}

	if (imageHeight > (h*lift)-adj || imageWidth > w-adj){
		imageHeight=imageHeight-adj;
		imageWidth=imageWidth-adj;
	}
	posTop = parseInt(posTop);
	posLeft = parseInt(posLeft);		
	scrWidth = parseInt(scrWidth); 
	scrHeight = parseInt(scrHeight);
	
	var agt=navigator.userAgent.toLowerCase();
	if (agt.indexOf("opera") != -1){
	  var args= new Array();
	  args[0]='parent';
	  args[1]=imageName;
	  var i ; document.MM_returnValue = false;
	  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	} else {
	newWindow = window.open("","newWindow","width="+scrWidth+",height="+scrHeight+",left="+posLeft+",top="+posTop);
	newWindow.document.open();
	newWindow.document.write('<__html><title>'+alt+'</title></__body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor='+bgcolor+' onBlur="self.close()" onClick="self.close()">');  
	newWindow.document.write('<img src="'+imageName+'" width='+imageWidth+' height='+imageHeight+' alt="Click to close" />'); 
	newWindow.document.write('<__body></__html>');
	newWindow.document.close();
	newWindow.focus();
	}
}
</__script>

enjoy!

[megabob3]

Really nice good JOB!

[damosky]

I'm not much of a coder, so was wondering if anyone knew how to paginate this gallery? Say 10 images a page. Reason being is I like it's simplicity, but it's really only good for around 20 images, otherwise the page will get to long.

Hope someone has a answer.

Damian

[Caspar]

Great tool!
Someone tried out the popup-version? I get a blank, white page returned after having entered the javascript into . 

Cas

[Caspar]

::)Oops! I'm sorry, that should have been clear. Thanx Patricia!

[Russ]

An Alternative Really Easy Image Gallery
==========================================
---------------------------------
Edited: 2006-02-18
As I cannot change the attachments you should note that changing the following line of CSS for '.thumbs' means resizing of text is much better with the spacing based on ems.
e.g.
.thumb {
margin: 1em 1em 1.6em 0; /* Space between images */
---------------------------------
Ok, I saw RedGuys beta and I thought brilliant!!!
...And then I thought I could do with some other options So I began creating a different version. All credit should go to the originators

So what were my aims ?
1. Use the name of the images as a caption. Make it flexible captioning and also be able to independently set the 'title' and 'alt' tags.
2. The ability to change the surrounding 'div id' to allow for different CSS and hence styles for different galleries
3. Add 'classes' to various elements, again to allow styling. Thumbnail images and the big image can be formatted separately.
4. CSS and 'div' based rather than tables. Follow accessibility and web standards.
5. Make more photo gallery like - although you can make your own style with CSS.

See the attachments to this post:
Copy the 'ImageGalleryPHP.txt' code into a 'User Defined Tag'. I would suggest you name the tag 'ImageGallery' to keep things the same. You will also need to paste the CSS code from the 'ImageGalleryCSS.txt' to your main CSS page or one that is loaded by the page you put the tags in. (The CSS is only for an example and can be changed.)
There is no JavaScript - you do not need it - no pop-ups.

You should name your images carefully and then upload them to a directory on your web site using the 'Image Manager' in CMS Made Simple. (This automatically creates the thumbnail images.) One directory per gallery seems to make sense.

You can then apply this code to your page using:

Code: Select all

{ImageGallery picFolder="uploads/images/yourdir/"}

Where 'yourdir' is the directory you just uploaded your images to. It can be as simple as that or you can use some of the options...

Options
1. picFolder e.g. picFolder="uploads/images/yourdir/"
Is the path to the gallery (yourdir) ending in'/'
So you can have lots of directories and lots of galleries.

2. divID e.g. divID ="imagegallery"
Sets the wrapping 'div id' around your gallery so that you can have have different CSS for each gallery. The default is 'imagegallery'.

3. sortBy e.g. sortBy = "name" or sortBy = "date"
Sort images by 'name' OR 'date'. No default.

4. sortByOrder e.g. sortByOrder = "asc" or sortByOrder = "desc". No default.

5. bigPicCaption e.g.
bigPicCaption = "name" (filename excluding extension)
bigPicCaption = "file" (filename including extension)
bigPicCaption = "number" (a number sequence)
bigPicCaption = "none" (No caption)
The Default is "name". This sets caption above the big (clicked on) image to the above.

6. thumbPicCaption e.g.
thumbPicCaption = "name" (filename excluding extension)
thumbPicCaption = "file" (filename including extension)
thumbPicCaption = "number" (a number sequence)
thumbPicCaption = "none" (No caption)
The Default is "name". This sets the caption below the small thumbnail images to the above.

7. bigPicAltTag e.g.
bigPicAltTag = "name" (filename excluding extension)
bigPicAltTag = "file" (filename including extension)
bigPicAltTag = "number" (a number sequence)
The Default is "name". Sets the 'alt' tag for the big image - compulsory.

8. bigPicTitleTag e.g.
bigPicTitleTag = "name" (filename excluding extension)
bigPicTitleTag = "file" (filename including extension)
bigPicTitleTag = "number" (a number sequence)
bigPicTitleTag = "none" (No title)
The Default is "name". Sets the 'title' tag for the big image.

9. thumbPicAltTag is the same as bigPicAltTag (7) but for the small thumbnail images

10. thumbPicTitleTag is the same as bigPicTitleTag (8) but for the small thumbnail images. Except that after the options you have '... click for a bigger image' or if you do not set this option. You get the default of 'Click for a bigger image...'

An Example:
'div id' is 'cdcovers', no Caption on big images, thumbs have default caption. 'alt' tags for the big image are set to the name of the image file without the extension and the big image 'title' tag is set to the same but with an extension. The thumbs have the default 'alt' and 'title' tags. The default being the name of the image file without the extension for 'alt' and 'Click for a bigger image...' for the 'title',

Would be:
{ImageGallery picFolder="uploads/images/cdcovers/" divID="cdcovers" bigPicCaption="none"  bigPicAltTag="name" bigPicTitleTag="file"}

It's got lots of options but I wanted to keep it very flexible and you don't have to set them, the defaults are sensible.

(You should note that several options from the original have been removed because they are not needed or do not follow accessibility or web standard guidelines)

Check out the XHTML produced and CSS code for formatting options.

Examples are here:
http://www.cms.shoesforindustry.net/cms ... lerya.html
and here:
http://www.cms.shoesforindustry.net/cms ... leryb.html

I'd appreciate a bit of testing and feedback

Thanks to RedGuy for the brilliant idea!
Enjoy...

Russ

[attachment deleted by admin]

[tkcent]

Great ideas!

I can see where it would be helpful to modify the Image Manager to start storing information in the database, especially Title and Description.

I recently posted about another idea involving site-wide Categories:

http://forum.cmsmadesimple.org/index.ph ... 239.0.html

I think it would be cool to mark images with one or more Categories and then you could easily create Photo Albums across all your images without needing to have them all in the same physical directory.

Then in addition to showing an album by directory, you could show one by category:

Code: Select all

{ImageGallery category="Vacation 2005"}

[Russ]

In case you missed it above..
1. Re: An Alternative Really Easy Image Gallery
Edited: 2006-02-18
As I cannot change the attachments you should note that changing the following line of CSS for '.thumbs' means resizing of text is much better with the spacing based on em's.
e.g.

Code: Select all

.thumb {
margin: 1em 1em 1.6em 0; /* Space between images */

2. Patricia:

tkcent, using db would need we make a module I guess.
to keep it simple, as a user-tag (or could be a function file), it must stay like that.

Yes I tried to keep it simple and not use the database.

3. Patricia:

furthermore, I know that at least one of my users absolutely want the javascript popup, I'll try to modify yours to re-add it (for that specific person)

Patricia this should be pretty easy to add back in - compare the two versions

4. Patricia:

Also, I'm thinking (and already did a test) to modifiy the main Image Manager to have thumbs also created (as a copy) on images smaller than 96px, and also to store the thumbs in a /.thumbs/.picimage.jpg way. then it's hidden path.

I'm not sure what you mean by this??

5. tkcent:

....I think it would be cool to mark images with one or more Categories and then you could easily create Photo Albums across all your images without needing to have them all in the same physical directory....

I think this is for a module and a more sophisticated image viewer. This current one was adapted for my children to use on their web sites and it quite easy for them They seem to group images into galleries anyway. This was supposed to be quick and easy but flexiable if you need to do something different.

6. Patricia

... for title and description, could it actually read txt files? some of my users would want that to be able to comment some pics. would that be easy enough?

Wasn't there some sort of comment tag or module? I can't seem to find it now? This might work.

I'm was also thinking of doing another option to output the data as a list. eg.

Code: Select all

<ul class="imagegallery">
<li>List item</li>
<li>List item</li>
</ul>

Would this be usefull? We could probably do both in the same file as an option? I'm not sure a gallery is really a list mmm.. semantics...

Russ

[Redguy]

Good job Russ!!!

Everything under (//check php version and abort if it is obsolete) is rubish. It was in the gummybear code and I don't know why I just didn't delete it??

I would help with the code if I had some time. However, I will be watching the progression of the Tag/Module.

Keep up the good work

[alby]

In case you missed it above..
1. Re: An Alternative Really Easy Image Gallery
Edited: 2006-02-18
As I cannot change the attachments you should note that changing the following line of CSS for '.thumbs' means resizing of text is much better with the spacing based on em's.
......

Why don't open a project on forge?
It's very useful
Alby

[Redguy]

nice job Patricia.

I wouldn't had imagined that my idea would actually be in the CMSMS Core, that's awsome!! I love CMSMS, all the other CMS's are just plain trash compared to it in my opinion

Thanks people!

[Caspar]

furthermore, I know that at least one of my users absolutely want the javascript popup, I'll try to modify yours to re-add it (for that specific person)

Hey Patricia,
if you do that, would you mind to publish that code here? I'm very fond of accessability-standards, but I would love to keep the js-popups as well for one of my sites...

Cheers,
Caspar

[Russ]

I've converted the ImageGallery 'user tag' to a proper plugin tag.

It is a first release so we could do with some testing before putting it in to 'live' systems.
It is attached (function.ImageGallery.txt).
Download it and re-name to 'function.ImageGallery.php' and then
copy it to your CMS plugin directory. It has extensive help and an example of the CSS withing the help.

If you've been using the 'usertag' before I would suggest you delete it before copying and usig this plugin.


Let me know how you get on

Russ
p.s, Patrcia, I will reply properly to your email, it is just I am in a rush to go out!

[attachment deleted by admin]