CSS background image controlled by phpWcms

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

CSS background image controlled by phpWcms

Post by jsw_nz »

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.

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

Re: CSS background image controlled by phpWcms

Post by flip-flop »

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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
Oliver Georgi
Site Admin
Posts: 9720
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: CSS background image controlled by phpWcms

Post by Oliver Georgi »

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 */
}
-->
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Re: CSS background image controlled by phpWcms

Post by jsw_nz »

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
:D
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: CSS background image controlled by phpWcms

Post by flip-flop »

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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
jsw_nz
Posts: 907
Joined: Fri 2. Apr 2004, 02:42
Location: New Zealand

Re: CSS background image controlled by phpWcms

Post by jsw_nz »

Thanks Guys

I used Olivers solution - which is simply - elegant :D

all best
-j-
Post Reply