Differences

This shows you the differences between two versions of the page.

--- deutsch:ersetzer_rts:frontend_render:random-image-from-folder [2010/03/23 12:42]
Knut Heermann (flip-flop)
+++ deutsch:ersetzer_rts:frontend_render:random-image-from-folder [2018/06/03 18:09] (current)
@@ Line 3: / Line 3: @@
 ====== Random Image aus Verzeichnis ======
-FIXME TRANSLATE
-> I use random background images on many sites of mine.
+> Ich verwende Zufallshintergrundbilder auf vielen meiner Seiten.
-> It's one thing when they are defined at the beginning and included while setting up the site, but then they never change because the user  does not know how to change them.
+> Es ist recht einfach Bilder während die Einrichtung der Website zu definieren und aufzunehmen. Diese Bilder werden aber danach nie geändert werden, weil der Benutzer nicht weiß wie man sie ändern.
 >
-> With all solutions I've seen so far it's done with a separate folder on the server where you grab the images with some PHP-Replacement tag.
+> Bei allen Lösungen die ich bisher gesehen habe werden die Bilder  in einen separaten Ordner auf dem Server abgelegt und dann mit PHP-Replacern abgeholt.
-> But most of my users don't even want to know what ftp is - so I looked out for another solution.
+> Aber die meisten meiner Nutzer wollen nicht einmal wissen, was FTP ist - so dass ich nach einer anderen Lösung suchte.
->Wouldn't it be nice, when the user can upload his images to the phpwcms file browser and then add the background images for his site from there?
+> Wäre es nicht schön, wenn der Benutzer seine Bilder in der Dateizentrale hochladen und die Bilder dann von dort aus als Hintergrundbilder einfügen könnte?
-> Sometimes you add the background images not to the body tag in your layout, so you should be free to choose the html tag or css-class to add the background image to.
-> Sometimes different sections of a website require different background images, so I wanted flexibility here as well.
 >
-> I created a new Replacement-Tag: \\
+> Die Hintergrundbilder werden nicht auf den body-Tag im Layout gesetzt sondern frei mit HTML-Tags und/oder CSS-Klassen.
-  {RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:CSS_CLASS or HTML tag:WxHxCROPxQUALITY ALT-Text}
+> Manchmal erfordern verschiedene Abschnitte einer Website unterschiedliche Hintergründe, so wollte ich auch in diesem Bereich Flexibilität.
+>
+> Ich erstellte einen neuen Replacement-Tag: \\
+  {RAND_IMG_FROM_FOLDER:ID des PHPWCMS Bildverzeichnis:CSS_CLASS oder HTML tag:WxHxCROPxQUALITY ALT-Text}
 \\
@@ Line 26: / Line 26: @@
 **Forum:** [[http://forum.phpwcms.org/viewtopic.php?p=123473#p123473|[Css trick] Random background image]]
-**Autor:** P. Bracher //(breitsch)// [[http://www.webrealisierung.ch|Webrealisierung GmbH]] | The incredible module page: [[http://web.casa-loca.com/index.php?googlemaps|phpwcms module]]  \\
+**Autor:** P. Bracher //(breitsch)// [[http://www.webrealisierung.ch|Webrealisierung GmbH]]  \\
 **Version:**  V1.0 22.03.10
@@ Line 41: / Line 41: @@
 \\
-===== Example: =====
+===== Beispiele =====
--- ##{RAND_IMG_FROM_FOLDER:ID:CSS_CLASS}## \\
+-- ##{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder::}## \\
--> **{RAND_IMG_FROM_FOLDER:23:random-image}** \\
+-> **{RAND_IMG_FROM_FOLDER:23::}**
--- ##{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:HTML tag:WxHxCROPxQUALITY ALT-Text}## \\
+= Thumb Bild erzeugt, aus dem Verzeichnis in der Dateizentrale mit der ID=23, \\
--> **{RAND_IMG_FROM_FOLDER:23:400x300x1x80 My Image}**
+= Bildgröße: conf.inc.php -> %%$phpwcms['img_list_width'],  $phpwcms['img_list_height']%%.
+\\
+-- ##{RAND_IMG_FROM_FOLDER:ID:.CSS_CLASS:}## \\
+-> **{RAND_IMG_FROM_FOLDER:23:.random-image:}** \\
+= Bild erzeugt, aus dem Verzeichnis in der Dateizentrale mit der ID=23, \\
+= class erzeugt: ''%%.random-image { (background-image: (url('content/images/xxxyyyzzz.jpg'); }%%'' //(css im head-Element)// \\
+= Bildgröße: original.
 \\
-===== Code: =====
+-- ##{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder::WxHxCROPxQUALITY ALT-Text}## \\
+-> **{RAND_IMG_FROM_FOLDER:23::400x300x1 My Image}**
+= Bild erzeugt, aus dem Verzeichnis in der Dateizentrale mit der ID=23, \\
+= 400x300px zugeschnitten //(cropped)// mit dem  alt-Text "My Image" \\
+= Bildgröße: max. Seitenlänge 400x300px.
+Z.B. in einem Link -> HTML: ''%%<a href="index.php?category01">{RAND_IMG_FROM_FOLDER:36::100x150 ALT-Text}</a>%%''
+\\
+-- ##{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:CSS_CLASS:WxHxCROPxQUALITY ALT-Text}## \\
+-> **{RAND_IMG_FROM_FOLDER:23:.random-image:400x300}**
+= Bild erzeugt, aus dem Verzeichnis in der Dateizentrale mit der ID=23, \\
+= class erzeugt: ''%%.random-image { (background-image: (url('content/images/xxxyyyzzz.jpg'); }%%'' //(css im head-Element)// \\
+= Bildgröße: max. Seitenlänge 400x300px.
+Z.B. HTML: ''%%<div class="random-image" style="width:300px; height:300px; overflow:hidden;"><!--nop//--></div>%%''
+\\
+-- ##{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:HTML tag:WxHxCROPxQUALITY}## \\
+-> **{RAND_IMG_FROM_FOLDER:23:b:400x300x1}**
+= Bild erzeugt, aus dem Verzeichnis in der Dateizentrale mit der ID=23, \\
+= Definition für HTML-Element erzeugt: ''%%b { (background-image: (url('content/images/xxxyyyzzz.jpg'); }%%'' //(css im head-Element)// \\
+= Bildgröße: absolute Seitenlänge 400x300px //(cropping)//.
+Z.B. HTML: ''%%<div><b style="width:400px; height:300px; display:block">Text overlay</b></div>%%''
+\\
+-- ##{RAND_N_IMG_FROM_FOLDER:ID of PHPWCMS Folder:Number of Files:Lightbox WxHxCROPxQUALITY:WxHxCROPxQUALITY Alt Text}## \\
+-> **{RAND_N_IMG_FROM_FOLDER:23:5:800x800x0x100:x125 My Image}**
+= erzeugt 5 Bilder, aus dem Verzeichnis in der Dateizentrale mit der ID=23, \\
+= Bilder skaliert auf Höhe = 125px, mit dem alt-Text "My Image" \\
+= Lightbox mit max. Höhe bzw. Breite von 800px (vgl. Bedingung Lightbox) \\
+==== Finden der Verzeichnis-ID ====
+**in der Dateizentrale:**
+Fahre mit der Maus über den **[EDIT]** button, dann schaue in die untere Browserstatusleiste. Die ID ist die letzte Nummer in der angezeigten Zeichenkette.  \\
+{{:deutsch:phpwcms-system:file_center_id_be_de_1.gif|}}
+\\
+\\
+===== Code =====
-**Location:** /template/inc_script/frontend_render/rt_random_image_from_folder.php
+**Ort:** /template/inc_script/frontend_render/rt_random_image_from_folder.php
 <code php |h {RAND_IMG_FROM_FOLDER:ID ...}|h >
@@ Line 64: / Line 124: @@
 .03.10  patched and swaped out to /frontend_render/* by breitsch partially copied from
    imgx V1.0  03.01.09 by K.Heermann (flip-flop)
    Tag:
    {RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:CSS_CLASS or HTML tag:WxHxCROPxQUALITY ALT-Text}
    ID of PHPWCMS Folder      = the ID number of the Folder in the phpwcms file browser - required
    CSS_CLASS or HTML tag     = the CSS class or the HTML tag you want to add a random background image from the above folder
@@ Line 76: / Line 136: @@
                                if empty and css background image it takes the original dimensions of the image
                                if empty and not css background image it takes the preview dimensions for the images
 ============================================================================================= */
 // ----------------------------------------------------------------
 // obligate check for phpwcms constants
@@ Line 84: / Line 144: @@
    die("You Cannot Access This Script Directly, Have a Nice Day."); }
 // ----------------------------------------------------------------
 if( strpos($content['all'], '{RAND_IMG_FROM_FOLDER:') !== FALSE ) {
 function parse_imagesfromfolder($matches) {
 // $matches[0] = {RAND_IMG_FROM_FOLDER:ID of Folder:CSS_CLASS:WxHxCROPxQUALITY ALT-Text}
@@ Line 92: / Line 152: @@
 // $matches[2] = CSS_CLASS
 // $matches[3] = WxHxCROPxQUALITY ALT-Text
    if(isset($matches[1])) {
       // Folder ID
       $folder_id    = intval($matches[1]);
       // check for Alt-Text
-      $alt         = explode(' ', $matches[3], 2);       // WxHxCROPxQUALITY ALT-Text
+      $alt      = explode(' ', $matches[3], 2);       // WxHxCROPxQUALITY ALT-Text
-// $alt[0] = WxHxCROPxQUALITY
+      // $alt[0] = WxHxCROPxQUALITY
-// $alt[1] = ALT-Text
+      // $alt[1] = ALT-Text
-      $value      = explode('x', trim(strtolower($alt[0])));
+      $value    = explode('x', trim(strtolower($alt[0])));
-      $alttext   = isset($alt[1])    ? trim($alt[1]) : '';
+      $alttext  = isset($alt[1])    ? trim($alt[1]) : '';
       $alt      = isset($alt[0]) ? html_specialchars(trim($alt[0])) : ''; // WxHxCROPxQUALITY
-      $width      = isset($value[ 0 ])  ? intval($value[ 0 ]) : 0;
+      $width    = isset($value[ 0 ])  ? intval($value[ 0 ]) : 0;
-      $height      = isset($value[ 1 ])  ? intval($value[ 1 ]) : 0;
+      $height   = isset($value[ 1 ])  ? intval($value[ 1 ]) : 0;
-      $crop         = isset($value[ 2 ]) && intval($value[ 2 ]) === 1 ? 1 : 0;
+      $crop     = isset($value[ 2 ]) && intval($value[ 2 ]) === 1 ? 1 : 0;
-      $quality   = isset($value[ 3 ])  ? intval($value[ 3 ]) : 0;
+      $quality  = isset($value[ 3 ])  ? intval($value[ 3 ]) : 0;
       $sql = 'SELECT * FROM '.DB_PREPEND.'phpwcms_file WHERE f_aktiv=1 AND f_public=1 AND f_trash=0 AND f_pid='.$folder_id.' AND f_ext IN ("jpg", "png", "gif")';
         $result = mysql_query($sql);
@@ Line 123: / Line 183: @@
         $random = array_rand($folderfiles, 1);
         $folderfile = $folderfiles[$random];
           if(isset($folderfile['f_id']) ) {
            // $thumb_info = @getimagesize(PHPWCMS_URL.PHPWCMS_FILES.$folderfile["f_hash"] . '.' . $folderfile["f_ext"]);
             $thumb_info = @getimagesize(PHPWCMS_FILES.$folderfile["f_hash"] . '.' . $folderfile["f_ext"]);
             (isset ($value[ 0 ])) ? $thumb_info[0] = $value[0] : $thumb_info[0] = $thumb_info[0];
             (isset ($value[ 1 ])) ? $thumb_info[1] = $value[1] : $thumb_info[1] = $thumb_info[1];
             $zoominfo    = get_cached_image(
               array(   "target_ext"   =>   $folderfile["f_ext"],
-                        "image_name"   =>   $folderfile["f_hash"] . '.' . $folderfile["f_ext"],
+                        "image_name"  =>   $folderfile["f_hash"] . '.' . $folderfile["f_ext"],
-                        "max_width"      =>   $thumb_info[0],
+                        "max_width"   =>   $thumb_info[0],
-                        "max_height"   =>   $thumb_info[1],
+                        "max_height"  =>   $thumb_info[1],
-                        "thumb_name"   =>   md5(   $folderfile["f_hash"].$thumb_info[0].
+                        "thumb_name"  =>   md5(   $folderfile["f_hash"].$thumb_info[0].
-                                             $thumb_info[1].$GLOBALS['phpwcms']["sharpen_level"].$crop),
+                                               $thumb_info[1].$GLOBALS['phpwcms']["sharpen_level"].$crop),
-                        'crop_image'   =>   $crop
+                        'crop_image'  =>   $crop
               )
             );
             $folderfile_path  = PHPWCMS_IMAGES.$zoominfo[0];
             } else {
-            $folderfile_path = '';
+              $folderfile_path  = '';
-          }
+            }
           $folderfile_output  = '';
           if (isset ($matches[2]) && $matches[2] !== "") {
             $folderfile_output  .= '<style type="text/css">
   <!--
@@ Line 157: / Line 217: @@
   //-->
 </style>'.LF;
           $GLOBALS['block']['custom_htmlhead']['randomimagefoldercss'] = $folderfile_output;
           return;
           } else {
             $image      = '<img src="'.PHPWCMS_URL.'img/cmsimage.php/'.$width.'x'.$height.'x'.$crop;
@@ Line 166: / Line 226: @@
                $image .= 'x'.$quality;
             }
-            $image      .= '/'.$folderfile['f_id'].'.'.$folderfile["f_ext"].'" alt="'.$alttext.'" border="0"';
+            $image     .= '/'.$folderfile['f_id'].'.'.$folderfile["f_ext"].'" alt="'.$alttext.'" border="0"';
             /*
             if(isset($matches[3])) {
                $title = html_specialchars( preg_replace('/\s+/', ' ', clean_slweg( xss_clean( $matches[3] ) ) ) );
                if($title !== '') {
@@ Line 175: / Line 235: @@
                }
             }*/
-            $image      .= ' />';
+            $image     .= ' />';
             $folderfile_output  .= $image;
             return $folderfile_output;
           }
    }
    return '<img src="'.PHPWCMS_URL.'img/leer.gif" alt="" border="0" />';
 }
 $content["all"] = preg_replace_callback( '/\{RAND_IMG_FROM_FOLDER:(\d+):(.*?):(.*?)\}/i', 'parse_imagesfromfolder', $content["all"]);
+} // end if
+?>
+</code>
+\\
-} // end if
+===== Mehrere Bilder =====
+Benötigt man mehr als ein zufälliges Bild aus dem Verzeichnis, kann es bei mehrfachem Verwenden von RAND_IMG_FROM_FOLDER vorkommen, dass Bilder mehrfach gezeigt werden. Abhilfe schafft hier das modifizierte RAND_N_IMG_FROM_FOLDER:
-?>
+{RAND_N_IMG_FROM_FOLDER:<<folder id>>:<<number of images>>:<<lightbox size params>>:<<WxHxCROPxQUALITY ALT-Text>>}
+Dabei ist
+  * <<folder id>> = ID des Dateiordners aus der Dateizentrale.
+  * <<number of images>> = Anzahl der ausgewählten Zufallsbilder (Falls weniger Bilder im Ordner sind, werden weniger Bilder ausgegeben)
+  * <<lightbox size params>> = WxHxCROPxQUALITY für die Lightbox. Falls leer, wird keine Lightbox erzeugt
+  * <<WxHxCROPxQUALITY ALT-Text>> = Größe und Alt-Text der Bilder
+=== Code ===
+- entwickelt und getestet auf phpwcms 1.5.3 (2012/04/26, r471)
+**Ort:** /template/inc_script/frontend_render/random_multi_images_from_folder.php
+<code php |h {RAND_N_IMG_FROM_FOLDER:ID:number ...}|h >
+    <?php
+    /* ===========================================================================================
+       get a number of random images from a folder V1.0  01.06.2012 thoblerone
+       ===========================================================================================
+       basiert auf
+       random image from folder V1.0  22.03.10  breitsch http://www.webrealisierung.ch
+       -> {RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:CSS_CLASS or HTML tag:WxHxCROPxQUALITY ALT-Text}
+       The original script in /include/inc_front/ext.func.inc.php  programmed by (c) Oliver Georgi
+.03.10  patched and swaped out to /frontend_render/* by breitsch partially copied from
+       imgx V1.0  03.01.09 by K.Heermann (flip-flop)
+       Tag:
+       {RAND_N_IMG_FROM_FOLDER:<<folder id>>:<<number of images>>:<<lightbox size params>>:<<WxHxCROPxQUALITY ALT-Text>>}
+       folder ID                 = the ID number of the Folder in the phpwcms file browser - required
+       number of images          = the number of images to create. Will create max. the number of files in specified folder
+       lightbox size params      = Dimensions, cropping and render quality for lightbox image style is WxHxCROPxQUALITY
+                                   lightbox popup relies on lightbox script and css include somewhere on your webpage.
+                            <!-- CSS: template/lib/slimbox/slimbox.css -->
+                            <!-- JS: template/lib/slimbox/slimbox.mootools-1.3.js -->
+                                   leave lightbox size params empty for no lightbox
+       WxHxCROPxQUALITY ALT-Text = Dimensions and alt text of the image (alt text only when not used as background image)
+                                   if empty and css background image it takes the original dimensions of the image
+                                   if empty and not css background image it takes the preview dimensions for the images
+    ============================================================================================= */
+    // ----------------------------------------------------------------
+    // obligate check for phpwcms constants
+    if (!defined('PHPWCMS_ROOT')) {
+       die("You Cannot Access This Script Directly, Have a Nice Day."); }
+    // ----------------------------------------------------------------
+    if( strpos($content['all'], '{RAND_N_IMG_FROM_FOLDER:') !== FALSE ) {
+    function parse_nimagesfromfolder($matches) {
+    // $matches[0] = complete RT
+    // $matches[1] = ID of Folder
+    // $matches[2] = number of images (leave empty for 1 image)
+    // $matches[3] = leave empty = no lightbox , else Lightbox cmsimage.php Parameters (WxHxCROPxQUALITY e.g. 800x800x0x100)
+    // $matches[4] = WxHxCROPxQUALITY ALT-Text
+       $nImages = 1;
+        if (isset ($matches[2]) && $matches[2] !== "") {
+          $nImages = $matches[2];
+       }
+       if(isset($matches[1])) {
+          // Folder ID
+          $folder_id    = intval($matches[1]);
+          // check for Alt-Text
+          $alt      = explode(' ', $matches[4], 2);       // WxHxCROPxQUALITY ALT-Text
+          // $alt[0] = WxHxCROPxQUALITY
+          // $alt[1] = ALT-Text
+          $value    = explode('x', trim(strtolower($alt[0])));
+          $alttext  = isset($alt[1])    ? trim($alt[1]) : '';
+          $alt      = isset($alt[0]) ? html_specialchars(trim($alt[0])) : ''; // WxHxCROPxQUALITY
+          $width    = isset($value[ 0 ])  ? intval($value[ 0 ]) : 0;
+          $height   = isset($value[ 1 ])  ? intval($value[ 1 ]) : 0;
+          $crop     = isset($value[ 2 ]) && intval($value[ 2 ]) === 1 ? 1 : 0;
+          $quality  = isset($value[ 3 ])  ? intval($value[ 3 ]) : 0;
+          $sql = 'SELECT * FROM '.DB_PREPEND.'phpwcms_file WHERE f_aktiv=1 AND f_public=1 AND f_trash=0 AND f_pid='.$folder_id.' AND f_ext IN ("jpg", "png", "gif")';
+            $result = mysql_query($sql);
+            $i=0;
+            while($folderfile = mysql_fetch_array($result)) {
+              $folderfiles[$i] = $folderfile;
+              $i++;
+            }
+          /* use max. as many images as there are in the folder */
+          if ($i < $nImages)
+             $nImages = $i;
+            $random = array_rand($folderfiles, $nImages);
+          if ($nImages == 1) /* special case 1 file: array_rand returns single value instead of array of indices */
+             $random = array( $random );
+          shuffle($random);
+            $folderfile_output  = '';
+          for ($idxImage = 0; $idxImage<$nImages; $idxImage++)
+          {
+             $folderfile = $folderfiles[$random[$idxImage]];
+             if(isset($folderfile['f_id']) ) {
+                // $thumb_info = @getimagesize(PHPWCMS_URL.PHPWCMS_FILES.$folderfile["f_hash"] . '.' . $folderfile["f_ext"]);
+                $thumb_info = @getimagesize(PHPWCMS_FILES.$folderfile["f_hash"] . '.' . $folderfile["f_ext"]);
+                (isset ($value[ 0 ])) ? $thumb_info[0] = $value[0] : $thumb_info[0] = $thumb_info[0];
+                (isset ($value[ 1 ])) ? $thumb_info[1] = $value[1] : $thumb_info[1] = $thumb_info[1];
+                $zoominfo    = get_cached_image(
+                  array(   "target_ext"   =>   $folderfile["f_ext"],
+                         "image_name"  =>   $folderfile["f_hash"] . '.' . $folderfile["f_ext"],
+                         "max_width"   =>   $thumb_info[0],
+                         "max_height"  =>   $thumb_info[1],
+                         "thumb_name"  =>   md5(   $folderfile["f_hash"].$thumb_info[0].
+                                           $thumb_info[1].$GLOBALS['phpwcms']["sharpen_level"].$crop),
+                         'crop_image'  =>   $crop
+                  )
+                );
+                $folderfile_path  = PHPWCMS_IMAGES.$zoominfo[0];
+             } else {
+               $folderfile_path  = '';
+             }
+             $image      = '<img src="'.PHPWCMS_URL.'img/cmsimage.php/'.$width.'x'.$height.'x'.$crop;
+             if($quality <= 100 && $quality >= 10) {
+             $image .= 'x'.$quality;
+             }
+             $image     .= '/'.$folderfile['f_id'].'.'.$folderfile["f_ext"].'" alt="'.$alttext.'" border="0" />';
+             /* TB lightbox */
+             if (isset ($matches[3]) && $matches[3] !== "")
+             {
+                $lightbox = '<a title="'.$folderfile['f_longinfo'].'" rel="lightbox" target="_blank" href="'
+                            . PHPWCMS_URL.'img/cmsimage.php/' . $matches[3];
+                $lightbox     .= '/'.$folderfile['f_id'].'.'.$folderfile["f_ext"].'">';
+                $image = $lightbox . $image . '</a>';
+             }
+             /* TB lightbox ende*/
+             // append current image to output
+             $folderfile_output  .= $image;
+          }
+           return $folderfile_output;
+       }
+       return '<img src="'.PHPWCMS_URL.'img/leer.gif" alt="" border="0" />';
+    }
+    $content["all"] = preg_replace_callback( '/\{RAND_N_IMG_FROM_FOLDER:(\d+):(\d+):(.*?):(.*?)\}/i', 'parse_nimagesfromfolder', $content["all"]);
+    } // end if
+    ?>
 </code>
+=== Lightbox ===
+Bedingung für Lightbox: irgendwo im Template oder auch im Zufallsbild - CP
+<code>
+    <!-- CSS: template/lib/slimbox/slimbox.css -->
+    <!-- JS: template/lib/slimbox/slimbox.mootools-1.3.js -->
+</code>

deutsch/ersetzer_rts/frontend_render/random-image-from-folder.1269344553.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show page Old revisions