Suche
Suche Menü

Autolightbox

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.

7 Kommentare Schreibe einen Kommentar

  1. Korrekte Größe?
    Bin grad am Testen – woher weiß das Script denn die korrekte Größe für ein Bild?

    Antworten

  2. Link will nicht erstellt werden
    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?

    Antworten

  3. Re: Korrekte Grösse
    Ich schau's mir an sobald ich wieder einen Laptop zur Hand habe.

    Antworten

  4. Parse Error in der Zeile 54
    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.)

    Antworten

  5. Re: Parse Error in der Zeile 54
    Danke für das Feedback. Die Autolightbox ist nun im Modul «ToolBox» integriert. Deshalb wird dieses Script nicht mehr weiterentwickelt.

    Antworten

Schreiben Sie einen Kommentar zu Andi Petzoldt Antworten abbrechen

Pflichtfelder sind mit * markiert.