[Css trick] Random background image

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: [Css trick] Random background image

Post by flip-flop » Sun 3. Jan 2010, 14:38

No, he can´t catch the right class: body7, body12, body 45 .....

New idea, I have edited my last posting:

- $content['body_id'] = 0; // In any case the id is set to zero. We need a clearly body class name.

- $block['custom_htmlhead']['mycss'] .= ' #bg-image0 { ' . LF;
+ $block['custom_htmlhead']['mycss'] .= ' #bg-image'.$content['cat_id'].' { ' . LF;
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: [Css trick] Random background image

Post by update » Sun 3. Jan 2010, 16:02

this is much better indeed, because it will always render the right css relations
(in case you need the same randomized picture pool on each page)
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Jensensen
Posts: 2995
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: [Css trick] Random background image

Post by Jensensen » Tue 5. Jan 2010, 02:35

[off topic but relevant in some way]

... and,
to get rid of the awful ID terror
then use your own templates.

See
/template/inc_settings/template_default/custom_settings.php

save it here:
/template/inc_settings/template_default/ABC.php

and try

Code: Select all

$template_default['body']['id'] = 'thisISit blah_fkID';
$template_default['body']['class'] = 'take_that blahClass_fkID';
Have a look (source code) at blah_fkID and blahClass_fkID. Right after it, the expression is extended by the ID annoyingly.
No one needs, even no web browser. It will be ignored when you work with thisISit and/or take_that in your CSS-file.

When you want to have a clean [custom] body tag with absolutely no ID numbers, index.php needs some hack.
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: [Css trick] Random background image

Post by update » Tue 5. Jan 2010, 08:37

Jensensen wrote:index.php needs some hack
Tat's de trut
I just remembered this discussion some year(s?) ago ;)
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

breitsch
Posts: 473
Joined: Sun 6. Mar 2005, 23:12
Location: bern switzerland

Re: [Css trick] Random background image

Post by breitsch » Tue 23. Mar 2010, 00:40

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
http://www.youtube.com/watch?v=jqxENMKaeCU
because it's important!
breitsch

User avatar
axelko
Posts: 137
Joined: Mon 27. Feb 2006, 22:51
Contact:

Re: [Css trick] Random background image

Post by axelko » Tue 23. Mar 2010, 10:22

Breitsch,

Very nice solution, ecspecially with the enduser in mind. Indeed a lot of endusers are not that skilled computerusers and FTP is a big step for them.

Thanx,

Axel
-------------------------------

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: [Css trick] Random background image

Post by flip-flop » Tue 23. Mar 2010, 12:35

flip flop - feel free to add this to the wiki
wiki: Random Image from folder :D
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: [Css trick] Random background image

Post by pepe » Tue 23. Mar 2010, 17:30

ID number of the Folder... where to find ?

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: [Css trick] Random background image

Post by flip-flop » Tue 23. Mar 2010, 18:27

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.

Example from GallerX, it is the same: Please have a look into the last line (No 18).
Image
Last edited by flip-flop on Thu 25. Mar 2010, 09:17, edited 2 times in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: [Css trick] Random background image

Post by pepe » Tue 23. Mar 2010, 20:17

Thanks... :D

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: [Css trick] Random background image

Post by pepe » Wed 24. Mar 2010, 15:38

obwohl ich alles versucht habe, was mir einfallen wollte...
ich bekomme den Text des RTs garnicht erst gerendert, geschweige denn irgendein Bild ausgeworfen :roll:
Alle anderen RTs hatte ich auch schon abgeschaltet, NIX!

Hier mein Experiment im Content... den Code habe ich per ContentPart "HTML" eingebunden:

http://webdesign-dp.de/pepes-sandbox/pe ... sign.phtml

Es kommt immer nur der eingegebene Text raus :?: :?: :?:

Bitte mal ein ECHTES Beispiel... dieser Rattenschwanz macht mir das wohl nicht ausreichend klar...

Code: Select all

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

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: [Css trick] Random background image

Post by flip-flop » Wed 24. Mar 2010, 21:32

Mhh,

funktioniert denn überhaupt ein RT in diesem CP bei dir?

Ich habe das gerade getestet und es rennt.

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

breitsch
Posts: 473
Joined: Sun 6. Mar 2005, 23:12
Location: bern switzerland

Re: [Css trick] Random background image

Post by breitsch » Wed 24. Mar 2010, 21:36

:?: template/inc_script/frontend_render/random_image_from_folder.php :?:

könnte ja sein, obwohl ich mich fast nicht getrau danach zu fragen
http://www.youtube.com/watch?v=jqxENMKaeCU
because it's important!
breitsch

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: [Css trick] Random background image

Post by flip-flop » Wed 24. Mar 2010, 21:50

Wenn das auch nicht hilft, dann teste einmal diese Zeilen in einer php Datei im frontend_render:

Code: Select all

<?php

function parse_rt_test1($matches) { return dumpVar($matches); }

$content["all"] = preg_replace_callback( '/\{RT_TEST1:(\d+):(.*?)\}/i', 'parse_rt_test1', $content["all"]);

$content["all"] = preg_replace( '/\{RT_TEST2:(\d+):(.*?)\}/is', 'Erster Wert:$1  -  zweiter Wert:$2', $content["all"]);

?>
Mit diesen beiden Tags aufrufen:

Code: Select all

{RT_TEST1:23:Tolle Sache}
{RT_TEST2:23:Tolle Sache}
Beim ersten Tag sollte nun am oberen Bildschirmrand folgendes erscheinen:

Code: Select all

Array
(
    [0] => {RT_TEST1:23:Tolle Sache}
    [1] => 23
    [2] => Tolle Sache
)
Der Zweite Tag wirft das hier aus

Code: Select all

Erster Wert:23 - zweiter Wert:Tolle Sache 
(dort wo er platziert ist).
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: [Css trick] Random background image

Post by pepe » Thu 25. Mar 2010, 00:33

Danke für eure freundliche Hilfe...
aber ich habe noch 7 weitere RTs im Render Ordner hocken.... und alle funktionieren perfektementi :roll:

Klar hatte ich beim Einkreisen des Fehlers auch mal alle rausgeschmissen (bis auf den neuen) ... aber leider NIX los ?

Merkwürdige Sache das :?: :?: :?:

Post Reply