Random Image aus Verzeichnis

Ich verwende Zufallshintergrundbilder auf vielen meiner Seiten.
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.

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.
Aber die meisten meiner Nutzer wollen nicht einmal wissen, was FTP ist - so dass ich nach einer anderen Lösung suchte.
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?

Die Hintergrundbilder werden nicht auf den body-Tag im Layout gesetzt sondern frei mit HTML-Tags und/oder CSS-Klassen.
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}





Tag: {RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:CSS_CLASS or HTML tag:WxHxCROPxQUALITY ALT-Text}

Forum: [Css trick] Random background image

Autor: P. Bracher (breitsch) Webrealisierung GmbH | The incredible module page: phpwcms module
Version: V1.0 22.03.10

Dateiname: rt_random_image_from_folder.php

Verzeichnis: /template/inc_script/frontend_render/

Bedingung:/config/phpwcms/conf.inc.php

  • $phpwcms['allow_ext_render'] = 1;



Beispiel:

{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder::}
{RAND_IMG_FROM_FOLDER:23::}

= Thumb Bild erzeugt, aus dem Verzeichnis in der Dateizentrale mit der ID=23,
= 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.


{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:400×300}

= 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>


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.


Code:

Ort: /template/inc_script/frontend_render/rt_random_image_from_folder.php

{RAND_IMG_FROM_FOLDER:ID ...}

<?php
/* ===========================================================================================
   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
   22.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
                               only the css property 'background-image' is rendered to the head section of the site, the
                               rest of the definitions should be done in the frontend css
                               if empty it renders the image in an image tag (<img src= ... />) for use wherever you want
   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_IMG_FROM_FOLDER:') !== FALSE ) {
 
function parse_imagesfromfolder($matches) {
// $matches[0] = {RAND_IMG_FROM_FOLDER:ID of Folder:CSS_CLASS:WxHxCROPxQUALITY ALT-Text}
// $matches[1] = ID of Folder
// $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[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++;
        }
        $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"],
                        "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  = '';
            }
 
          $folderfile_output  = '';
 
          if (isset ($matches[2]) && $matches[2] !== "") {
 
            $folderfile_output  .= '<style type="text/css">
  <!--
  '.$matches[2].' {
  background-image: url(\''.$folderfile_path.'\');
  }
  //-->
</style>'.LF;
 
          $GLOBALS['block']['custom_htmlhead']['randomimagefoldercss'] = $folderfile_output;
          return;
 
          } else {
            $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"';
            /*
            if(isset($matches[3])) {
 
               $title = html_specialchars( preg_replace('/\s+/', ' ', clean_slweg( xss_clean( $matches[3] ) ) ) );
               if($title !== '') {
                  $image .= ' title="'.$title.'"';
               }
            }*/
            $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
 
?>


deutsch/ersetzer_rts/frontend_render/random-image-from-folder.txt · Last modified: 2010/12/08 16:56 by Knut Heermann (flip-flop)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0