sNews Forum

Previous sNews versions => sNews 1.5 Final => Programming => Topic started by: michael kennedy on February 02, 2007, 05:25:50 pm

Title: Simple PHP gallery
Post by: michael kennedy on February 02, 2007, 05:25:50 pm
This here is by far the SIMPLEST gallery script I've ever come across.  I kept it just for that reason. You never know when a client might ask you to add a "simple" gallery to their web site.

This snippet reads any gif files from the directory the script is in, prints them out and puts in a break every 5th image. For tables just put </tr><tr> in place of the break.
Code: [Select]
<?php
   $d 
dir('./');
   
$i 0;
   while(
false !== ($e $d->read())){
       if(
strpos($e,'.gif')){
           ++
$i;
           echo 
'<img src="'.$e.'"/>'.chr(10);
           if(!(
$i%5))
               echo 
'<br/>';
       }
   }
?>
Of course you can modify it (just by adding a few additional lines) to hyperlink to the fullsized images, if you use thumbnails, or even to display the image size below each thumbnail.
Title: Simple PHP gallery
Post by: Luka on February 02, 2007, 06:01:50 pm
Let me just add something to this:

This simple code snippet is an ideal sNews Addon. The usage is fairly simple:

1) Create a file called gallery.php and paste this snippet inside

2) Inside gallery.php configure the folder where you keep images to showcase

3) Create an article or a page and simply include gallery.php using:

Code: [Select]
[include]gallery.php[/include]
Title: Simple PHP gallery
Post by: Fred K on February 02, 2007, 07:19:14 pm
now, see,, that's what I've been thinking about... how to automate the gallery design I almost always use. Perfect. Now, I like to pepper my galleries with a leading larger image, kind of a theme or key image for the gallery, so I assign different classes to images, like this:
Quote
<p><img class="big" src="yadayada.ext" alt="yada yada yada" /></p>
<p class="sheet"><img class="thumb" src="yadayada_thm.ext" alt="thumbnail" /><img class="thumb" src="yadayada_thm.ext" alt="thumbnail" /><img class="thumb" src="yadayada_thm.ext" alt="thumbnail" /> etc etc etc</p>"
Any thoughts on how to do that with the script as starting point? I'm thinking something like
Quote from: mock code
'if $class equals $big echo <p><img class="big" src=$d.$gallname.$ext" alt="$gallname" /></p>
and
if $class equals $thumb echo <p class="sheet"> and pull in image thumbnails from directory "thumbs" '
(or same directory for any image if resizing method is used).
I can write the HTML code. PHP code ... not so well. Ideas?
Title: Simple PHP gallery
Post by: piXelatedEmpire on February 05, 2007, 05:38:44 am
This is a very cool little script!

Would it be difficult to integrate snews comments and maths capthcha with this? Now THAT would be shhhhhaweet!    :cool:
Title: Simple PHP gallery
Post by: Zucye on February 05, 2007, 03:57:39 pm
Did anyone give this a try with sNews?
It does not seem to work!
 :(
Title: Simple PHP gallery
Post by: Mika on February 05, 2007, 06:27:48 pm
Yep, I've just tested it and it doesn't work :(
Title: Simple PHP gallery
Post by: codetwist on February 12, 2007, 12:03:24 pm
What do You mean it doesn't work?

If You put that script above in the directory where images are located it should work just fine.

If You want it be located elsewhere then just add path, etc. like this:
Code: [Select]
<?php
// Set to the directory that contains only gallery images (path starting from sNews root)
$dirPath 'usrimg/';

$dirObj dir$dirPath );
$i 0;
while (
false !== ($entryName $dirObj->read())) {
   if (
is_file$dirPath $entryName )) {
      
// $filePath = realpath( $dirPath . $entryName );
      // $fileInfo = pathinfo( $filePath );
      
$fileInfo pathinfo$dirPath $entryName );
      if ( 
is_image_extension$fileInfo["extension"] ) ) {
         ++
$i;
         echo 
'<img src="'.$dirPath.$entryName.'" alt="'.$entryName.'" /> ' chr(10);
         if(!(
$i%5)) {
            echo 
'<br/>';
         }
      }
   }
// End while
$dirObj->close();

function 
is_image_extension$strExtension '') {
   if ( (
$strExtension '') && in_array$strExtension, array( 'gif''png''jpeg' ) ))
      return 
true;
   return 
false;
}

?>
It works just fine :D
Title: Simple PHP gallery
Post by: michael kennedy on February 12, 2007, 05:51:51 pm
Thanks valdis.  The original script wasn't designed to work with sNews in the first place, but I guess I should've kept that in mind when I posted it to this forum. I think it still needs a mechanism to allow them to link to the larger images though. Because some people wish for it to display thumbmails.

I couldn't figure out how to code it myself, but I think it would be useful if it detected "-tn" in the string filename, and display those as thumbnails only. So the naming convention would be something like:  pic.jpg - pic-tn.jpg
Title: Simple PHP gallery
Post by: codetwist on February 12, 2007, 07:43:33 pm
Ok, folks, here goes further revision of gallery code.

As for being simple ... well, let's see if somebody will play with this. This code basically works, it has to be stored in separate php file and included in article/page.

Code: [Select]
<?php

$galleryDir   
''// Set to the directory that contains gallery images
$galleryTitle 'Whatever this gallery is about';

//$useTitle     = false; // If set to true then $galleryTitle will be shown
$useTitle     true;

//$useIntroImage = false; // If set to true then possible to have differently formatted intro image
$useIntroImage true;
//$introImage    = '*.*'; // Used if set to specific file name
$introImage    '*.*';

$useThumbsDir  false// Expect to find thumbs directory in $galleryDir

$introImgClass ''// Add to css and here
$mainImgClass  ''// Add to css and here
$thumbImgClass ''// Add to css and here

$blockClass    ''// Add to css and here

// Set to the directory that contains galleries
$dirPath 'usrimg/' . ( ($galleryDir !== '') ? ($galleryDir '/') : '' ) ;

if (
$useTitle && ($galleryTitle !== '')) {
   echo 
"<h3>$galleryTitle</h3>" chr(10);
}

// Process intro
if ($useIntroImage) {
   switch (
true) {
      case (
$introImage !== '*.*') :
         
// Look for specified image
         
if ( $strIntro get_gallery_intro$dirPath$introImage$introImgClass ) ) {
            echo 
$strIntro;
            break;
         }
      case (
$introImage == '*.*') :
         
// Use first image encountered
         
if ( $strIntro get_gallery_intro$dirPath$introImage$introImgClass ) ) {
            echo 
$strIntro;
         }
         break;
      default :
         break;
   }
}

// Process main
if ($useThumbsDir) {
   
$dirPathThumbs $dirPath 'thumbs/';
   
show_gallery$dirPathThumbs$thumbImgClass$blockClass);
}
else {
   
show_gallery$dirPath$mainImgClass$blockClass );
}

function 
get_gallery$dirPath$imgClass ''$blockClass ''$lineSize ) {
   
$dirObj dir$dirPath );
   
$i 0;
   
$strOutput "";
   while (
false !== ($entryName $dirObj->read())) {
      if (
is_file$dirPath $entryName )) {
         
// $filePath = realpath( $dirPath . $entryName );
         // $fileInfo = pathinfo( $filePath );
         
$fileInfo pathinfo$dirPath $entryName );
         if ( 
is_image_extension$fileInfo["extension"] ) ) {
            ++
$i;
            
$strOutput .= '<img class="'.$imgClass.'" src="'.$dirPath.$entryName.'" alt="'.$entryName.'" /> ' chr(10);
            if( (
$lineSize 0) && !($i $lineSize) ) {
               
$strOutput .= '<br/>';
            }
         }
      }
   } 
// End while
   
if ( $i ) {
      if (
$blockClass == '')
         
$strOutput "<p>$strOutput</p>";
      else
         
$strOutput "<p class=\"$blockClass\">$strOutput</p>";
   }
   
$dirObj->close();
   return 
$strOutput;
}

function 
show_gallery$dirPath$imgClass ''$blockClass ''$lineSize ) {
   if ( 
$strGallery get_gallery($dirPath$imgClass$blockClass$lineSize) )
      echo 
$strGallery;
}

function 
get_gallery_intro$dirPath$imgName '*.*'$imgClass ''$blockClass '' ) {
   
$strOutput "";
   
$strImgClass   = ($imgClass !== '')   ? " class=\"$imgClass\" " "";
   
$strBlockClass = ($blockClass !== '') ? " class=\"$blockClass\" " "";
   if ( 
$imgName !== '*.*' ) {
      
// Look for specified intro file
      
if ( is_file$dirPath $imgName ) ) {
         
$fileInfo pathinfo$dirPath $entryName );
         if (
is_image_extension$fileInfo["extension"] )) {
            
$strOutput '<img '.$strImgClass.'src="'.$dirPath.$entryName.'" alt="'.$entryName.'" />';
         }
      } 
   }
   if ( 
$strOutput == '' ) {
      
// Look for first image encountered (even if specific image was requested but failed to be found)
      
$dirObj dir$dirPath );
      while (
false !== ($entryName $dirObj->read())) {
         if (
is_file$dirPath $entryName )) {
            
$fileInfo pathinfo$dirPath $entryName );
            if ( 
is_image_extension$fileInfo["extension"] ) ) {
               
$strOutput '<img '.$strImgClass.'src="'.$dirPath.$entryName.'" alt="'.$entryName.'" />';
               break;
            }
         }
      }
      
$dirObj->close();
   } 
// End while
   
if ($strOutput !== '') {
      
$strOutput "<p$strBlockClass>$strOutput</p>" chr(10);
   }
   return 
$strOutput;
}

function 
show_gallery_intro$dirPath$imgName '*.*'$imgClass ''$blockClass '' ) {
   if ( 
$strIntro get_gallery_intro($dirPath$imgName$imgClass$blockClass) )
      echo 
$strIntro;
}

function 
is_image_extension$strExtension '') {
   if ( (
$strExtension '') && in_array$strExtension, array( 'gif''png''jpeg' ) ))
      return 
true;
   return 
false;
}

?>
Would be good if somebody could come up with default css definitions that's obviously are missing.
Currently variables to store corresponding class names are empty for now:
- $introImgClass = ''; // for <IMG ...
- $mainImgClass  = ''; // for <IMG ...
- $thumbImgClass = ''; // for <IMG ...
- $blockClass    = ''; // for <P ...
Title: Simple PHP gallery
Post by: tarmithius13 on February 12, 2007, 07:55:04 pm
How about getting this to work with LightboxJS? Would that even be possible?
Title: Simple PHP gallery
Post by: piXelatedEmpire on February 13, 2007, 12:40:17 am
I like the direction this thread is heading.. great work codetwist  :cool:
Title: Simple PHP gallery
Post by: michael kennedy on February 13, 2007, 02:02:15 am
tarmithius13 the lightbox script can be easily added to images by installing the JS files into your root, linking to them from the header of your page. And applying the rel="lightbox" attribute to your images.

I think adding this additional functionality should stay outside of this script.  :/

Yeah, but I got to give props to you valdis.  My only gripe is that the script no longer looks "simple" anymore.  Boy, did that little script ever grow!
Title: Simple PHP gallery
Post by: codetwist on February 13, 2007, 08:30:23 am
That's the fate of all scripts :P

As idea they are simple ... but then some dreaming come along (pointing at some agent) ... and here You go with truckload of parameters and functions :D

P.S. Still hoping that somebody will come up with default styles for those images and paragraph :)
Title: Simple PHP gallery
Post by: codetwist on February 15, 2007, 11:21:23 am
Next revision of this simple script:

Current code (should be stored as php file and included in article/page):
Code: [Select]
<?php

$imageDir     
'usrimg/'// Set to the directory that contains galleries
$galleryDir   '';        // Set to the subdirectory that contains specific gallery

$useTitle     true;      // If set to true then $galleryTitle will be shown as <h3>
$galleryTitle 'Whatever this gallery title is';

$useIntroImage true;     // If set to true then possible to have differently formatted intro image
$introImage    '*.*';    // Use to set to specific file name

$useThumbs     false;    // Expect to find thumbnails in $galleryDir
$thumbsDir    'thumbs/'// Thumbnails subdirectory name if any

$galleryIntroId    'snewsGalleryIntro';
$galleryIntroClass 'snewsGallery';

$galleryBodyId     'snewsGalleryBody';
$galleryBodyClass  'snewsGallery';

$dirPath $imageDir $galleryDir;

/*
$strStyle  = "<style type='text/css' title='galleryStyle' media='screen'>" . chr(10);
$strStyle .= "@import 'mods/gallery/gallery.inc.css';" . chr(10);
$strStyle .= "</style>" . chr(10);

echo $strStyle;
*/

if ($useTitle && ($galleryTitle !== '')) {
   echo 
"<h3>$galleryTitle</h3>" chr(10);
}


// Process intro
if ($useIntroImage) {
   switch (
true) {
      case (
$introImage !== '*.*') :
         
// Look for specified image
         
show_gallery_intro$dirPath$introImage$galleryIntroId$galleryIntroClass'Some image' );
         break;
      case (
$introImage == '*.*') :
         
// Use first image encountered
         
show_gallery_intro$dirPath$introImage$galleryIntroId$galleryIntroClass'Some image' );
         break;
      default :
         break;
   }
}


// Process main
if ($useThumbs) {
   
$dirPathThumbs $dirPath $thumbsDir;
   
//show_gallery( $dirPathThumbs, $galleryBodyId, $galleryBodyClass );
   
show_gallery$dirPath$galleryBodyId$galleryBodyClass );
}
else {
   
show_gallery$dirPath$galleryBodyId$galleryBodyClass );
}

function 
get_gallery$dirPath$blockId ''$blockClass '' ) {
   
$dirObj dir$dirPath );
   
$i 0;
   
$strOutput "";
   
$strBlockId = ($blockId !== '') ? " id=\"$blockId\" " "";
   
$strBlockClass  = ($blockClass !== '')  ? " class=\"$blockClass\" " "";
   while (
false !== ($entryName $dirObj->read())) {
      if (
is_file( ($fileName $dirPath $entryName) )) {
         
$fileInfo pathinfo$fileName );
         if ( 
is_image_extension$fileInfo["extension"] ) ) {
            ++
$i;
            
$arrSizeAttr get_image_dimensions$fileName85 );
            
$strOutput .= get_item_markup$fileName'Click for a bigger image'$arrSizeAttr['width'], $arrSizeAttr['height'], 'Some Image' ) . chr(10);
         }
      }
   } 
// End while
   
if ( $i ) {
      
$strOutput "<ul$strBlockClass>$strOutput</ul>";
      
$strOutput "<div$strBlockId>$strOutput</div>";;
   }
   
$dirObj->close();
   return 
$strOutput;
}

function 
show_gallery$dirPath$blockId ''$blockClass '') {
   if ( 
$strGallery get_gallery($dirPath$blockId$blockClass ) ) {
      echo 
$strGallery;
   }
}


function 
get_gallery_intro$dirPath$imgName '*.*'$blockId ''$blockClass ''$imgAlt '' ) {
   
$strOutput "";
   
$strBlockId    = ($blockId !== '')    ? " id=\"$blockId\" " "";
   
$strBlockClass = ($blockClass !== '') ? " class=\"$blockClass\" " "";
   if ( 
$imgName !== '*.*' ) {
      
// Look for specified intro file
      
if ( is_file( ($fileName $dirPath $imgName) ) ) {
         
$fileInfo pathinfo$fileName );
         if (
is_image_extension$fileInfo["extension"] )) {
            
$arrSizeAttr get_image_dimensions$fileName170 );
            
$strOutput '<img '.$arrSizeAttr["size"].' src="'.$fileName.'" alt="'.$imgAlt.'" />';
         }
      } 
   }
   if ( 
$strOutput == '' ) {
      
// Look for first image encountered (even if specific image was requested but failed to be found)
      
$dirObj dir$dirPath );
      while (
false !== ($entryName $dirObj->read())) {
         if (
is_file( ($fileName $dirPath $entryName) )) {
            
$fileInfo pathinfo$fileName );
            if ( 
is_image_extension$fileInfo["extension"] ) ) {
               
$arrSizeAttr get_image_dimensions$fileName170 );
               
$strOutput '<img '.$arrSizeAttr["size"].' src="'.$fileName.'" alt="'.$entryName.'" />';
               break;
            }
         }
      }
      
$dirObj->close();
   } 
// End while
   
if ($strOutput !== '') {
      
$strOutput "<div$strBlockId><div$strBlockClass".$arrSizeAttr["size"].">$strOutput</div></div>" chr(10);
   }
   return 
$strOutput;
}

function 
show_gallery_intro$dirPath$imgName '*.*'$blockId ''$blockClass ''$imgAlt '' ) {
   if ( 
$strIntro get_gallery_intro($dirPath$imgName$blockId$blockClass$imgAlt) ) {
      echo 
$strIntro;
   }
}


function 
is_image_extension$strExtension '') {
   if ( (
$strExtension '') && in_array$strExtension, array( 'gif''png''jpeg' ) ))
      return 
true;
   return 
false;
}

function 
get_image_dimensions$imgFile$refSize 85$refPadding ) {
   
$arrResult = array();
   
$arrResult["size"] = " width=\"$refSize\" height=\"$refSize\" ";
   
$arrResult["width"] = $refSize;
   
$arrResult["height"] = $refSize;
   
//$arrResult["padding"] = "";
   
if ( $imgSizeInfo getimagesize($imgFile) ) {
      
$width  $imgSizeInfo[0];
      
$height $imgSizeInfo[1];
      if ( 
$width>&& $height>0) {
         
// Proceed with calculation
         
if ( $width $height ) {
            
$height  = (integer) Round ((1.0 $height $refSize) / (1.0*$width), 0);
            
$width   $refSize;
            
$arrResult["size"] = " width=\"$width\" height=\"$height\" ";
            
$arrResult["width"] = $width;
            
$arrResult["height"] = $height;
            
// Not used anymore
            //$padding = get_padding( $refSize - $height, $refSize, $refPadding );
            //$arrResult["padding"] = " padding-top=\"$padding\" padding-bottom=\"$padding\" ";
         
}
         else if (
$width $height) {
            
$width = (integer) Round ((1.0 $width $refSize) / (1.0*$height), 0);
            
$height  $refSize;
            
$arrResult["size"] = " width=\"$width\" height=\"$height\" ";
            
$arrResult["width"] = $width;
            
$arrResult["height"] = $height;
            
// Not used anymore
            //$padding = get_padding( $refSize - $width, $refSize, $refPadding );
            //$arrResult["padding"] = " padding-left=\"$padding\" padding-right=\"$padding\" ";
         
}
      }
   }
   return 
$arrResult;
}

/*
// Not used anymore
function get_padding( $shortage, $refSize = 85, $refPadding = 10 ) {
   $intResult = 0;
   if ( $shortage > 0 ) {
      $intResult = (integer) $refPadding + Round( $shortage / 2, 0);
   }
   return $intResult;
}
*/

// Used to calculate top margin pull value
function get_top_margin$height$padding$border ) {
   
$intResult = (integer) Round( ($height 2*$padding 2*$border)/2);
   return 
$intResult;
}

// Provides full <li>...</li> element markup
function get_item_markup$imageFile$linkTitle "Click for a bigger image"$width 85$height 85$imageAlt '' ) {
   
$strTopMargin get_top_margin$height3); // Calculates positioning for each image
   
$strResult  '<li>';
   
$strResult .= '<div> </div>'// Provides for uniform background rectangle
   
$strResult .= "<a href=\"#nogo\" title=\"$linkTitle\" style=\"margin-top:-$strTopMargin"."px; height:" . ($height+1) . "px;\" >";
   
$strResult .= "<img src=\"$imageFile\" width=\"$width\" height=\"$height\" alt=\"$imageAlt\" />";
   
$strResult .= '</a>';
   
$strResult .= '</li>';
   return 
$strResult;
}


?>
Current styles used (should be either included or linked as separate css file):
Code: [Select]
/*
 * CSS:      Table like css gallery
 * Author:   Dragan Babic, (c) 2006
 * Site:        http://dnevnikeklektika.com/
 * Url:          http://dnevnikeklektika.com/en/css-gallery-layout-en
 * Licence: Creative Commons - Attribution-ShareAlike 2.5 - http://creativecommons.org/licenses/by-sa/2.5/
 */

div#snewsGalleryBody .snewsGallery {
   margin:     0;
   padding:    0;
   overflow:   hidden; /* Clears the floats */
   width:      100%; /* IE and older Opera fix for clearing, they need a dimension */
   list-style: none;
}

div#snewsGalleryBody .snewsGallery li {
   float:      left;
   display:    inline; /* For IE so it doesn't double the 1% left margin */
   width:      85px; /* width:23.8%; */
   margin:     0 0 10px 1%; /* 0 0 10px 1%; */
   padding:    10px 0; /* 10px 0; */
   height:     93px; /* For img 85 */ /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
   position:   relative; /* This is the key */
   background: url(45degree.png);
}

div#snewsGalleryBody .snewsGallery a, .snewsGallery img {
   display:    block;
   width:      100%;
}

div#snewsGalleryBody .snewsGallery a img {
   border:     none;
} /* A small fix */

div#snewsGalleryBody .snewsGallery a:link, .snewsGallery a:visited, .snewsGallery a:focus, .snewsGallery a:hover, .snewsGallery a:active {
   padding:    3px; /* 3px; */
   background: #eeefef;
   width:      85px;
   height:     85px;
   border:     1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
   position: absolute; top: 50%; left: 50%; /* position it so that image's top left corner is in the center of the list item */
   margin: -46px 0 0 -46px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
   /* vertical-align: middle; */
}

div#snewsGalleryBody .snewsGallery a:hover {
   border-color:   #dfdfdf;
}


/* These are all optional, for decoration purposes only */
div#snewsGalleryBody .snewsGallery {
   border-bottom:  1px solid #eeefef; /* #000; */
   padding-bottom: 10px;
   margin-top:     10px;
}

/*
 * End of modified Table like css gallery
 */

/*
 * CSS:    Modifications/Additions to provide for variable image size and intro image
 * Author: Valdis Ozols
 */

div#snewsGalleryBody .snewsGallery li div { /* This one provides for uniform backround rectangle */
   padding:    3px; /* 3px; */
   background: #eeefef;
   width:      85px;
   height:     85px;
   border:     1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
   position: absolute; top: 50%; left: 50%; /* position it so that image's top left corner is in the center of the list item */
   margin: -46px 0 0 -46px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
}

div#snewsGalleryIntro {
   clear: both;
   width: 90%;
}

div#snewsGalleryIntro .snewsGallery {
   width: 200px;
   float:center;
   position: relative;
}

div#snewsGalleryIntro .snewsGallery img {
   display: block;
   padding: 10px;
   border: 1px solid #9fbdb9;
   background: #d4e2de;
   margin-left: auto;
   margin-right: auto;
   width: 170px;
 
}
/*
 * End of Modifications/Additions
 */
That's it for now.
Title: Simple PHP gallery
Post by: alpha10 on February 15, 2007, 12:18:45 pm
Can I see a demo of this ?

Thanks
Title: Simple PHP gallery
Post by: codetwist on February 15, 2007, 12:24:45 pm
Quote from: alpha10
Can I see a demo of this ?

Thanks
Currently I have this only in local network. You will have to setup and test it on Your own  :rolleyes:
Title: Simple PHP gallery
Post by: Luka on February 15, 2007, 02:25:38 pm
I wouldn't use this script without the prior consent of the author or without examining the licence this was released under.
Title: Simple PHP gallery
Post by: codetwist on February 15, 2007, 04:13:48 pm
Quote from: Luka
I wouldn't use this script without the prior consent of the author or without examining the licence this was released under.
FYI:

From source site (http://dnevnikeklektika.com/en/css-gallery-layout-en):

Feel free to redistribute and reuse it under it's respective licence (http://creativecommons.org/licenses/by-sa/2.5/).

License is Creative Commons - Attribution-ShareAlike 2.5. It's more specific that sNews licence anyway, but still resuable and redistributable ;P

Only think missing is reference to it in css code, will add.

Any other problems with it, Luka?
Title: Simple PHP gallery
Post by: codetwist on February 15, 2007, 04:27:10 pm
Besides, what exactly means simply Creative Commons, Luka?
Title: Simple PHP gallery
Post by: Luka on February 15, 2007, 06:15:02 pm
It was just my suggestion, nothing else.
Title: Simple PHP gallery
Post by: Fred K on February 15, 2007, 06:36:22 pm
Creative Commons is the name of the organisation that is behind the different CC licenses, essentially a more relaxed form of copyright, though not really "copyleft" as some interpret it.

Find out more (http://creativecommons.org)
Title: Simple PHP gallery
Post by: codetwist on February 15, 2007, 07:46:28 pm
Quote from: agentsmith
Creative Commons is the name of the organisation that is behind the different CC licenses, essentially a more relaxed form of copyright, though not really "copyleft" as some interpret it.

Find out more (http://creativecommons.org)
Thanks, but been there, seen it long time ago. Therefore I'm asking about license specifics, because simply creative commons doesn't make sense at all AFAIK. That's the reason why for example that CSS author has chosen something specific - attribution and share alike.
Title: Simple PHP gallery
Post by: ld3 on February 16, 2007, 02:17:00 pm
i can't get this working.  this is what i've done so far

1.  put gallery.php in my snews root directory
2.  put the css into a file called gallery.inc.css also in the root snews directory
3.  added a line to import the gallery.inc.css to my default css file
4.  added /usrimg directory to the snews root
5.  added /gallery directory to the usrimg directory
6.  created a new page in snews and inlcuded the gallery.php file

is that everything?

i don't see any pictures.  just the default "whatever this gallery title is" message

can anyone help?

thanks

i think i'm getting there.  all my images were jpg its working with other image types.  needed to add jpg to is-image-extension function
Title: Simple PHP gallery
Post by: codetwist on February 16, 2007, 03:35:47 pm
Quote from: ld3
i can't get this working.  this is what i've done so far

1.  put gallery.php in my snews root directory
2.  put the css into a file called gallery.inc.css also in the root snews directory
4.  added /usrimg directory to the snews root
5.  added /gallery directory to the usrimg directory
6.  created a new page in snews and inlcuded the gallery.php file

is that everything?

i don't see any pictures.  just the default "whatever this gallery title is" message

can anyone help?

thanks

i think i'm getting there.  all my images were jpg its working with other image types.  needed to add jpg to is-image-extension function
Ahem ... good to hear that :lol:

Feedback and suggestions welcome as I'm not CSS expert so there might be better approaches.
Title: Simple PHP gallery
Post by: ld3 on February 16, 2007, 03:42:28 pm
i got one more question now!  i'm getting the gallery images displayed but when i click on them to see the larger image i'm getting directed to a #nogo link.
i guess its this code here.....
 $strResult .= "<a href=\"#nogo\" title=\"$linkTitle\" style=\"margin-top:-$strTopMargin"."px; height:" . ($height+1)

do i need to change this to make the links work?
Title: Simple PHP gallery
Post by: codetwist on February 16, 2007, 03:50:31 pm
Quote from: ld3
i got one more question now!  i'm getting the gallery images displayed but when i click on them to see the larger image i'm getting directed to a #nogo link.
i guess its this code here.....
 $strResult .= "<a href=\"#nogo\" title=\"$linkTitle\" style=\"margin-top:-$strTopMargin"."px; height:" . ($height+1)

do i need to change this to make the links work?
Yes, as this thing is unfinished yet. It doesn't do more currently than what can be changed with configuration variables. Just static page :D

So, either add into php code whatever is needed to output what's needed for href or try some CSS tricks. I haven't yet made my mind up regarding further improvement of this addon.
Title: Simple PHP gallery
Post by: ld3 on February 16, 2007, 04:01:32 pm
ok.   i like the way lightbox displays images so i will try and amend it to display with lightbox.  thanks again
Title: Simple PHP gallery
Post by: codetwist on February 16, 2007, 04:59:09 pm
There is another one, called Litebox (http://www.doknowevil.net/litebox/). Don't know a lot about it, but size is significantly smaller than Lightbox.
Title: Simple PHP gallery
Post by: Fred K on April 13, 2007, 06:16:34 pm
I really like this script. I just have one request for help, then I'm all set.
I need to set a link on the big image and on any thumbnail/main image that points to, in this case, another category within the site. Let me explain.

I'm working on my templates showcase, so I have a page in my sNews system, called Templates. That page is used to call in gallery.php. Obviously I have created a directory Templates, it is the root directory for all my template demos btw, and in that directory I have the image directory used by gallery.php for thumbnails and intro images etc. Now, I'm using the first version of Valdis' expanded simple script and it works perfectly. So, in the main process part, I've added the following to $strOutput:
Quote
$strOutput .= '<a href="'.db('website').'/'.$entryName.'" title="'.$entryName.'"><img class="'.$imgClass.'" src="'.$dirPath.$entryName.'" alt="'.$entryName.'" /></a> ' . chr(10);
            if( ($lineSize > 0) && !($i % $lineSize) ) {
               $strOutput .= '<br/>';
(I've added the a href bits to all $strOutput in process main so that all images gets a link.)

My problem? I need to strip out the file extension from $entryName to get the link to work as intended. (naming convention of images is same name as its corresponding template. Each template demo is in a subdirectory with that same name.) But -- how?
Help? ;)
Title: Simple PHP gallery
Post by: Fred K on April 13, 2007, 08:35:00 pm
Quote from: bakercad
something undecipherable
yeah, it looks like it would work very well ... but as you can see from the quote... :D
I don't know where to put it, sorry

Here's what the full code looks like from get_gallery_intro and down, including my <a href's, maybe that will make clearer why I don't know where to put the substr() bit...
Quote
function get_gallery_intro( $dirPath, $imgName = '*.*', $imgClass = '', $blockClass = '' ) {
   $strOutput = "";
   $strImgClass   = ($imgClass !== '')   ? " class=\"$imgClass\" " : "";
   $strBlockClass = ($blockClass !== '') ? " class=\"$blockClass\" " : "";
   if ( $imgName !== '*.*' ) {
      // Look for specified intro file
      if ( is_file( $dirPath . $imgName ) ) {
         $fileInfo = pathinfo( $dirPath . $entryName );
         if (is_image_extension( $fileInfo["extension"] )) {
            $strOutput = '<a href="'.db('website').'/'.$entryName.'" title="'.$entryName.'"><img '.$strImgClass.'src="'.$dirPath.$entryName.'" alt="'.$entryName.'" /></a>';
         }
      }
   }
   if ( $strOutput == '' ) {
      // Look for first image encountered (even if specific image was requested but failed to be found)
      $dirObj = dir( $dirPath );
      while (false !== ($entryName = $dirObj->read())) {
         if (is_file( $dirPath . $entryName )) {
            $fileInfo = pathinfo( $dirPath . $entryName );
            if ( is_image_extension( $fileInfo["extension"] ) ) {
               $strOutput = '<a href="'.db('website').'/'.$entryName.'" title="'.$entryName.'"><img '.$strImgClass.'src="'.$dirPath.$entryName.'" alt="'.$entryName.'" /></a>';
               break;
            }
         }
      }
      $dirObj->close();
   } // End while
   if ($strOutput !== '') {
      $strOutput = "<p$strBlockClass>$strOutput</p>" . chr(10);
   }
   return $strOutput;
}

function show_gallery_intro( $dirPath, $imgName = '*.*', $imgClass = '', $blockClass = '' ) {
   if ( $strIntro = get_gallery_intro($dirPath, $imgName, $imgClass, $blockClass) )
      echo $strIntro;
}

function is_image_extension( $strExtension = '') {
   if ( ($strExtension > '') && in_array( $strExtension, array( 'gif', 'png', 'jpg', 'jpe' ) ))
      return true;
   return false;
}
I tried squeezing it in to a few different places, a couple of different ways, but, again, see the quote at the beginning...
(I blame it on it being the 13th today :) )
Title: Simple PHP gallery
Post by: Fred K on April 14, 2007, 12:01:26 am
Cracked it. Thanks Bob! (You know I was only yanking your chain with that "undecipherable" shit, right? :) )
The solution to my problem was putting the substr part within the link, like so:
Quote
$strOutput .= '<a href="'.db('website').substr($entryName, 0, -4).'" title="'.$entryName.'"><img class="'.$imgClass.'" src="'.$dirPath.$entryName.'" alt="'.$entryName.'" /></a> ' . chr(10);
Hi-ho, hi-ho, back to the mill I go... [whistles wildly off key] :)
And it's no longer Friday the 13th! (here, where I am...)
Title: Simple PHP gallery
Post by: codetwist on April 14, 2007, 10:20:38 am
Mmm ... substr($entryName, 0, -4) ... this one will not work nice with .jpeg for example.

There is already following code line:
Code: [Select]
         $fileInfo = pathinfo( $dirPath . $entryName );It's purpose is to provide file related info out-of-the-box without any substr(...) and other string handling functions:
Code: [Select]
       // File extension :)
        $fileExtension = $fileInfo['extension'];

        // Extension length
        $extLength = strlen($fileExtension);

        // And finally .jpeg safe substr() usage  example
        $anotherEntryName = substr($entryName, 0, -($extLength-1));
Hope this might be handy.

Is it possible to see that gallery script in action somewhere? I still have it only in dev environment, kind of uninspiring to look at ;)
Title: Simple PHP gallery
Post by: Fred K on April 14, 2007, 02:56:51 pm
thanks codetwist, that will come in handy when jpeg or other 4-char extension is being used (I changed the extensions array to not include jpeg for my personal project so for me substr -4 worked).

The gallery will hopefullly be online this weekend. I just have to finish a client project first. Gotta eat you know... ;)

I did try making use of the fileinfo early on in my attempts but being something of a php analphabet I only managed to break things...
Thanks for the help! I'll post a link when the gallery is online.

/* Edit -- $anotherEntryName = substr($entryName, 0, -$extLength); returns the entryName with the dot
What do I need to change so the dot is removed along with the extension? Ideas?
Title: Simple PHP gallery
Post by: codetwist on April 14, 2007, 03:23:56 pm
Good :)

May be You can come up with default version of css classes that would blend nicely in default snews layout used in distro? Then this version of gallery script could be published as finished addon ;)


P.S.
Ughhh ... that dot thing ... I forgot :) in substr should go -($extLength-1)
Title: Simple PHP gallery
Post by: Fred K on April 14, 2007, 04:19:29 pm
Quote from: codetwist
substr should go -($extLength+1)
thanks Valdis, but that should be -($extLength-1), right? That's what works for me anyway. +1 puts out "filename.j" wheras -1 outputs the intended "filename". It's all fixed though, thanks. :)

As for default CSS classes ... don't know if that's necessary. The script is fairly clear that class names should be added to both $introImgClass and $thumbImgClass/$mainImgClass to get the best result. I use "big" for the big (intro) image, "main" for main images and "thm" for thumbnails. Others may have completely different preferences, if nothing else then for language purposes... If you do use default class names, make them self explanatory. And you still need the comment in the script code, about adding class names to both the script and in the CSS.
That's just my opinion though. ;)
Title: Simple PHP gallery
Post by: codetwist on April 14, 2007, 04:30:58 pm
Ughhh ... fixed that +-1 with what works  :)
Title: Simple PHP gallery
Post by: piXelatedEmpire on April 16, 2007, 02:34:42 am
I'd be very interested to see the finished product smithy as I'd like to use something like this for my photogallery and templates secion also :)
Title: Simple PHP gallery
Post by: Fred K on April 16, 2007, 07:31:03 am
guys -- check out the post I just made in the site showcase forum. (Or follow this link (http://www.frdk.com/templates/home/showcase/) for immediate access...)
Title: Simple PHP gallery
Post by: philmoz on April 16, 2007, 07:58:25 am
Agent, I click the thumbs, and get taken to another page, instead of seeing the larger gallery image...

Is this as it should be?
Title: Simple PHP gallery
Post by: piXelatedEmpire on April 16, 2007, 08:02:18 am
ditto here.. when you click on the little thumbs that have 'Download' underneath them, you are directed to a demo of that template.

Perhaps this is as it should be, however, what is the point of the larger 'preview' of the templates?  perhaps its intention is that when the smaller thumbnails are moused over, the image should change to reflect the relevant template?  That at least is my understanding.

Using IE6 FWIW.
Title: Simple PHP gallery
Post by: Fred K on April 16, 2007, 09:11:56 am
yep, it's as it should be, preview images lead to live demo pages fully stacked with sNews ... so there is no real purpose for a 'larger preview' image other than perhaps showing off more of the design detail. But then, this is an earlybird version and I haven't worked all the little details yet ... user experience is probably the one part that is most lagging behind, next to content (hmm... the two single most important items of a web site! oops!) ;) I will most likely reduce the number of small thumbs to three per row so they can be bigger insize and thereby better remove the need for a big preview.

The big image in the front row is sort of a "featured template" spot so no, nothing is supposed to happen when you mouse over a smaller thumbnail, Pix. A tooltip pops up but that's it.

For a classic photo gallery you would absolutely link the thumbnails to larger versions, either through a Thickbox/Lightbox/Litebox/Greybox thingy or the old skool way. But the template site is not a photo gall, that's for another part of the site.

The big thing with exposing the templates site, at this early stage, here was to show off the gallery. Usage-wise it's as simple as can be: set a few parameters in the gallery script, include it in a page or article, then just add a bunch of images to the designated spot(s) and ... there it is. Only thing I haven't been able to figure out is how to actually get it to pick a specific image as intro image (the bigger version). I've tried everything I can think of but it still picks an image based on its own pref's it seems. No biggie though, it's so simple to use I can live with that little quirk... But as a best case scenario I'd like to be able to avoid duplicates if I can. Goes to user experience if nothing else...

All in all, the script is very good I'd say. Big thanks to mike and codetwist!
Title: Simple PHP gallery
Post by: codetwist on April 16, 2007, 10:06:32 am
Can You post Your code here? It was supposed that by setting $introImage it's possible to specify big one:
Code: [Select]
//$useIntroImage = false; // If set to true then possible to have differently formatted intro image
$useIntroImage = true;
//$introImage    = '*.*'; // Used if set to specific file name
$introImage    = '*.*';
Looked into that old code ... it was supposed, but not finished that way as I moved to next version - there is bug in function that gets intro image. In following code section:
Code: [Select]
  if ( $imgName !== '*.*' ) {
      // Look for specified intro file
      if ( is_file( $dirPath . $imgName ) ) {
         $fileInfo = pathinfo( $dirPath . $entryName );
         if (is_image_extension( $fileInfo["extension"] )) {
            $strOutput = '<a href="'.db('website').'/'.$entryName.'" title="'.$entryName.'"><img '.$strImgClass.'src="'.$dirPath.$entryName.'" alt="'.$entryName.'" /></a>';
         }
      }
   }
add following right after 'if (... ) {' line :
Code: [Select]
$entryName = $imgName;Hope, this helps with intro.

P.S.
Site looks exciting, indeed ;)
Title: Simple PHP gallery
Post by: Fred K on April 16, 2007, 06:41:43 pm
Thanks, entryName = imgName fixed it. I s'pose I should have figured that one out but as noted everywhere else, I'm something of a php analphabet. You'll have to bear with me.... ;)

Meanwhile I've updated the modified gallery script in terms of UE by changing the thumbnail pix links to show larger versions with Thickbox 2 (http://jquery.com/demo/thickbox/) and the latest jquery version, and added a text link on the line below the image leading to the respective demo system. The intro image link still leads to the demo page as there's no need for a larger view (the intro image is only 7-8% smaller in size than the full size).

Using Thickbox creates a new problem though: if you click a thumbnail and look at the pretty picture and then click the "close" link or anywhere on the image to close the Thickbox, you get transported to the index page, not back to the showcase page. No idea how to fix that at the moment, short of making the showcase page "Home". I thought about implementing the jumpTo link generator (found elsewhere in this forum, mods section possibly) but that would mean for me to edit the thickbox.js code and, what with me being php analphabet and all, is likely to break ever'thang.

'twist -- I can PM you my modified gallery.php if you want to look at the mess I've made... ;)
Title: Simple PHP gallery
Post by: codetwist on April 16, 2007, 10:50:25 pm
Seems that there is no configuration for Thickbox - it's either works as is or it's back to hacking away at code :/

As for gallery code, please, PM it ;)
Title: Simple PHP gallery
Post by: Fred K on April 16, 2007, 11:49:48 pm
PM'd
Title: Simple PHP gallery
Post by: Fred K on May 28, 2007, 09:09:12 pm
codie, I'm at this again ... :lol:
Can't get it to work with sNews 1.6 ... tried PM'ing you but your PMailbox is full.
Any idea if something's changed between 1.5 and 1.6 that could cause this mod to not work anymore? Stops dead after galleryTitle. Annoying since I "promised" a client this functionality.
Help appreciated as always. :)
Title: Simple PHP gallery
Post by: codetwist on May 28, 2007, 09:51:40 pm
@agentsmith : PMed
Title: Simple PHP gallery
Post by: piXelatedEmpire on May 29, 2007, 02:29:44 am
When you guys get this working, can you please share with us the finished changes required.. I intended to use this also :cool:
Title: Simple PHP gallery
Post by: Patric Ahlqvist on May 29, 2007, 10:11:09 am
So going to use it aswell... I'm quite satisfied with ZP, but an snews gallery is prefered of course... My only concerns are that it needs (in my opinion) to contain the same thumb to bigger image - original image that ZP has... and that the thumb and firtst bigger image size is managable in order to be able to style both website and gallery to coexist ;)... and of course the integration of it...

Other stuff like comments and crap is not a must...
Title: Simple PHP gallery
Post by: piXelatedEmpire on May 30, 2007, 01:42:44 am
Quote from: Patric
... I'm quite satisfied with ZP, but an snews gallery is prefered of course...
I have been using ZP, but the development is slow over there, and aslo I think it has too many features that I just wont use.  A nice simple sNews specific gallery is what I'm talking about.

And I think something like this would be easier to integrate into sNews, which would make the inclusion of comments and such much easier.  Would just mould nicely into sNews on the front and backends.

Once this little gallery is up and running and I have it live to test, I'll start playing around with adding a couple little extras to it ;) .. with help of course :D
Title: Simple PHP gallery
Post by: codetwist on May 30, 2007, 09:32:13 am
Well, well ... let's see what we are having here ... coming soon ... somewhere this year ... and now THIS - SECRET WEBSITE :o

P.S.
Ain't You in a middle of some advertising campaign, piXelatedEmpire  :lol:
Title: Simple PHP gallery
Post by: piXelatedEmpire on May 31, 2007, 01:50:18 am
LOL codetwsit  :lol:  :lol:  :lol:

I've got the domain and hosting ready to go.. just tweaking my sNews site with MODs etc before I FINALLY release it into the wild!

Tell me master codie, is this gallery now suitable for integration into 1.6?
Title: Simple PHP gallery
Post by: Fred K on May 31, 2007, 08:21:17 pm
I can say this much: the gallery I have running on my templates section, which uses a version of this mod, works perfectly with 1.6 (I'm moving all my site's db's and stuff from 1.5 to 1.6 right now, so far no problems... *slaps self on head for luck*). The problem I ran into earlier came from moving that version to a completely new site. I still don't know why it won't work there though, but I'm working on it.

I think the templates gallery will be running with 1.6 online tomorrow (CET), you could check it out then if you want.
Title: Simple PHP gallery
Post by: codetwist on May 31, 2007, 09:17:34 pm
Regarding 1.6 vs 1.5 I'm not aware of any features in this gallery addon code that would be depending much on sNews itself. What was used - hasn't changed IMHO. And it was meant to be included in page by standard sNews include. So code in this thread or code from agentsmith should be good to go ;)
Anyway to use it any developer&designer will have to either tweak it ... or TWIST it  :lol:
Title: Simple PHP gallery
Post by: Fred K on June 01, 2007, 05:49:33 am
Quote from: codie
So code in this thread or code from agentsmith should be good to go
Yeah well, I wouldn't trust any code of mine further than I can throw it... but at least I finally figured out what I was doing wrong in my first attempt to run this mod with 1.6. What happened was that I included the script on the home page, and not on a subpage or article within another category than "home", which means that when doing so I needed to set $dirPath to empty instead of a specific folder name which I was doing previously
Quote from: like this
// Set to the directory that contains galleries
$dirPath = '' . ( ($galleryDir !== '') ? ($galleryDir . '/') : '' ) ; /*the quote marks after $dirPath are two single quotes, not one double quote.*/
... only took me about 10 hrs to figure that gem out... :o

Anyway, the mod is working perfectly with 1.6 -- renewed thanks, codetwist!
Title: Simple PHP gallery
Post by: codetwist on June 01, 2007, 03:31:40 pm
Great, it had to be something like that - those configuration bugs are sometimes hard to spot :)
Title: Simple PHP gallery
Post by: Patric Ahlqvist on June 02, 2007, 09:20:34 am
Quote from: piXelatedEmpire
Quote from: Patric
... I'm quite satisfied with ZP, but an snews gallery is prefered of course...
I have been using ZP, but the development is slow over there, and aslo I think it has too many features that I just wont use.  A nice simple sNews specific gallery is what I'm talking about.
Agree's. Development is slow, support is crap, and ZP is just to darn big... The only features I would propose is the one's spoken of earlier... A thumbview in gallery, thumbs goes bigger onClick (to a determind size) and if you decide to click it once more it goes out of site, and show's original image... Comments on images, would use the same comments funtion as snews if possible...
Title: Simple PHP gallery
Post by: piXelatedEmpire on June 09, 2007, 05:52:04 am
ok, so I finally got around to testing this script.. and so far I'm liking it :)

Question 1 : using thumbnail images
Currently I have my directories set up in this manner:
Code: [Select]
root directory (contains all snews files and gallery.php)
-photos
--gallery1 (full size images here)
---thumbs (thumbnail images here)
and my config looks like this in gallery.php:
Code: [Select]
$imageDir     = 'photos/'; // Set to the directory that contains galleries
$galleryDir   = 'gallery1/';        // Set to the subdirectory that contains specific gallery
...
$useThumbs     = true;    // Expect to find thumbnails in $galleryDir
$thumbsDir    = 'thumbs/'; // Thumbnails subdirectory name if any
Now, if I'm reading the script correctly, the thumbnail images from 'thumbs' directory should be shown.
Code: [Select]
if ($useThumbs) {
   $dirPathThumbs = $dirPath . $thumbsDir;
...
where
$dirPath = $imageDir . $galleryDir;
which translates to:
$dirPathThumbs = 'photos/' . 'gallery1/' . 'thumbs/'
or more specifically
photos/gallery1/thumbs/

However, it appears the actual images within 'gallery1' are displayed instead of the files from within 'thumbs'.
Have I missed something?  How do I have the thumbnails displayed?

Second question : thumbs act as link to larger image
I would like the thumbnails to act as links so when clicked on, the larger version of the image is displayed.  How could this be achieved?  I'm thinking something along the lines of creating thumbnail images with a 'th_' prefix, ie 'th_image1' and when clicked this would display the larger image 'image1'.

So, to achieve this I'm thinking maybe I need to create a $thumbPrefix variable = 'th_',  Then my thought is that when thumbnail 'thu_image1.jpg' is clicked, the prefix is dropped and 'image1.jpg' is loaded.

Only problem is I'm not sure how to achieve this.
Title: Simple PHP gallery
Post by: Fred K on June 09, 2007, 07:39:21 am
Quote from: piXiE
However, it appears the actual images within 'gallery1' are displayed instead of the files from within 'thumbs'. Have I missed something?  How do I have the thumbnails displayed?
Yeah, in the version I'm using, thumbs dir needs to go in the same location as images.
With your setup, I would simply move the thumbs folder one step up, like so:
Quote
· root directory
·· Photos
··· Gallery 1 [ full images + thumbs folder]
··· Gallery 2 [ full images + thumbs folder]
··· excettera
Second question (again in the version I'm running):
Find this bit:
Quote
$viewLink = '<a href="'.$dirPath.$entryName.'" title="Larger view">';
      
         if ( is_image_extension( $fileInfo["extension"] ) ) {
            ++$i;
            $strOutput .= '<div class="someclass">'.$viewLink.'<img class="'.$imgClass.'" src="'.$dirPath.$entryName.'" alt="'.$entry.'" /></a>'."\n".'<p><a href="'.db('website').$entry.'/" title="'.$entry.'">Gallery</a></p>'."\n".'</div>' . chr(10);

            if( ($lineSize > 0) && !($i % $lineSize) ) {
               $strOutput .= '<br/>';
(Please note that this code has been modified from the original to fit my needs.) The part you're after is highlighted -- specifically $viewLink. What you must do is name the thumbnail and full image exactly the same -- hence the need for a 'thumbs' folder. If your full image is "mypic.jpg", then the thumbnail must also be named "mypic.jpg" but live in the thumbs folder. You can also extend $viewLink if you want to use a Light-, Grey- or Thickbox to display the larger view (see my templates showcase for a visual example) by adding either a class="thickbox" to the anchor string or a rel="Greybox" (or how the **** Grey/Lightbox now functions, but I think they use a rel statement in the anchor).

To summarize: It's simple. :)
Title: Simple PHP gallery
Post by: piXelatedEmpire on June 09, 2007, 07:48:34 am
Quote from: agentsmith
Yeah, in the version I'm using, thumbs dir needs to go in the same location as images.
With your setup, I would simply move the thumbs folder one step up, like so:
Quote
· root directory
·· Photos
··· Gallery 1 [ full images + thumbs folder]
··· Gallery 2 [ full images + thumbs folder]
··· excettera
Sorry, I obviously didn't make that very clear.  This is exactly how my directories are set up, yet the full images are loaded, resized and displayed and not the thumbnails!

Is there something incorrect in my config:
Code: [Select]
$imageDir     = 'photos/'; // Set to the directory that contains galleries
$galleryDir   = 'gallery1/'; // Set to the subdirectory that contains specific gallery
$useThumbs     = true;    // Expect to find thumbnails in $galleryDir
$thumbsDir    = 'thumbs/'; // Thumbnails subdirectory name if any
Title: Simple PHP gallery
Post by: piXelatedEmpire on June 09, 2007, 09:41:25 am
ok, so I've butchered codie's original script somewhat, and it's almost doing what I'd like it to :)
Here is the script as it stands at the moment:
Quote
<?php
$imageDir = 'photos/'; // Set to the directory that contains galleries
$galleryDir = 'gallery1/'; // Set to the subdirectory that contains specific gallery

$useThumbs = true; // Expect to find thumbnails in $galleryDir
$thumbsDir = 'thumbs/'; // Thumbnails subdirectory name if any

$useTitle = true; // If set to true then $galleryTitle will be shown as <h3>
$galleryTitle = 'Whatever this gallery title is';

$galleryBodyId = 'snewsGalleryBody';
$galleryBodyClass = 'snewsGallery';

$dirPath = $imageDir.$galleryDir;

if ($useTitle && ($galleryTitle !== '')) {
   echo "<h3>$galleryTitle</h3>".chr(10);
}

// Process main
if ($useThumbs) {
   $dirPathThumbs = $dirPath.$thumbsDir;
   show_gallery($dirPath, $galleryBodyId, $galleryBodyClass);
}
else {
   show_gallery($dirPath, $galleryBodyId, $galleryBodyClass);
}

function get_gallery($dirPath, $blockId = '', $blockClass = '') {
   $dirObj = dir($dirPath);
   $i = 0;
   $strOutput = "";
   $strBlockId = ($blockId !== '') ? " id=\"$blockId\" " : "";
   $strBlockClass = ($blockClass !== '') ? " class=\"$blockClass\" " : "";
   while (false !== ($entryName = $dirObj->read())) {
     $viewLink = '<a href="'.$dirPath.$entryName.'" title="Click for a bigger image">';
      if (is_file(($fileName = $dirPath.$entryName))) {
         $fileInfo = pathinfo($fileName);
         if (is_image_extension( $fileInfo["extension"] ) ) {
            ++$i;
            //$arrSizeAttr = get_image_dimensions( $fileName, $refSize );
            $strOutput .= get_item_markup( $fileName, $arrSizeAttr['width'], $arrSizeAttr['height']) . chr(10);
         $strOutput .= $viewLink.'<img class="'.$imgClass.'" src="'.$fileName.'" alt="Click for bigger image" /></a>'. chr(10);
         }
      }
   } // End while
   if ($i > 0) {
      $strOutput = "<ul$strBlockClass>$strOutput</ul>";
      $strOutput = "<div$strBlockId>$strOutput</div>";;
   }
   $dirObj->close();
   return $strOutput;
}

function show_gallery($dirPath, $blockId = '', $blockClass = '') {
   if ($strGallery = get_gallery($dirPath, $blockId, $blockClass)) {
      echo $strGallery;
   }
}

function is_image_extension($strExtension = '') {
   if (($strExtension > '') && in_array($strExtension, array( 'gif', 'png', 'jpeg', 'jpg' )))
      return true;
   return false;
}

function get_image_dimensions($imgFile, $refSize = 85, $refPadding = 0) {
   $arrResult = array();
   $arrResult["size"] = " width=\"$refSize\" height=\"$refSize\" ";
   $arrResult["width"] = $refSize;
   $arrResult["height"] = $refSize;
   if ($imgSizeInfo = getimagesize($imgFile)) {
      $width  = $imgSizeInfo[0];
      $height = $imgSizeInfo[1];
      if ($width>0 && $height>0) {
         // Proceed with calculation
         if ($width > $height) {
            $height = (integer) Round ((1.0 * $height * $refSize) / (1.0*$width), 0);
            $width = $refSize;
            $arrResult["size"] = " width=\"$width\" height=\"$height\" ";
            $arrResult["width"] = $width;
            $arrResult["height"] = $height;
         }
         else if ($width < $height) {
            $width = (integer) Round ((1.0 * $width * $refSize) / (1.0*$height), 0);
            $height = $refSize;
            $arrResult["size"] = " width=\"$width\" height=\"$height\" ";
            $arrResult["width"] = $width;
            $arrResult["height"] = $height;
         }
      }
   }
   return $arrResult;
}

// Used to calculate top margin pull value
function get_top_margin($height, $padding, $border) {
   $intResult = (integer) Round(($height + 2*$padding + 2*$border)/2, 0);
   return $intResult;
}

// Provides full <li>...</li> element markup
function get_item_markup($imageFile, $linkTitle = "Click for a bigger image", $width = 85, $height = 85, $imageAlt = '') {
   $strTopMargin = get_top_margin($height, 3, 1); // Calculates positioning for each image
   $strResult = '<li>';
   //$strResult .= '<div> </div>'; // Provides for uniform background rectangle
   $strResult .= "<a href=\"#nogo\" title=\"$linkTitle\" style=\"margin-top:-$strTopMargin"."px; height:" . ($height+1) . "px;\" >";
   $strResult .= "<img src=\"$imageFile\" width=\"$width\" height=\"$height\" alt=\"$imageAlt\" />";
   $strResult .= '</a>';
   $strResult .= '</li>';
   return $strResult;
}
?>
NOTE:  I have removed all references to the intro image as I have no need for this.

Now, for my questions.
Thumbnail issue as described in above post is still an issue :/

Second, this is the code produced by the above script:
Code: [Select]
<h2>test gallery</h2><h3>Whatever this gallery title is</h3>
<div id="snewsGalleryBody">
  <ul class="snewsGallery">
    <li><a href="#nogo" title="" style="margin-top:-47px; height:86px;"><img src="photos/gallery1/3.gif" width="" height="85" alt="" /></a></li>
    <a href="photos/gallery1/3.gif" title="Click for a bigger image"><img class="" src="photos/gallery1/3.gif" alt="Click for bigger image" /></a>
    <li><a href="#nogo" title="" style="margin-top:-47px; height:86px;" ><img src="photos/gallery1/1.gif" width="" height="85" alt="" /></a></li>
    <a href="photos/gallery1/1.gif" title="Click for a bigger image"><img class="" src="photos/gallery1/1.gif" alt="Click for bigger image" /></a>
    <li><a href="#nogo" title="" style="margin-top:-47px; height:86px;" ><img src="photos/gallery1/2.gif" width="" height="85" alt="" /></a></li>
    <a href="photos/gallery1/2.gif" title="Click for a bigger image"><img class="" src="photos/gallery1/2.gif" alt="Click for bigger image" /></a>
  </ul></div>
As you can see from the above, the <a href> is repeated, one inside the <li> and one outside.  Now I know why this is happening, (I have highlighted the code in blue in the first quote that causes this) but I can't work out how to stop this from happening without screwing things up.  Little help please :)

FINALLY, now the smaller images work as links to the image, as noted <img src="photos/gallery1/1.gif", however this obviously opens up outside of sNews.  I would like for this image to open up within the exisiting page/article in sNews.
Title: Simple PHP gallery
Post by: codetwist on June 09, 2007, 11:47:44 am
This code:
Code: [Select]
// Process main
if ($useThumbs) {
   $dirPathThumbs = $dirPath.$thumbsDir;
   show_gallery($dirPath, $galleryBodyId, $galleryBodyClass);
}
else {
   show_gallery($dirPath, $galleryBodyId, $galleryBodyClass);
}
for now ensures that always is used only $dirPath even if You set $useThumbs to true.

You will have to change  something ;)

Like add another parameter to gallery functions that could be used to pass $dirPathThumbs to script as well. Then in functions You will use this for source of thumbs images and gallery directory itself only for large images in link href ;)
Title: Simple PHP gallery
Post by: codetwist on June 09, 2007, 11:51:34 am
And these two lines are basically doing almost the same thing twice:
Code: [Select]
           $strOutput .= get_item_markup( $fileName, $arrSizeAttr['width'], $arrSizeAttr['height']) . chr(10);
            $strOutput .= $viewLink.'<img class="'.$imgClass.'" src="'.$fileName.'" alt="Click for bigger image" /></a>'. chr(10);
That's the reason why every image is like repeated ;)
Title: Simple PHP gallery
Post by: piXelatedEmpire on June 19, 2007, 08:22:36 am
Quote from: codetwist
This code:
Code: [Select]
// Process main
if ($useThumbs) {
   $dirPathThumbs = $dirPath.$thumbsDir;
   show_gallery($dirPath, $galleryBodyId, $galleryBodyClass);
}
else {
   show_gallery($dirPath, $galleryBodyId, $galleryBodyClass);
}
for now ensures that always is used only $dirPath even if You set $useThumbs to true.

You will have to change  something ;)

Like add another parameter to gallery functions that could be used to pass $dirPathThumbs to script as well. Then in functions You will use this for source of thumbs images and gallery directory itself only for large images in link href ;)
Ok.  So I understand what I need to do (kind of), but I'm not even sure where to begin.  Care to give me a gentle nudge (or even better a mighty shove!) in the right direction Mr Twist?
Title: Simple PHP gallery
Post by: centered on June 19, 2007, 12:43:32 pm
Pixel,

Uncomment these lines and see what happens:

$viewLink = '<a href="'.$dirPath.$entryName.'" title="Click for a bigger image">';

$strOutput .= $viewLink.'<img class="'.$imgClass.'" src="'.$fileName.'" alt="Click for bigger image" /></a>'. chr(10);

I think that is what is causing the duplicate entries


BTW - I tried the original script w/o thumbs and it works as is should.  

Anyway of implementing this into the snews backend? for 1.4 or 1.6?  I have a concept, but not sure how it would work...

Also what about multiple galleries?  Would you just call the include on the different folders? (dumb question)

Last question, can the script work like how default, zenphoto works?  Main picture, then gallery, then bigger selected image?

This is a great script so far
Title: Simple PHP gallery
Post by: centered on June 19, 2007, 01:06:51 pm
Just a though while browsing sitepoint....

Htey have a tutorial here: http://www.sitepoint.com/article/php-gallery-system-minutes which utilizes GD to make the thumbnails, can that be added as an option for the script?

Automatic Thumbnails
Quote
Automatic Thumbnails

Now comes the most interesting part: building the automatic thumbnails. To build these thumbnails we require an image manipulation program, e.g. the Graphics Development (GD) Library, ImageMagick or NetPbm, all of which are available online for free.

Before we can build a thumbnail, we need to determine the dimensions of the image. To ensure we create proportionate thumbnails, we classify all images into two major categories:

   1. Wide Image, where the width is greater than the height
   2. Tall Image, where the height is greater than the width

Now we need to find out whether the uploaded image is Wide one or Tall. For that, we use the GetImageSize function to fetch the dimensions of the uploaded image and, using those vales, we decide the appropriate size of the thumbnail:

$size = GetImageSize($images_dir . "/" . $filename);

// Wide Image
if($size[0] > $size[1])
{  
$thumbnail_width = 100;  
$thumbnail_height = (int)(100 * $size[1] / $size[0]);  
}  

// Tall Image
else
{
 $thumbnail_width = (int)(100 * $size[0] / $size[1]);
 $thumbnail_height = 100;
}

Here we calculate the size for the thumbnail using the aspect ratio of the dimensions of the original image. I have preset the thumbnail size to 100 pixels wide or tall, depending on the size of the original image.

The formulae used to calculate the aspect ratios are as follows.

For Wide Images:

$thumbnail_width =  
$thumbnail_height = * /  
                 

For Tall images:

$thumbnail_width = * /
                       
$thumbnail_height =
Using GD
Quote
The Graphics Development Library or GD Library also provides us with the ability to create and modify images. It supports JPEG, BMP and PNG in its standard form; though some versions of GD also support GIF and TIFF. The latest versions of the GD Library can be downloaded from www.Boutell.com/gd [11].

PHP provides us with GD-specific functions for creating and modifying particular types of the images. Therefore, before creating thumbnails for the uploaded images we need to find out exactly which functions are to be used.

To produce these thumbnails, we need to:

   1. Create an image handle to read the uploaded image
   2. Create another image handle that will be used to create the Thumbnail
   3. Resize the original image via its handle
   4. Save the resized image with the Thumbnail handle

The functions required in Steps 1 and 4 are image type-dependent and their naming convention is such that they can easily be recognized, e.g. ImageJPEG, ImageGIF. The suffix in each function name corresponds to the type of image the function can handle. The following array lists the suffix we’ll use to call these specific functions:

$gd_function_suffix = array(  
 'image/pjpeg' => 'JPEG',
 'image/jpeg' => 'JPEG',
 'image/gif' => 'GIF',
 'image/bmp' => 'WBMP',
 'image/x-png' => 'PNG'
);

In order to call ImageJPEG, we’ll create its name dynamically before calling it:

// Get the Name Suffix on basis of the mime type
$function_suffix = $gd_function_suffix[$filetype];

// Build Function name for ImageCreateFromSUFFIX
$function_to_read = 'ImageCreateFrom' . $function_suffix;

// Build Function name for ImageSUFFIX
$function_to_write = 'Image' . $function_suffix;

The above code will assign the variable the following values in the case of a JPEG file being uploaded:

    * $function_to_read => ImageCreateFromJPEG
    * $function_to_write => ImageJPEG

Version 1.x.x

Version 1.x.x has its limitations; it can only create new images in, at most, 256 colors. Therefore, while putting together the code snippets given above, we will use GD 1.x.x-specific resizing functions. The functions are:

    * ImageCreate
    * ImageCopyResized

Resizing with GD 1.x.x

$function_suffix = $gd_function_suffix[$filetype];
$function_to_read = 'ImageCreateFrom' . $function_suffix;
$function_to_write = 'Image' . $function_suffix;

// Read the source file
$source_handle = $function_to_read($images_dir . '/' . $filename );  
       
if ($source_handle) {
 // Let's create a blank image for the thumbnail
 $destination_handle = ImageCreate($thumbnail_width, $thumbnail_height);

 // Now we resize it
 ImageCopyResized($destination_handle, $source_handle,
   0, 0, 0, 0, $thumbnail_width, $thumbnail_height,
   $size[0], $size[1]);
}

// Let's save the thumbnail

$function_to_write($destination_handle, $images_dir . '/tb_' . $filename);
ImageDestroy($destination_handle);

The most interesting aspect to note in the above code is how the image is resized using ImageCopyResized function. This function requires 10 arguments; let me list them one by one:

    * $destination_handle holds the information regarding the blank image we created equivalent to the size of the thumbnail.
    * $source_handle holds information relating to the source file, which was the originally uploaded image.
    * Arguments 3 to 6 hold the starting coordinates from which the image should be resized. Because we require a thumbnail, and a thumbnail is just a smaller version of a full-sized image, we use 0,0 as our starting coordinates.
    * Arguments 7 and 8 hold the destination image dimensions, i.e. the dimensions of the thumbnail in our case.
    * Arguments 9 and 10 hold the source image dimensions, which in our case are the dimensions of the original image.

Version 2.x.x

Version 2.x.x isn’t restricted to using 256 colors, but the procedure employed is not very different from the one described for version 1.x.x code. Only here, we have to use GD 2.x.x specific resizing functions instead. These functions are:

    * ImageCreateTrueColor
    * ImageCopyResampled

Resizing with GD 2.x.x

$function_suffix = $gd_function_suffix[$filetype];
$function_to_read = 'ImageCreateFrom' . $function_suffix;
$function_to_write = 'Image' . $function_suffix;

// Read the source file
$source_handle = $function_to_read($images_dir . '/' . $filename);
       
if ($source_handle) {
 // Let's create a blank image for the thumbnail
 $destination_handle =
   ImageCreateTrueColor($thumbnail_width, $thumbnail_height);

 // Now we resize it
 ImageCopyResampled($destination_handle, $source_handle,
   0, 0, 0, 0, $thumbnail_width, $thumbnail_height, $size[0], $size[1]);
}

// Let's save the thumbnail
$function_to_write($destination_handle, $images_dir . '/tb_' . $filename);

Everything remains the same as with the version 1.x.x code, except for the two different functions used:

    * in place of ImageCreate, we used ImageCreateTrueColor.
    * in place of ImageCopyResized, we used ImageCopyResampled.

You can read more about GD functions in the PHP manual at www.php.net/gd [12].

Now, putting it all together will yield you upload.php. The file is part of the archive you can download here [13].
Title: Simple PHP gallery
Post by: Patric Ahlqvist on June 19, 2007, 01:09:29 pm
Quote from: centered
...
Also what about multiple galleries?  Would you just call the include on the different folders? (dumb question)

Last question, can the script work like how default, zenphoto works?  Main picture, then gallery, then bigger selected image?

This is a great script so far...
Agree's on every Q and point here.. ;)
Title: Simple PHP gallery
Post by: codetwist on June 19, 2007, 01:45:54 pm
Quote from: piXelatedEmpire
Quote from: codetwist
This code:
Code: [Select]
// Process main
if ($useThumbs) {
   $dirPathThumbs = $dirPath.$thumbsDir;
   show_gallery($dirPath, $galleryBodyId, $galleryBodyClass);
}
else {
   show_gallery($dirPath, $galleryBodyId, $galleryBodyClass);
}
for now ensures that always is used only $dirPath even if You set $useThumbs to true.

You will have to change  something ;)

Like add another parameter to gallery functions that could be used to pass $dirPathThumbs to script as well. Then in functions You will use this for source of thumbs images and gallery directory itself only for large images in link href ;)
Ok.  So I understand what I need to do (kind of), but I'm not even sure where to begin.  Care to give me a gentle nudge (or even better a mighty shove!) in the right direction Mr Twist?
There is some WIP stuff related to issue, but I've no time to look into this right now ;)
In a few words - I'm going to pass both paths to show_gallery() function - for main images as well as for thumbnails. Then it's possible to use one for thumbnail display and another one for large image.
Title: Simple PHP gallery
Post by: centered on June 19, 2007, 01:49:26 pm
Thanks Patric,

I would assume that every gallery would have the same function, add the inlcude for each subfolder of galleries, but there is no breadcrumb to link back.

My idea, and possible answer my second question is

1. Utilize the file uploader for creating and uploading the galleries
2. write part of the script within snews, and create a bread crumb function specifically for the gallery
3.  Have the user create the config for each folder:
Code: [Select]
$imageDir     = 'usrimg/'; // Set to the directory that contains galleries
$galleryDir   = '';        // Set to the subdirectory that contains specific gallery

$useTitle     = true;      // If set to true then $galleryTitle will be shown as <h3>
$galleryTitle = 'Whatever this gallery title is';

$useIntroImage = true;     // If set to true then possible to have differently formatted intro image
$introImage    = '*.*';    // Use to set to specific file name

$useThumbs     = false;    // Expect to find thumbnails in $galleryDir
$thumbsDir    = 'thumbs/'; // Thumbnails subdirectory name if any

$galleryIntroId    = 'snewsGalleryIntro';
$galleryIntroClass = 'snewsGallery';

$galleryBodyId     = 'snewsGalleryBody';
$galleryBodyClass  = 'snewsGallery';

$dirPath = $imageDir . $galleryDir;
4. have snews pull the folders and create the gallery
Title: Simple PHP gallery
Post by: codetwist on June 19, 2007, 01:50:32 pm
@centered : Automatic thumbnails are off scope for me as kind of extra whistle for now ;) As for multiple galleries - basically [include]s of gallery script; however, some parameter passing to it should be ensured one way or another. Another WIP stuff and again not right now ;)
Title: Simple PHP gallery
Post by: centered on June 19, 2007, 01:52:37 pm
Maybe I will try and take a stab at it...

hopefully.

Most of the work is already in place anyway so, I would think it would be a matter of combining everythign together
Title: Simple PHP gallery
Post by: piXelatedEmpire on June 20, 2007, 01:52:22 am
Quote from: codetwist
There is some WIP stuff related to issue, but I've no time to look into this right now ;)
In a few words - I'm going to pass both paths to show_gallery() function - for main images as well as for thumbnails. Then it's possible to use one for thumbnail display and another one for large image.
Awesome this is exactly what I'm looking for.  I'll wait patiently ;)
I agree with the automatic thumbnail creation, at this stage not a priority, but may make a nice addition further along in the development of this script.
Title: Simple PHP gallery
Post by: centered on June 21, 2007, 08:10:13 am
Quote from: centered
Maybe I will try and take a stab at it...

hopefully.

Most of the work is already in place anyway so, I would think it would be a matter of combining everythign together
hahah boy was I wrong....

My concept sounds good but the execution... wayyy off haha not even a clue!!