NAVIGATION
This shows you the differences between two versions of the page.
|
english:phpwcms_replacer_rts:frontend_render:random-image-from-folder [2010/03/25 10:13] Knut Heermann (flip-flop) |
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 44: | Line 44: | ||
| -> **{RAND_IMG_FROM_FOLDER:23::}** | -> **{RAND_IMG_FROM_FOLDER:23::}** | ||
| - | = Thumb image generated from file center folder ID=23, //(Image size: conf.inc.php -> %%$phpwcms['img_list_width'], | + | = Thumb image generated from file center folder ID=23, \\ |
| - | $phpwcms['img_list_height']%%)//. | + | = Image size: conf.inc.php -> %%$phpwcms['img_list_width'], $phpwcms['img_list_height']%%. |
| \\ | \\ | ||
| Line 52: | Line 52: | ||
| -> **{RAND_IMG_FROM_FOLDER:23:.random-image:}** \\ | -> **{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'); }%%'' //(inline css)// //(Image size: original)//. | + | = 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. | ||
| \\ | \\ | ||
| Line 58: | Line 60: | ||
| -> **{RAND_IMG_FROM_FOLDER:23::400x300x1 My Image}** | -> **{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: max. page length 400x300px)//. | + | = 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>%%'' | ||
| \\ | \\ | ||
| Line 65: | Line 71: | ||
| -> **{RAND_IMG_FROM_FOLDER:23:.random-image:400x300}** | -> **{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'); }%%'' //(inline css)// //(Image size: max. page length 400x300px)//. | + | = 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:HTML tag:WxHxCROPxQUALITY}## \\ | ||
| - | -> **{RAND_IMG_FROM_FOLDER:23:b:400x300}** | ||
| - | = mage generated from file center folder ID=23, definition for HTML-element generated ''%%b { (background-image: (url('content/images/xxxyyyzzz.jpg'); }%%'' //(inline css)// //(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 ==== | ==== Find the folder ID ==== | ||
| Line 237: | 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> | ||