CSS background image controlled by phpWcms

jsw_nz · Post by **jsw_nz** » Sun 20. Mar 2011, 04:58

Hi All,

Been away from phpWcms for some time and need a refreshing.

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...

Just trying to remember the expression to use.....

Thanks in advance - best wishes fo Oliver and the community.

Post by **flip-flop** » Sun 20. Mar 2011, 10:57

Hi,

have a look: Script into <head> area

- Write a CP "image <div>" in a hidden area.

Template for CP "image <div>"

Code: Select all

<!--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:

Code: Select all

//   $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;

First (disabled) line uses an image with the max. x/y from config

Code: Select all

$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.

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

The same im wiki: CSS background image controlled by phpWcms

Knut

Post by **Oliver Georgi** » Mon 21. Mar 2011, 04:12

phpwcms as available in repository can handle CSS definitions without inline PHP. This is cleaner and more simple:

Just try in a template and you will understand:

Code: Select all

<!-- CSS: body {/* whatever you need here */} -->

or multiple lines

Code: Select all

<!-- CSS:
body {
/* whatever you need here */
background-image: url({IMAGE_ABS});
}
#header {
/* inject me */
}
-->

jsw_nz · Post by **jsw_nz** » Mon 21. Mar 2011, 17:18

Hi Knut and Oliver,
thanks for both of your replies - i will try it out tonight.

re: Oliver: phpwcms as available in repository
Is this the standard version or a new release candidate beta
ie - would r403 handle this?

cheeers

Post by **flip-flop** » Mon 21. Mar 2011, 18:15

I have described both methods in the wiki.

I think Olivers solution is running since r411.

Download of the newest version: http://code.google.com/p/phpwcms/downloads/list

Knut

jsw_nz · Post by **jsw_nz** » Sat 26. Mar 2011, 20:15

Thanks Guys

I used Olivers solution - which is simply - elegant

all best
-j-

CSS background image controlled by phpWcms

CSS background image controlled by phpWcms

Re: CSS background image controlled by phpWcms

Re: CSS background image controlled by phpWcms

Re: CSS background image controlled by phpWcms

Re: CSS background image controlled by phpWcms

Re: CSS background image controlled by phpWcms