{{indexmenu_n>630}}

====== Random Image from folder ======

> I use random background images on many sites of mine.
> 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.
>
> 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.
> But most of my users don't even want to know what ftp is - so I looked out for another solution.
>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?
> 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: \\
  {RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:CSS_CLASS or HTML tag:WxHxCROPxQUALITY ALT-Text}

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


**Forum:** [[http://forum.phpwcms.org/viewtopic.php?p=123473#p123473|[Css trick] Random background image]]

**Author:** P. Bracher //(breitsch)// [[http://www.webrealisierung.ch|Webrealisierung GmbH]] \\
**Version:**  V1.0 22.03.10

**Filename:** rt_random_image_from_folder.php

**Folder:** /template/inc_script/frontend_render/

**Condition:**  -> [[http://www.phpwcms-docu.de/conf_inc_php_en.phtml|/config/phpwcms/conf.inc.php]] \\
  * $phpwcms['allow_ext_render']  = 1;


----
----
\\

===== Example: =====

-- ##{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder::}## \\
-> **{RAND_IMG_FROM_FOLDER:23::}**

= Thumb image generated from file center folder ID=23, \\
= Image size: 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:}** \\

= Image generated from file center folder ID=23, \\
= class generated: ''%%.random-image { (background-image: (url('content/images/xxxyyyzzz.jpg'); }%%'' //(css in head element)// \\
= Image size: original.

\\
-- ##{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder::WxHxCROPxQUALITY ALT-Text}## \\
-> **{RAND_IMG_FROM_FOLDER:23::400x300x1 My Image}**

= Image generated from file center folder ID=23, \\
= 400x300px cropped with the alt text "My Image" \\
= Image size: absolute page length 400x300px //(cropped)//.

E.g. in a 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}## \\
-> **{RAND_IMG_FROM_FOLDER:23:.random-image:400x300}**

= Image generated from file center folder ID=23, \\
= class generated: ''%%.random-image { (background-image: (url('content/images/xxxyyyzzz.jpg'); }%%'' //(css in head element)// \\
= Image size: max. page length 400x300px).

\\

-- ##{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:CSS_CLASS:WxHxCROPxQUALITY}## \\
-> **{RAND_IMG_FROM_FOLDER:23:.random-image:400x300}**

= Image generated from file center folder ID=23, \\
= class generated: ''%%.random-image { (background-image: (url('content/images/xxxyyyzzz.jpg'); }%%'' //(css in head element)// \\
= Image size: max. page length 400x300px) //(cropped)//.

E.g. 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}**

= Image generated from file center folder ID=23, \\
= definition for HTML-element generated: ''%%b { (background-image: (url('content/images/xxxyyyzzz.jpg'); }%%'' //(css in head element)// \\
=  Image size: absolute page length 400x300px.

E.g. 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}**

= generates 5 images from file center folder ID=23, \\
= images scaled to height of 125px, with alt-Text "My Image" \\
= images linked to lightbox with max. height or width of 800px (see. Lightbox requirement) \\

==== Find the folder ID ====
 

**in filecenter:** 

Move the mouse over the **[EDIT]** button, than have a look into the browser status bar down stares. The ID is the last number in string. \\
{{:english:phpwcms-system:file_center_id_be_en_1.gif|}}
 
\\




\\

===== Code: =====


**Location:** /template/inc_script/frontend_render/rt_random_image_from_folder.php

<code php |h {RAND_IMG_FROM_FOLDER:ID ...}|h >
<?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

?>
</code>

===== Multiple Images =====
If more than one random image is retrieved using RAND_IMG_FROM_FOLDER, the same picture might be shown several times. As an Alternative, the variation RAND_N_IMG_FROM_FOLDER can be used:

{RAND_N_IMG_FROM_FOLDER:<<folder id>>:<<number of images>>:<<lightbox size params>>:<<WxHxCROPxQUALITY ALT-Text>>}

With

  * <<folder id>> = ID of PHPWCMS Folder
  * <<number of images>> = number of images to select (if folder contains fewer images, just these are displayed)
  * <<lightbox size params>> = if used, WxHxCROPxQUALITY for lightbox. If empty, no lightbox is created
  * <<WxHxCROPxQUALITY ALT-Text>> = size and alt text of images

=== Code ===
- developed and tested on phpwcms 1.5.3 (2012/04/26, r471)

**Location:** /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
       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_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 ===
If the lightbox is being used, this code has to be somewhere in the template or the random image CP to link the lightbox scripts and CSS

<code>
    <!-- CSS: template/lib/slimbox/slimbox.css --> 
    <!-- JS: template/lib/slimbox/slimbox.mootools-1.3.js -->
</code>