Code: Kleine Bildergallerie in PHP

C

cuda

Guest
Hallo Leute,

da ich mal wieder nichts zu tun hatte, habe ich etwas programmiert. Diesmal in PHP, und zwar eine kleine Bildergallery.

Die Idee: Ich wollte auf meiner Page eine Bildergallery haben, und zwar ohne Schickschnack, eine ganz einfache. Dabei habe ich es mir so vergestellt, dass ich meine Bilder einfach in einen Verzeichnis reinschmeisse und ein PHP-Script baut mir daraus eine Übersicht in einer 3-Spaltigen Tabelle.

Dabei soll egal sein, wie die Bilder heissen, sprich alles muss dynamisch sein.

Gesagt - getan. Und da ich ein netter Kerl bin, stelle ich Euch den Code zur Verfügung. Beim Script handelt es sich um einen Entwurf, der noch verbessert bzw. erweitert wird.

Code:
    <html>
    <head>
    <title>Bildergallery</title>
    </head>
    
    <body>
    
    <?php
    echo "<br>";
    echo "<hr>";
    echo "<h2><center>Willkommen in meiner Bildergallery</center></h2>";
    echo "<hr>";
    $path = "./"; // in welchen Verzeichnis sollen die Bilder gesucht werden (./ heisst im Aktuellen)
    $handle = opendir($path);
    $pic_counter = 0;
    
    // Array der Bilder erstellen, und in $pic_array schreiben;
    while ($res = readdir($handle))
     {
    	if (is_dir($res))
    	 {}
    	 else
    	 {
    		 $extension = explode(".", $res);
    	if (strtolower($extension[1]) =="jpg" || strtolower($extension[1]) =="jpeg")
    	 {
    	  // echo $res."<br>\n"; //aktueller Dateiname, der ins Array geschrieben wird.
    	  $pic_array[$pic_counter] = $res;
    	  $pic_counter++;
    	 }	
    	 }
     }
    closedir($handle);
    
    // echo $pic_counter; // Anzahl der Bilder
    // Berechnung der Anzahl der Zeilen in der Tabelle für die Ausgabe;
    // dabei wird das Ergebnis der Teilung aufgerundet (ceil);
    
    $row_nummber = ceil ($pic_counter/3);
    // echo $row_nummber;
    
    // Groesse der Bilder;
    $width="256"; // Breite des Bilder in der Tabelle
    $height="192"; // Höhe des Bilder in der Tabelle
    $nummber=0;
    // Ausgabe der Bilder
    echo "<center><table border=1>";
    
    for ($row=0; $row<$row_nummber; $row++)
    {
     echo "<tr>";
     if ($pic_array[$nummber] !="")
      {
       echo "<td>"."<img src= $pic_array[$nummber] width= $width height= $height>"."</td>";
       $nummber++;
      }
      else
       {
    	echo "<td>"." "."</td>";
       }
      
      if ($pic_array[$nummber] !="")
      {
       echo "<td>"."<img src= $pic_array[$nummber] width= $width height= $height>"."</td>";
       $nummber++;
      }
      else
       {
    	echo "<td>"." "."</td>";
       }
    
     if ($pic_array[$nummber] !="")
      {
       echo "<td>"."<img src= $pic_array[$nummber] width= $width height= $height>"."</td>";
       $nummber++;
      }
      else
       {
    	echo "<td>"." "."</td>";
       }
      echo "</tr>";
    }
    
    echo "</table></center>";
    
    ?>
    </body>
    </html>

Man kann den Script einfach in eine PHP-Datei packen und auf den Webspace hochladen.
Zu beachten: die Bilder müssen sich im gleichen Verzeichnis wie Script befinden, die Unterordner werden (noch) nicht unterstützt (aber ich arbeite daran). Dann sollten die Bilder möglichst die gleiche Grösse (Pixel) haben.

Noch vielleicht ein paar Vorschläge für die Weiterentwicklung.

Script in Aktion könntet Ihr HIER anschauen.

'cuda
 
Zuletzt bearbeitet:
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
ich find es immer bisl problematisch PHP und HTML code zu vermischen, aber bei einem script dieser größe vollkommen egal ;)

und ich würde es mit zwei verschachtelten fors lösen

PHP:
for ($row=0; $row<$row_nummber; $row++)
    {
     echo "<tr>";
      for($col = 0; $col < 3; $col++)
      {
         if (isset($pic_array[$nummber]))
         {
           echo "<td><img src=\"" . $pic_array[$nummber] . "\" width=\"".  $width. "\" height=\"" . $height . "\"></td>";
           $nummber++;
         }
         else
        {
    	  echo "<td>"." "."</td>";
        }

      echo "</tr>";
    }
    
    echo "</table></center>";

spart etwas redundanten code
 
Zuletzt bearbeitet:
@burni:
Woher kannst du eigentlich so gut php / mySQL?
 
gotu schrieb:
@burni:
Woher kannst du eigentlich so gut php / mySQL?
mach privat seit knapp 99 php, 2001 kam in der ausbildung dann noch mysql dazu... naja, hab einfach (ohne arrogant klingen zu wollen) wirklich viel erfahrung damit... seit 3 jahren täglich 8h den kram, da kommt was bei rum ;)

und noch ne kleine änderung

PHP:
while ($res = readdir($handle))
{
   if (!is_dir($res))
   {
      if(preg_match("/\.jpg$|\.gif$|\.jpeg$/i", $entry))
      {
    	  // echo $res."<br>\n"; //aktueller Dateiname, der ins Array geschrieben wird.
    	  $pic_array[$pic_counter] = $res;
    	  $pic_counter++;
      }
    }
}

wobei man sich durch das preg_match theoretisch auch das is_dir() sparen kann, zusätzliche "sicherheit" schadet aber nie

edit2:

PHP:
<?php 

  echo "<center>";
  echo "<br>";
  $dir = dir(".");
  while($entry = $dir->read()) 
  { 
    if(preg_match("/\.jpg$|\.gif$|\.jpeg$/i", $entry))
	{
      $bilder[] = $entry;	  
	}
  }
  $dir->close();

  sort($bilder);
  for($i = 0; $i <= count($bilder) - 1; $i++)
  {
    echo "<img src=\"" . $bilder[$i] . "\">";
  }
  echo "</center>";
  
?>
meine "aktuelle" bildergallery, zeigt einfach nur alle an, aber ich denke ich werde auf die von 'cuda umsteigen :)

PHP:
function getImgInfo($img)
{
    $file = explode("/", $img);
    $imgName = $file[(count($file) - 1)];
    $type[0] = "unknown";
    $type[1] = "image/gif";
    $type[2] = "image/jpeg";
    $type[3] = "image/png";
    $type[4] = "images/swf";    
    
    $imgData       = getimagesize($img);
    
    $imgArr["name"]   = $imgName;  
    $imgArr["path"]   = str_replace($imgArr["name"], "", $img);  
    $imgArr["size"]   = ceil(filesize($img) / 1024);  
    $imgArr["width"]  = $imgData[0];
    $imgArr["height"] = $imgData[1];
    $imgArr["mime"]   = $type[$imgData[2]];
    $imgArr["code"]   = $imgData[3]; 
    
    return $imgArr; 
}

$image = "" // pfad zum bild

$imgInfo   = getImgInfo($image);
$imgHandle = ImageCreateFromJPEG($image);

if($img["width"] > $img["height"])
{
    $width = 128;
    
    $ww = $img["width"] / $width;
    $height = floor($img["height"] / $ww);
}
elseif($img["width"] < $img["height"])    
{
    $height = 96;
    
    $hh = $img["height"] / $height;        
    $width = floor($img["width"] / $hh);

}    
else
{
    $width  = 96;
    $height = 96;         
}   

$imgHandle2 = imagecreatetruecolor ($width, $height);    

imagecopyresized ($imgHandle2, $imgHandle, 0, 0, 0, 0, $width, $height, $img["width"], $img["height"]);
imagejpeg($imgHandle2, "thumb_" . $imgArr["name"]);
imagedestroy($imgHandle2);
imagedestroy($imgHandle);
und gleich richtige thumbs von jpegs erstellen, der resizer hat allerdings ne kleine macke, kp warum... vielleicht schaut sich das mal jemand mit grösserem algorithmischen verständniss als wie ich an :fresse:
 
Zuletzt bearbeitet:
Holla Burn,

den Resizer werde ich auch noch mal kurz schreiben. Habe da so meine Pläne/Ideen.

Weiss aber nicht, wann ich dazu komme.

'cuda
 
bin ich gespannt, wie gesagt, ich krieg nix brauchbares hin :(
 
Wie stellst Du Dir denn den Resizer vor? Was soll er tun können?

'cuda
 
einfach nur thumbs erzeugen... also es geht, aber wirklich sauber er läuft er nur wenn die bilder "normale" 4:3 abmessungen haben
 
Nette Gallery @cuda

Gibt es auch eine Möglichkeit die Bilder in voller größe anzuzeigen wenn man auf eins klickt?
 
klar, einfach nen link...

PHP:
         if (isset($pic_array[$nummber]))
         {
           echo "<td><a href=\"$pic_array[$nummber]\" target="blank"><img src=\"" . $pic_array[$nummber] . "\" width=\"".  $width. "\" height=\"" . $height . "\"></a></td>";
           $nummber++;
         }
         else
        {
          echo "<td>"." "."</td>";
        }

bezieht sich aber auf meine "getunte" version ;)
 
Könntest du den ganzen Code nochmal posten? Wäre sehr nett! :)
Kenne mich nicht so gut mit PHP aus und ich weiss nicht wo ich den Code ran "packen" muss.
 
@XCycle:

Ich habe meinen Script etwas aufgemotzt.
Hier die Liste, von dem, was verändert wurde:


  • die Bilder werden sortiert ausgegeben (braucht man zwar nicht, aber egal)
  • Bildername wird mitausgegeben
  • die Eigenschaften der Bilder werden angezeigt (Höhe, Breite)
  • die Tabelle wird dynamisch erstellt (man kann im Script die Anzahl der Spalten festlegen, oder an den Script als Parameter übergeben)
  • beim Klick auf "Vorschaubild" wird das Bild in voller Grösse angezeigt
  • Bildformate: GIF, PNG, JPG (JPEG)
  • Glaube das war's.
An was noch gearbeitet wird:

  • anständige Vorschau (mit extra Thumbs)
  • dass die Unterverzeichnisse mitgenommen werden
Noch Vorschläge, was man so einbauen könnte?

Und hier ist der Code, wie immer Copy & Paste und es tut.

Code:
  <html>
  <head>
  <title>Meine Bildergallery</ttle>
  </head>
  <body>
  <?php
  echo "<h2><center>Willkommen in meiner Bildergallery</center></h2>";
  echo "<hr><br>";
  $path="./";
  $handle= opendir($path);
  $pic_counter = 0;
  $width="300";
  $height="225";
  
  $col_num=3; // Anzahl der Spalten in der Tabelle
  
  while ($res=readdir($handle))
  {
   if(is_dir($res))
   {
   }	
   else
   {
    if (preg_match("/.gif/",$res) || preg_match("/.jpg/",$res) || preg_match("/.jpeg/",$res) || preg_match("/.png/",$res))
    // if (eregi("jpg", $res))
    {
  	  $pic_array[$pic_counter] = $res;
     $pic_counter++;
    }
   }
  }
  closedir($handle);
  sort($pic_array);
  
  // Anzahl der Zeilen in der Gallery:
  $row_nummber = ceil($pic_counter/$col_num);
  
  $count=0;
  echo "<table border = 0>";
  for ($row=0; $row<$row_nummber; $row++)
  {
   echo "<center><tr>";
  	for ($col=0; $col<$col_num; $col++)
  	{
  	echo "<td align=center>";
  	if ($pic_array[$count] != "")
  	 {
 	 echo "<a href=$pic_array[$count]><img src=$pic_array[$count] width= $width height= $height></a>"."<br>\n";
  	  $properties = GetImageSize($pic_array[$count]);
  	  echo "Bildname:".$pic_array[$count]."<br>\n";
  	  echo "Breite:".$properties[0]."<br>\n";
  	  echo "Hoehe:".$properties[1]."<br>\n";	  
  	  $count++;
  	  echo "</td>";
     }
    else
     {
  	  echo "&nbsp";
     }
  	}
    echo "</tr>";
  }
  echo "</table></center>";
  ?>
  </body>
  </html>

Bei Fragen --> fragen.



Achja, Beispiel hier

'cuda
 
bau doch noch was ein, dass man beim klick auf das große bild wieder zu den verkleinerten zurückkommt :)
 
Dann musst Du diese Zeile:

echo "<a href=$pic_array[$count]><img src=$pic_array[$count] width= $width height= $height></a>"."<br>\n";

mit dieser ersetzen:

echo '<a href="#" onClick="bild.php?bild_name='.$pic_array[$count].'"><img src="'.$pic_array[$count].'" width="'.$width.'" height="'.$height.'" alt="'.$pic_array[$count].'" title="'.$pic_array[$count].'"></a>';

Wie Du siehst, brauchst Du jetzt eine zweite Seite namens "bild.php". Da muss dies drinstehen:

<?
if (file_exists($_GET['bild_name'])) {
<a href="#" onClick="self.close()"><img src...></a>
} else {
echo 'UUUUPS?! Kein Bild übergeben?';
}
?>


Das soll ja scheinbar nur zur Übung dienen. Wenn ihr ne echt gute Galerie haben wollt, kann ich euch Coppermine empfehlen. Ist richtig gut. Erst wollte ich mir auch eine selbst bauen, aber warum nen Monat investieren, wenn es hinterher eh bestenfalls genau wie Coppermine aussieht? ;)


Für verbesserungswürdig halte ich an eurem Script das Resizen der Bilder. Denn auch wenn man die dargestellte Größe reduziert, wird doch das ganze Bild geladen. Macht bei 2048x1536 schnell mal 800kb statt den 10kb eines mit gd2 skalierten Bildes.
Auch die Skalierung auf eine feste Größe finde ich etwas grob. Macht das doch wenigstens proportional zur Originalgröße.
Beispiel:
<?
define('MAX_SIZE', 100);

function scaleIt($bild_name) {
if (is_file($bild_name)) {
$size = getimagesize($bild_name);
$width = $size[0];
$height = $size[1];

if ($width > $height) {
$thumb_w = MAX_SIZE;
$thumb_h = $height / $width;
} else {
$thumb_h = MAX_SIZE;
$thumb_w = $width / $height;
}
$thumbArr[0] = $thumb_w;
$thumbArr[1] = $thumb_h;
$thumbArr[2] = $bild_name;

return $thumbArr;

} else {
return false;
}
}
?>

Besser wäre es mit GD2 und OOP. Dann muss man sich nicht mit doofen Arrays rumärgern.
 
sehr interessant was deine methode zurückgibt...

100
0.888888888889 <- was? px, faktor?
test.png

und wo ändert mir das die grösse, es sagt mir nur wie gross es sein muss... (naja, er sagt mir irgendwas womit ich nix anfangen kann... ich vermute mal den faktor von der grösseren seite, ist aber irgendwie doof...pixelwerte wären schöner)

es würde wohl einfach

$thumb_h = floor(($height / $width) * MAX_SIZE);
bzw.
$thumb_w = floor(($width / $height) * MAX_SIZE);

abhilfe und sinvolle pixelwerte schaffen (oder je nachdem ceil bzw round)
nebenbei, hast du meinen post und meine sourcen gelesen? ich hab schon code zum resizen per gd gepostet. Nur nicht in die gallery eingebunden, weil sowas soll einmal passieren und nicht bei jedem aufruf...

UND: onClick="bild.php?bild_name='.$pic_array[$count].'"

erzeugt im firefox:

Error: syntax error
Source Code:
bild.php?bild_name=
 
Beim ersten hast Du recht. Muss natürlich noch mal hundert und danach runden. Richtig.

Beim zweiten hast Du nix im Querystring? Dann gib dieses $pic_array[$count] doch mal auf der Seite mit echo aus. Müsste da sein - ist doch aus eurem Script! :)

Edit:
UUPS! Hab´s gesehen. Fehlt auch noch was. Ich bin doch echt manchmal ein Pfuscher, sorry. ;(

onClick="window.open(\'bild.php?bild_name='.$pic_array[$count].'\', \'fenstername\')"
 
Zuletzt bearbeitet:
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh