Guys
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:
Code: Select all
{RAND_IMG_FROM_FOLDER:ID of PHPWCMS Folder:CSS_CLASS or HTML tag:WxHxCROPxQUALITY ALT-Text}
So you can add one or more folders in your file browser and add the according images there, then you include them with the above RT by just changing the ID of the folder.
Like this you can include different image collections in different sections of your site. you can add the RT to:
- your template (wherever - head, content, footer - NOT to the html-head!)
within an article
or even the structure name field
in the template it probably makes the most sense.
ID of PHPWCMS Folder
the ID number of the Folder in the phpwcms file browser, grabs all (activated) jpg, png, gif files - 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 in your site
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 (? - makes no sense! add dimensions when you want the image within your content)
add the following file to
template/inc_script/frontend_render/random_image_from_folder.php
Code: Select all
<?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
?>
flip flop - feel free to add this to the wiki
