CSS background image controlled by phpWcms

From CSS background image controlled by phpWcms:

I have a project where the client wants to be able to change the background image on a page (it will be wider than the container div).
The css will be given a top center alignment applied to the body tag. The overall page container div will be a standard 960px. She wants to be able to change the background image from time to time via an image contentpart interface (wcms backend). Has anybody done this via the css injection method.

So basically it would be a custom written template for an image contentpart that would inject the appropriate css to overwrite the standard css for the body tag. Hope this is clear…



Docu: –
Forum: CSS background image controlled by phpWcms

Author: K.Heermann (flip-flop) http://planmatrix.de 2011/03/20
CMS version: >= V1.40
Version: V1.0
Update:

Tag:

Filename: backgound_image.tmpl
Folder: /template/inc_cntpart/images/

Condition:/config/phpwcms/conf.inc.php

  • $phpwcms['allow_cntPHP_rt'] = 1;



Solution:

1. Write a CP “image <div>” in a hidden area.

phpwcms < r411

2. Template for CP “image <div>”

<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; settings will overwrite CP settings
;width         = 100
;height         = 100
col         = 1
zoom         = 1
;crop         = 0
space         = 0
lightbox      = 1
nocaption      = 1
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
;center_image   = 0
 
<!--IMAGE_SETTINGS_END//-->
 
<!--IMAGES_ENTRY_START//-->
[PHP]
   /* Hm I want to overwrite some default CSS */
   $GLOBALS['block']['custom_htmlhead']['mycss']  = '  <style type="text/css">' . LF . '  <!--' . LF;
   $GLOBALS['block']['custom_htmlhead']['mycss'] .= '   body { ' . LF;
//   $GLOBALS['block']['custom_htmlhead']['mycss'] .= '      background: #F9E931 url({IMAGE_REL}) no-repeat left top !important;' . LF;
   $GLOBALS['block']['custom_htmlhead']['mycss'] .= '      background: #F9E931 url(filearchive/{IMAGE_HASH}.jpg) no-repeat left top !important;' . LF;
   $GLOBALS['block']['custom_htmlhead']['mycss'] .= '   }';
   $GLOBALS['block']['custom_htmlhead']['mycss'] .= LF . '  //-->' . LF . '  </style>';
[/PHP]
   <!--
      Thumbnail image:    {THUMB_NAME}
        relative:         {THUMB_REL}
        absolute:         {THUMB_ABS}
        height/width:     {THUMB_HEIGHT}px/{THUMB_WIDTH}px
        height/width max: {THUMB_HEIGHT_MAX}px/{THUMB_WIDTH_MAX}px
        columns:          {THUMB_COLUMNS}
        image ID:         {IMAGE_ID}
        image Hash:       {IMAGE_HASH}
 
      If you are not sure wrap zoomed image:
      [ZOOM]
      Zoomed (big) image: {IMAGE_NAME}
        relative: {IMAGE_REL}
        absolute: {IMAGE_ABS}
        height/width: {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px
      [/ZOOM]
 
   //-->
<!--IMAGES_ENTRY_END//-->

Delete what you do not need.


Please have a closer look to this two lines:

//   $GLOBALS['block']['custom_htmlhead']['mycss'] .= '      background: #F9E931 url({IMAGE_REL}) no-repeat left top !important;' . LF;
   $GLOBALS['block']['custom_htmlhead']['mycss'] .= '      background: #F9E931 url(filearchive/{IMAGE_HASH}.jpg) no-repeat left top !important;' . LF;


phpwcms >= r411

2. Template for CP “image <div>”

<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; settings will overwrite CP settings
;width         = 100
;height         = 100
col         = 1
zoom         = 1
;crop         = 0
space         = 0
lightbox      = 1
nocaption      = 1
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
;center_image   = 0
 
<!--IMAGE_SETTINGS_END//-->
 
<!--IMAGES_ENTRY_START//-->
 
   <!-- CSS : body {background: #F9E931 url({IMAGE_REL}) no-repeat left top !important;} -->
   <!-- CSS: body {background: #F9E931 url(filearchive/{IMAGE_HASH}.jpg) no-repeat left top !important;} -->
 
   <!--
      Thumbnail image:    {THUMB_NAME}
        relative:         {THUMB_REL}
        absolute:         {THUMB_ABS}
        height/width:     {THUMB_HEIGHT}px/{THUMB_WIDTH}px
        height/width max: {THUMB_HEIGHT_MAX}px/{THUMB_WIDTH_MAX}px
        columns:          {THUMB_COLUMNS}
        image ID:         {IMAGE_ID}
        image Hash:       {IMAGE_HASH}
 
      If you are not sure wrap zoomed image:
      [ZOOM]
      Zoomed (big) image: {IMAGE_NAME}
        relative: {IMAGE_REL}
        absolute: {IMAGE_ABS}
        height/width: {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px
      [/ZOOM]
 
   //-->
<!--IMAGES_ENTRY_END//-->

Delete what you do not need.


Please have a closer look to this two lines:

   <!-- CSS : body {background: #F9E931 url({IMAGE_REL}) no-repeat left top !important;} -->
   <!-- CSS: body {background: #F9E931 url(filearchive/{IMAGE_HASH}.jpg) no-repeat left top !important;} -->


In both examples:

… the first (disabled) line by "//" or "CSS :" uses an image with the max. x/y from config

$phpwcms['img_prev_width'] =  XXX
$phpwcms['img_prev_height'] = YYY


- The second line uses the original uploaded image from filearchive. But you must disable the .htaccess in this folder and the .ext is fixed in script.


- If more than one image is specified in the CP, the last one is winning the race. This can be beneficial, so multiple images are in the CP and the desired is simply pushed down.
But in the second example, the script writes the CSS statements for each image into the HEAD area. The last statement wins.


Insert this CP with {SHOW_CONTENT:CP,XX} into yout layout.


english/phpwcms-system/article/contentparts/images-div/background-image.txt · Last modified: 2011/03/21 12:23 by Knut Heermann (flip-flop)
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