Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Pages: 1 ... 3 4 [5]

Author Topic: Simple PHP gallery  (Read 34961 times)

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
Simple PHP gallery
« Reply #60 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.
« Last Edit: October 03, 2007, 02:05:49 AM by piXelatedEmpire »
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future

codetwist

  • Hero Member
  • *****
  • Karma: 50
  • Posts: 940
Simple PHP gallery
« Reply #61 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 ;)
Logged

codetwist

  • Hero Member
  • *****
  • Karma: 50
  • Posts: 940
Simple PHP gallery
« Reply #62 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 ;)
« Last Edit: January 22, 2008, 09:04:14 PM by Keyrocks »
Logged

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
Simple PHP gallery
« Reply #63 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?
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future

centered

  • Guest
Simple PHP gallery
« Reply #64 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
« Last Edit: January 22, 2008, 09:04:44 PM by Keyrocks »
Logged

centered

  • Guest
Simple PHP gallery
« Reply #65 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 well 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, well 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 isnt 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].
Logged

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4867
  • I'm a self-made man and worships my creator.
    • p-ahlqvist.com
Simple PHP gallery
« Reply #66 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.. ;)
Logged
My sNews site
"It's only dead fish that goes with the flow... "
Updated, online again - Free designs

codetwist

  • Hero Member
  • *****
  • Karma: 50
  • Posts: 940
Simple PHP gallery
« Reply #67 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.
Logged

centered

  • Guest
Simple PHP gallery
« Reply #68 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
« Last Edit: January 22, 2008, 09:05:37 PM by Keyrocks »
Logged

codetwist

  • Hero Member
  • *****
  • Karma: 50
  • Posts: 940
Simple PHP gallery
« Reply #69 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 ;)
Logged

centered

  • Guest
Simple PHP gallery
« Reply #70 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
Logged

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
Simple PHP gallery
« Reply #71 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.
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future

centered

  • Guest
Simple PHP gallery
« Reply #72 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!!
Logged
Pages: 1 ... 3 4 [5]