blattertech informatikLukas BlatterNiederlenzerstrasse 21
5600 Lenzburg/AGSwitzerland

079 569 25 90
https://www.blattertech.ch

Adresse anzeigen

Autolightbox

14. Juli 2011 |  PHP |  SNIPPLETS |  CMS MADE SIMPLE7 Kommentare

Autolightbox ist die einfachste Möglichkeit eine Lightbox eines Bilder zu erzeugen. Das Grundprinzip funktioniert so:

Beim Speichern einer Seite, eines Blog- oder eines Newseintrags wird der Inhalt nach Bildern durchsucht. Dabei vergleicht das Script ob das Bild mit der korrekten Grösse oder verkleinert eingebunden ist. Ist das Bild verkleinert eingebunden, wird ein Thumbnail generiert und die Bild-URL auf das Thumbnail angepasst. Zusätzlich wird um das Bild einen Link auf das Originalbild erstellt.

Hier die Schritt für Schritt Anleitung mit Zwischenkommentaren

Benutzerdefinierter Tag (UDT) "Autolightbox"

Als erstes muss der Benutzerdefinierte Tag erstellt werden.

Benutzerdefinierter Tag erstellen

Dazu muss folgender Code in den neu erstellen Tag "Autolightbox" kopiert werden:

/**
 *
 *  AutoLightBox - UDT for automatically generating thumbnails in content
 *
 * Installing
 * -----------
 * 1. Create user defined tag
 * 2. Create event ContentEditPre which use this tag
 * 3. Create if use event NewsArticleAdded/NewsArticleEdited
 * 4. Create if use event CGBlogArticleAdded/CGBlogArtikleEdited
 *
 * Changelog
 * -----------
 *
 * by klenkes:
 * Klenkes-10: Test auf Inhalt title="xxx", erst dann Zuweisung und Einbau
 * Klenkes-20: Verzweigung, die einen leeren title tag berücksichtigt
 *
 * by blattertech informatik:
 * add support for all content blocks
 * add support for cgblog
 * add support for news
 * add function comments
 * add attribute def
 */


// Global Options
$thumb_prefix = "thumb_" ;

$attribute = array();
$attribute['css'] = "";  // Name of CSS class (can be emtpy)
$attribute['rel'] = "";  // Value of rel="" attribute (can be emtpy)


/**
 *
 * replace images width thums
 *
 * @param string $txt - text with included image-tag
 * @param string $thumb_prefix - prefix of the thumbs
 * @return string
 *
 */

function replaceContentImageWithThumbs($txt, $thumb_prefix, $attr = array('css' => '', 'rel' => ''))
{
   global $gCms;
   $config =& $gCms->GetConfig();
   $rootPath = $gCms->config["root_path"] ;
   $imgs = findAllImg($txt) ;

   $rel = ($attr['rel'] != "") ? ' rel="'.$attr['rel'].'" ' : '';
   $css = ($attr['css'] != "") ? ' class=".$attr['css']." ' : '';

   for ($i=0 ; $i < count($imgs); $i++){
      $filename = basename($imgs[$i]["src"]);
      //already a thumb?
      if (substr($filename, 0 ,strlen($filename)) != $thumb_prefix ){
         $imgInfo = getimagesize($rootPath."/".$imgs[$i]["src"]) ;

         //condition to generate thumb
         if ($imgInfo[0] > $imgs[$i]["width"] || $imgInfo[1] > $imgs[$i]["height"]){
            $thumbSrc = generateImgThumb($imgs[$i]["src"], $imgs[$i]["width"], $imgs[$i]["height"], $thumb_prefix);
            //let's replace the content
            $pattern = "<[iI][mM][gG][^>]*src=\"".$imgs[$i]["src"]."\"[^>]*>" ;
            $a_pattern = "<[Aa][^>]*><[iI][mM][gG][^>]*src=\"".$imgs[$i]["src"]."\"[^>]*>\s*</a>" ;
            $pattern = "/".str_replace("/", "\/", $pattern)."/" ;
            $a_pattern = "/".str_replace("/", "\/", $a_pattern)."/" ;

            if (preg_match($a_pattern, $txt)){
               $txt = preg_replace($pattern, $imgs[$i]["beforSrc"]."src=\"".$thumbSrc."\"".$imgs[$i]["afterSrc"], $txt) ; // Klenkes. Nix passiert...
            }
            else{
               if (!empty($imgs[$i]["title"])) { //Klenkes-20. Test darauf ob überhaupt ein Titeltext eingegeben wurde... Falls ja Einbau und Ausgabe...
                  $txt = preg_replace($pattern, "<a target=\"_blank\""." title=\"".$imgs[$i]["title"]."\"".$css.$rel." href=\"".$imgs[$i]["src"]."\">".$imgs[$i]["beforSrc"]."src=\"".$thumbSrc."\"".$imgs[$i]["afterSrc"]."</a>", $txt) ;
               }
               else{ // Fall: Kein Titel wurde eingegeben. Also obige Zeile nur ohne title="xxx"
                  $txt = preg_replace($pattern, "<a target=\"_blank\"".$css.$rel." href=\"".$imgs[$i]["src"]."\">".$imgs[$i]["beforSrc"]."src=\"".$thumbSrc."\"".$imgs[$i]["afterSrc"]."</a>", $txt) ;
               }
            }
         }
      }
   }
   return $txt ;
}

/**
 *
 * return all found images in a string
 *
 * @param string $txt - text with included image-tag
 * @return array width images
 *
 */

function findAllImg($txt)
{
   preg_match_all("/<[iI][mM][gG][^>]*>/", $txt, $out, PREG_PATTERN_ORDER);
   $k=0 ;
   $img = array();
   for ($i = 0 ; $i < count($out[0]) ; $i++) {
      $imgTxt = $out[0][$i] ;
      preg_match("/width=\"([^\"]*)\"/", $imgTxt, $imgWidth);
      preg_match("/height=\"([^\"]*)\"/", $imgTxt, $imgHeight);
      preg_match("/(.*)src=\"([^\"]*)\"(.*)/", $imgTxt, $imgSrc);
      preg_match("/title=\"([^\"]*)\"(.*)/", $imgTxt, $imgtitle); // Klenkes-10: Suche nach dem title und weise Inhalt $imgtitle zu

      if (!empty($imgWidth[1]) && !empty($imgHeight[1]) && !empty($imgSrc[2]) ){
         $img[$k]["width"] = $imgWidth[1] ;
         $img[$k]["height"] = $imgHeight[1] ;
         $img[$k]["src"] = $imgSrc[2] ;
         $img[$k]["beforSrc"] = $imgSrc[1] ;
         $img[$k]["afterSrc"] = $imgSrc[3] ;

         // Klenkes-10: Wenn Variable belegt dann ab in's array(glaub ich) Weiter geht's mit der Ausgabe oben.
         if (!empty($imgtitle[1]) ) {
            $img[$k]["title"] = $imgtitle[1];
         }
         $k++;
      }
   }
   return $img ;
}


/**
 *
 * generate thumbnail
 *
 * @param string $src - sourcefile
 * @param float  $width - image width
 * @param float  $height - image height
 * @param string $thumb_prefix - prefix for thumbnail
 * @return string
 *
 */

function generateImgThumb($src, $width, $height, $thumb_prefix)
{
   global $gCms;

   $config =& $gCms->GetConfig();
   $rootPath = $gCms->config["root_path"] ;
   $imageManagerRelPath = "lib/filemanager/ImageManager/" ;
   require_once($rootPath."/".$imageManagerRelPath."Classes/ImageManager.php");
   require_once($rootPath."/".$imageManagerRelPath."config.inc.php");

   $thumbName = getThumbPath($rootPath."/".$src, $thumb_prefix, $width, $height) ;

   //generujemy miniaturke
   if(!is_file($thumbName)){
      $imgInfo = getimagesize($rootPath."/".$src);
      if(!is_array($imgInfo))  return $src;

      require_once($rootPath."/".$imageManagerRelPath.'Classes/Thumbnail.php');

      // if image smaller than config size for thumbs
      if ($imgInfo[0] <= $width && $imgInfo[1] <= $height) {
         $thumbnailer = new Thumbnail($imgInfo[0],$imgInfo[1]);
         $thumbnailer->createThumbnail($rootPath."/".$src, $thumbName);
      }
      // if image bigger than config size for thumbs
      else {
         $thumbnailer = new Thumbnail($width, $height);
         $thumbnailer->createThumbnail($rootPath."/".$src, $thumbName);
      }
      if(is_file($thumbName)) {
         return getThumbPath($src,$thumb_prefix,$width,$height) ;
      }
   }
   return getThumbPath($src,$thumb_prefix,$width,$height) ;
}

/**
 *
 * Returns new path to thumbnail
 *
 * @param string $fullpathfile - absolute path to image file
 * @param string $thumb_prefix - prefix for thumbnail
 * @param float  $width - image width
 * @param float  $height - image height
 * @return string
 *
 */

function getThumbPath($fullpathfile, $thumb_prefix, $width, $height)
{
   $path_parts = pathinfo($fullpathfile);
   return $path_parts['dirname']."/".$thumb_prefix.$width."_".$height."_".$path_parts['basename'];
}

/**
 *
 * Edit CGBlog / News / Content
 *
 */

// CGBlog
if (isset($params['content']) and isset($params['cgblog_id'])) {
   $content = replaceContentImageWithThumbs($params['content'], $thumb_prefix, $attribute);
   $db = cmsms()->GetDB();
   $query = "UPDATE ".cms_db_prefix()."module_cgblog SET cgblog_data = ? WHERE cgblog_id = ?";
   $db->Execute($query, array($content, $params['cgblog_id']));
}
// News
else if (isset($params['content']) and isset($params['news_id'])) {
   $content = replaceContentImageWithThumbs($params['content'], $thumb_prefix, $attribute);
   $db = cmsms()->GetDB();
   $query = "UPDATE ".cms_db_prefix()."module_news SET news_data = ? WHERE news_id = ?";
   $db->Execute($query, array($content, $params['news_id']));
}
// Seiten-Inhalte
else if (method_exists($params['content'], 'get_content_blocks'))
{
    foreach($params['content']->get_content_blocks() as $block_name => $block_info)
    {
        $params['content']->SetPropertyValue(
            $block_name,
            replaceContentImageWithThumbs(
                $params['content']->GetPropertyValue($block_name),
                $thumb_prefix,
                $attribute
            )
        );
    }
}

Weitere Module können ähnlich dem Einbau von CGBlog und News eingebaut werden. Voraussetzung dafür ist natürlich, dass diese Module in der Ereignisverwaltung eingetragen sind. Der Aufruf muss am Schluss des UDTs eingetragen werden.

Definition Attribute
In den globalen Einstellungen des Scripts kann eine CSS-Klasse und/oder ein Rel-Attribute festgelegt werden:

$attribute = array(); $attribute['css'] = "lightbox"; // Name of CSS class (can be emtpy) $attribute['rel'] = "page"; // Value of rel="" attribute (can be emtpy) 

Download Autolightbox

Das Script kann natürlich auch in andere PHP Projekte eingebaut werden. Dazu muss jedoch die Thumbnailgenerierung geändert sowie die Contentmodifikation geändert werden.

Ereignisverwaltung ergänzen

Nun muss der UDT den verschiedenen Ereignissen in der Ereignisverwaltung zugewiesen werden.

Ereignisverwaltung

Autolightbox zuweisenFolgende Ereignisse müssen bearbeitet werden:

  • ContentEditPre
  • NewsArticleAdded
  • NewsArticleEdited
  • CGBlogArtikelAdded (falls installiert)
  • CGBlogArtikelEdited (falls installiert)

Einfach den UDT dem Ereignis zuweisen.

 

Lightbox einbinden

Damit der durch Autolightbox erstellte Link mit einer Lightbox funktioniert, braucht es ein wenig Javascript. Voraussetzung ist ein eingebundenes jQuery.

<script type="text/javascript">
jQuery(function($) { $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png'], a[href$='.JPG'], a[href$='.JPEG'], a[href$='.GIF'], a[href$='.PNG']").attr({rel:"page"}).lightBox();});
</script> 

Mit diesem Schnippsel wird bei allen Links welche auf eine Grafik zeigen, das Attribut rel="lightbox[page]" angehängt. Dieser Teil je nach verwendeter Lightbox angepasst werden. Der von mir hier genutzte Schnippsel verwende ich mit der jquery lightbox plugin. In der Regel findet man in der Anleitung zum jeweiligen Script welches Attribute ergänzt werden muss.

Über den Autor:

Lukas Blatter

bloggt und twittert seit 2009 aus Leidenschaft diverse Themen rund um Webdesign, PHP, TYPO3, CMS Made Simple, Computer und weiteres.

Er ist Gründer und Inhaber von blattertech informatik, Ehemann und Vater einer Kinderschar.

Kommentare

Super :)
12. Oktober 2011 von Andi Petzoldt
Klasse Idee, hab ich gleich eingebaut. Danke :)
Korrekte Größe?
12. Oktober 2011 von Andi Petzoldt
Bin grad am Testen - woher weiß das Script denn die korrekte Größe für ein Bild?
Link will nicht erstellt werden
12. Oktober 2011 von Andi Petzoldt
Ah, hatte den Text nicht richtig gelesen, ist natürlich klar.
Das mit dem Thumbnail funktioniert schon, nur der Link auf das größere Bild wird noch nicht erstellt. Any idea?
Re: Korrekte Grösse
12. Oktober 2011 von Lukas Blatter
Ich schau's mir an sobald ich wieder einen Laptop zur Hand habe.
Re: Link will nicht erstellt werden
14. Oktober 2011 von Lukas Blatter
Allenfalls ist das hier ein Ansatzpunkt:
http://forum.cmsmadesimple.de/viewtopic.php?pid=12003#p12003

Schaue es mir möglichst bald an.
Parse Error in der Zeile 54
11. März 2014 von M. S.
Falls bei Verwendung der aktuellen CMS Made Simple-Version ein Fehler beim Speichern des Skriptes erscheint:

$css = ($attr['css'] != "") ? ' class="'.$attr['css'].'" ' : '';

(' bei dem class-Attribut ergänzt.)
Re: Parse Error in der Zeile 54
11. Mai 2014 von Lukas Blatter
Danke für das Feedback. Die Autolightbox ist nun im Modul "ToolBox" integriert. Deshalb wird dieses Script nicht mehr weiterentwickelt.

Auf Grund des hohen Spamaufkommens können zu diesem Beitrag keine Kommentare mehr abgegeben werden