Erst mal werde ich euch neidisch machen, und dann gibt es eine Bildergalerie:
Da ich im Oktober nach Indien fahre, habe das neue contenido genutzt, um damit meine Indienseite umzusetzen. Zweck dieser Seite ist es den Daheimgebliebenen ein paar Bilder unserer Digitalkamera zu präsentieren und natürlich Reiseberichte zu schreiben. Die Seite ist noch nicht online aber wird bald unter www.indien.72dpiclub.de zu finden sein. Vielleicht buche ich auch noch eine eigene Domain, mal schauen.
Nun aber zu dem Modul der Bildergalerie. Das Modul ist schon ein wenig auf meine Bedürfnisse zugeschnitten, aber vielleicht könnt ihr damit etwas anfangen. Da ich aus Indien nur unkomprimierte Bilder uploaden kann werden bei diesem Modul beide Darstellungen noch einmal komprimiert, Thumbnail und Detail. Einige Konfigurationsdetails habe ich auch noch nicht userfreundlich eingebettet. Für Anpassungen müßt ihr also den Quellcode durchforsten.
Features:
- Erstellt Thumbnails aller Dateien eines contenido Upload Ordners
- Menge der ausgegebene Tabellenspalten wählbar
- Detaildarstellung im PopUp
- optionales Schreiben der Thumbnails und Detailbilder in separates contenido Upload Verzeichnis
- optionales Darstellen der Bildbeschreibung
Voraussetzungen:
- GD ab 1.6
Installation:
1. Folgenden Quellcode als thumbs.php in die oberste Ebene Eures frontend-Verzeichnisse kopieren.
Code: Alles auswählen
<?
session_start();
//$HTTP_SESSION_VARS["allow_thumbs"] = "yes";
if($HTTP_SESSION_VARS["allow_thumbs"] == "yes" && ereg("front_content.php",$_SERVER["HTTP_REFERER"]))
//if($HTTP_SESSION_VARS["allow_thumbs"] == "yes")
{
header ("Content-type: image/jpeg");
// define the small, square image that will be
// used as the thumbnail base
if ($_GET['modus'] == "big") {
$palette_image = 'vorlage-big.jpg';
$suffix = "big";
}else{
$palette_image = 'vorlage.jpg';
$suffix = "thumb";
}
/****** You shouldn't need to edit below here ******/
// Set some defaults values for variables that have not
// been passed to the script through the url
if(!isset($HTTP_GET_VARS['create']))
{$HTTP_GET_VARS['create'] = 'no';}
if(!isset($HTTP_GET_VARS['basepath']))
{$HTTP_GET_VARS['basepath'] = 'upload/bilder/';}
if(!isset($HTTP_GET_VARS['compress']))
{$HTTP_GET_VARS['compress'] = 41;}
// establish where on the thumbnail we can draw to
$thumbsize = getImageSize($palette_image);
$maxdim = $thumbsize[0];
$draw_from = $HTTP_GET_VARS['basepath'].$HTTP_GET_VARS['img_ref'];
$dim = GetImageSize($draw_from);
if($dim[0]>$dim[1])
{
$to_w = $maxdim;
$to_h = round($dim[1]*($maxdim/$dim[0]));
$to_x = 0;
$to_y = round($maxdim-$to_h)/2;
}
else
{
$to_h = $maxdim;
$to_w = round($dim[0]*($maxdim/$dim[1]));
$to_y = 0;
$to_x = round($maxdim-$to_w)/2;
}
// create some base images to start designing from
// and make initial basic thumbnail
if($dim[2]==1) {$from = ImageCreateFromGIF($draw_from);}
elseif($dim[2]==2) {$from = ImageCreateFromJPEG($draw_from);}
elseif($dim[2]==3) {$from = ImageCreateFromPNG($draw_from);}
$thumb = ImageCreateFromJPEG($palette_image);
// $set_bg_colour = ImageColorAllocate($thumb,255,0,0);
// $fill_bg_colour = ImageFill($thumb,0,0,$set_bg_colour);
ImageCopyResized($thumb, $from, $to_x, $to_y, 0,
0, $to_w, $to_h, $dim[0], $dim[1]);
/******* Image Manipulation Scripting *******/
// extra image manipulation can go here
/***** End Image Manipulation Scripting *****/
// output the created thumnbnail onto the calling page
// and, if $create has been set to 'yes', also create
// a copy of the thumbnail on the server
ImageJPEG($thumb,'',$HTTP_GET_VARS['compress']);
if($HTTP_GET_VARS['create'] == "yes")
{
ImageJPEG($thumb,"upload/".$_GET[thumbdir]."/".substr
($HTTP_GET_VARS['img_ref'],0,
strpos($HTTP_GET_VARS['img_ref'],'.')).'_'.$_GET[seldirhandle].'_'.$suffix.'.jpg',
$HTTP_GET_VARS['compress']);
}
// destroy all the temporary images used by the
//server while executing this
//scriptlet (tidying up)
ImageDestroy($from);
ImageDestroy($thumb);
}
?>
- Vorlage für Thumbnails: 95 x 95 Pixel
- Vorlage für Detailbilder: 600 x 600 Pixel
Wenn Ihr andere Größen braucht einfach die Vorlagenbilder ändern und die Abmessungen des PopUps anpassen.
3. Vor der html Ausgabe im Layout müssen folgende Zeilen eingefügt werdem:
Code: Alles auswählen
$allow_thumbs = "yes";
session_register("allow_thumbs");
4. INPUT:
Code: Alles auswählen
?>
<?
/*# # # # # # # Modul 72dpiclub-Bildergalerie INPUT # # # # # # # # #
Autor: Hanta Seewald
Copyright: Hanta Seewald
Created: 07.08.2003
!!! soon www.72dpiclub.de !!!!!
############################################################*/
//////////////// CMS Variablen ///////////////////////////////////////////
$seldir = "CMS_VALUE[0]";//ausgewaehltes Verzeichnis
$td = "CMS_VALUE[1]"; //menge der td's
$writethumb = "CMS_VALUE[2]"; //Thumbnails in Verzeichnis schreiben
$writebig = "CMS_VALUE[3]"; //Mediumbilder in Verzeichniss schreiben
$thumbdir = "CMS_VALUE[4]"; //Name des Verzeichnisses, in die Thumbnails geschrieben werden
$description = "CMS_VALUE[5]"; //Beschreibung der Datei ausgeben
$thumbcompress = "CMS_VALUE[6]"; //Komprimierung der Thumbnails
$bigcompress = "CMS_VALUE[7]"; //Komprimierung der Detailansicht
###########################################################################
$db = new DB_Contenido;
?>
<table cellspacing="0" cellpadding="10">
<tr>
<td class="text">Bildordner wählen:</td>
<td>
<select name="CMS_VAR[0]">
<option value="kein">-- kein --</option>
<?php
//alle vorhandenen verzeichnisse auswaehlen
$query = "SELECT DISTINCT dirname FROM ".$cfg["tab"]["upl"]." ORDER BY dirname ASC";
$db->query($query);
while ($db->next_record()) {
?>
<option value="<?php echo $db->f("dirname") ?>"<?php if ($seldir == $db->f("dirname")) echo " selected" ?>><?php echo $db->f("dirname") ?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td class="text">Anzahl der Tabellenspalten:</td>
<td>
<input type="text" name="CMS_VAR[1]" value="CMS_VALUE[1]">
</td>
</tr>
<tr>
<td class="text" valign="top">Speichern der Dateien:</td>
<td class="text">
<input type="Checkbox" name="CMS_VAR[2]" value="yes"<?php if($writethumb == "yes") echo " checked" ?>> Thumbnails<br>
<input type="Checkbox" name="CMS_VAR[3]" value="yes"<?php if($writebig == "yes") echo " checked" ?>> Detaildarstellung<br>
in folgendes Verzeichniss: <input type="text" name ="CMS_VAR[4]" value="CMS_VALUE[4]"><br>
Dieses Verzeichnis muss in der contenido <br>
Dateiverwalung vorhanden sein <br>
(Standardname = "mod")!
</td>
</tr>
<tr>
<td class="text">Beschreibung der Datei ausgeben:</td>
<td>
<input type="checkbox" name="CMS_VAR[5]" value="yes"<?php if ($description == "yes") echo " checked" ?>>
</td>
</tr>
<tr>
<td class="text">Komprimierung der Dateien:</td>
<td class="text">
Thumbnails: <input type="text" name="CMS_VAR[6]" value="CMS_VALUE[6]"><br>
Detailbilder: <input type="text" name="CMS_VAR[7]" value="CMS_VALUE[7]">
</td>
</tr>
</table>
<?
Code: Alles auswählen
<?php
/*# # # # # # # Modul 72dpiclub-Bildergalerie OUTPUT # # # # # # # # #
Autor: Hanta Seewald
Copyright: Hanta Seewald
Created: 07.08.2003
!!! soon www.72dpiclub.de !!!!!
############################################################*/
//////////////// CMS Variablen ///////////////////////////////////////////
$seldir = "CMS_VALUE[0]";//ausgewaehltes Verzeichnis
$td = "CMS_VALUE[1]"; //menge der td's
$writethumb = "CMS_VALUE[2]"; //Thumbnails in Verzeichnis schreiben
$writebig = "CMS_VALUE[3]"; //Mediumbilder in Verzeichniss schreiben
$thumbdir = "CMS_VALUE[4]"; //Name des Verzeichnisses, in die Thumbnails geschrieben werden
$description = "CMS_VALUE[5]"; //Beschreibung der Datei ausgeben
$thumbcompress = "CMS_VALUE[6]"; //Komprimierung der Thumbnails
$bigcompress = "CMS_VALUE[7]"; //Komprimierung der Detailansicht
if ($td == "") $td = 3;
if ($writethumb == "") $writethumb = "no";
if ($writebig == "") $writebig = "no";
if ($thumbdir == "") $thumbdir = "mod";
$thumbdir = ereg_replace("/","",$thumbdir);
###########################################################################
?>
<script language="JavaScript">
windowstatus = "zu";
function Detailbild (theSRC,theDescription) {
if (windowstatus == "offen") {
theWindow.close();
}
theWindow = window.open("",'detailbild','width=600, height=600, status=yes, scrollbar=no, resizeable=yes');
// theWindow = window.open("");
inhalt ='<html><head><ti';
inhalt += 'tle>Detailansicht</ti';
inhalt += 'tle></he';
inhalt += 'ad>';
inhalt += '<body leftmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0" rightmargin="0" bgcolor="#FAF6F3">';
inhalt += '<div style="position:absolute; top:10px; left:10px; padding-right:10px; visibility: hidden; ';
inhalt += ' font-family: verdana, arial, helevtica, sans-serif; font-size: 11px; color: #9E1B34; background-color:#FAF6F3">';
<?php
if ($description == "yes") {
?>
inhalt += theDescription;
<?php
}
?>
inhalt += '</div><a href="javascript:window.close()" onMouseOver="document.getElementsByTagName(\'div\')[0].style.setAttribute(\'visibility\',\'visible\')"';
inhalt += ' onMouseOut="document.getElementsByTagName(\'div\')[0].style.setAttribute(\'visibility\',\'hidden\')">';
inhalt += '<img src="'+theSRC+'" alt="'+theDescription+'" border="0"></a>';
inhalt += '</body></html>';
theWindow.document.write(inhalt);
theWindow.focus();
windowstatus = "offen";
}
</script>
<table cellpadding="4" cellspacing="10" border="0" align="center" width="330">
<tr>
<?php
$seldirhandle = substr ($seldir,0, strpos($seldir,'/'));
//Frontendpfad ermitteln
$query = "SELECT htmlpath FROM ".$cfg["tab"]["clients"]." WHERE idclient='".$client."'";
$db->query($query);
$db->next_record();
$frontendpath = $db->f("htmlpath");
//Dateiinformationen holen
$query = "SELECT idupl, filename, description, dirname FROM ".$cfg["tab"]["upl"]." WHERE dirname='".$seldir."' ORDER BY idupl DESC";
$db->query($query);
$menge = $db->num_rows();
$rest_td = $td-($menge%3);
for ($e=1;$e<=$rest_td;$e++) {
$rest_tags .= "<td> </td>";
}
$rest_tags .= "</tr>";
$i = 1;
while ($db->next_record()) {
//Dateinamen in Namen und Endung trennen
$filehandle = substr ($db->f("filename"),0, strpos($db->f("filename"),'.'));
$ext = substr ($db->f("filename"),strpos($db->f("filename"),'.'));
$theSRC = $frontendpath."thumbs.php?img_ref=".$db->f("filename")."&basepath=upload/".$seldir."&seldirhandle=".$seldirhandle."&modus=big&create=".$writebig."&thumbdir=".$thumbdir."&compress=".$bigcompress;
?>
<td class="bildergalerie" align="center" valign="top">
<a href="#" onClick="Detailbild('<?php echo $theSRC."','".$db->f("description") ?>'); return (false)">
<?php
if(@getimagesize($frontendpath."upload/".$thumbdir."/".$filehandle."_".$seldirhandle."_thumb".$ext)) {
//Wenn Thumbnail vorhanden
?>
<img src="<? echo $frontendpath ?>upload/<? echo $thumbdir ?>/<?php echo $filehandle."_".$seldirhandle."_thumb".$ext ?>" border="0">
<?php
}else{
//Wenn nicht, dann mach
?>
<img src="<? echo $frontendpath ?>thumbs.php?img_ref=<?php echo $db->f("filename") ?>&basepath=upload/<?php echo $seldir ?>&seldirhandle=<?php echo $seldirhandle ?>&create=<?php echo $writethumb ?>&thumbdir=<?php echo $thumbdir ?>&compress=<?php echo $thumbcompress ?>" border="0">
<?php
}
echo "</a>";
if ($description == "yes") echo $db->f("description");
?>
</td>
<?php
if ($i == $menge) {
echo $rest_tags;
}else{
if ($i%$td == 0) echo "</tr><tr>";
}
$i++;
}
?>
</table>
Die THumbnaildarstellung könnt Ihr per css Layouten, indem Ihr einfach eine Klasse bildergalerie in Eurer CSS-Datei anlegt. Das Layout des PopUps befindet sich im Moment noch hardgecoded im Outputbereich. Viel Spaß beim zurechtfummeln
8. In der Dateiverwaltung von contenido ein Bilderverzeichniss für die Thumbnails erstellen, falls Ihr Sie denn abspeichern wollt. On-the-fly Erstellung geht natürlich auch.
So, und nun viel Spaß mit der Bildergalerie. Ich benutze übrigens das contenido 4.3.2 und habe dieses Modul nicht mit anderen Versionen getestet.
Gruß
makemyday
