Differences

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

english:phpwcms_replacer_rts:frontend_render:random-image-from-folder [2010/03/23 12:32]
Knut Heermann (flip-flop) created
english:phpwcms_replacer_rts:frontend_render:random-image-from-folder [2018/06/03 18:09] (current)
Line 24: Line 24:
**Forum:** [[http://forum.phpwcms.org/viewtopic.php?p=123473#p123473|[Css trick] Random background image]] **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]] | The incredible module page: [[http://web.casa-loca.com/index.php?googlemaps|phpwcms module]]  \\+**Author:** P. Bracher //(breitsch)// [[http://www.webrealisierung.ch|Webrealisierung GmbH]] \\
**Version:**  V1.0 22.03.10 **Version:**  V1.0 22.03.10
Line 40: Line 40:
===== Example: ===== ===== 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 ====
   
--- ##{RAND_IMG_FROM_FOLDER:ID:CSS_CLASS}## \\ 
--> **{RAND_IMG_FROM_FOLDER:23:random-image}** \\ 
--- ##{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:HTML tag:WxHxCROPxQUALITY ALT-Text}## \\ +**in filecenter:**  
--> **{RAND_IMG_FROM_FOLDER:23:400x300x1x80 My Image}**+ 
 +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: ===== ===== Code: =====
Line 195: Line 266:
</code> </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>
english/phpwcms_replacer_rts/frontend_render/random-image-from-folder.1269343979.txt.gz · Last modified: 2018/06/03 18:08 (external edit)
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