Smart Backgrounds support

15 Dec 2007, 17:21

#1

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Smart Backgrounds support

Smart Backgrounds is now available in Downloads.

This mod allows you to use different header backgrounds for each top category or page.

If an image file is found for a category or page, the image will be displayed as the header background;
if not, the default (home page) background image will be displayed.

The feature may also be applied to any other element on the page independently, by moving and modifying the code appropriately (examples given in the readme).

It may also be used to switch foreground images in any element based on current top category or main page (code given in the readme).

I don't have spare hosting space for a demo site, so it would be good if someone who installs this would post a link to see it in action.

19 Dec 2007, 21:00

#2

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

I've been trying this out but can't seem to get it to work. I added the files and folders as indicated in the readme file, modifying the tpl_header.php according to the "- To use different header backgrounds for each top category or page:" info and modified the stylesheet_smartbg.css file to match the page and image names.

As I understand it, if I want a custom gif background for the following page:
someurl.com/index.php?main_page=index&cPath=1

Then I should name the image smartbg_1.gif and then add the following to the stylesheet_smartbg.css file:

#headerWrapper.smartBG_1 { background-image: url(../images/smartbg_1.gif);}

Is that right?

20 Dec 2007, 08:09

#3

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Smart Backgrounds support

Your filename and stylesheet declaration are correct. Did you save the file in /includes/templates/your_template/images/?

As the readme notes, the editing info is just for education; the edits have already been made to the file in the zip. If you did more editing, you could have broken something - I don't know what without seeing it. Your best bet is to re-upload that one file, replacing the current copy.

20 Dec 2007, 18:15

#4

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

I tried both modifying my custom tpl_header.php file and simply copying the one provided with the mod into includes/templates/MYSITE/common.

The images were uploaded to includes/templates/MYSITE/images.

The edited stylesheet_smartbg.css file was uploaded to includes/templates/MYSITE/css.

I also checked to make sure my smartbg_1.gif file was working right by renaming it to body_bg.gif, checking the site confirm, then renaming it back to smartbg_1.gif.

I'm using 1.3.7.1 with the mods Column Layout Grid and Stock by Attributes if that makes any difference.

20 Dec 2007, 20:05

#5

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Smart Backgrounds support

I don't think Column Grid should interfere with anything in $cPath. I don't know about Stock by Attributes, but that doesn't seem likely to be a problem.

What happens if you rename smartbg_1.gif to smartbg_shippinginfo.gif (and add a stylesheet declaration for it), and go to the shipping & returns page?

20 Dec 2007, 21:19

#6

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

I'm not using Shipping and Returns, but I just tried it with Contact Us and no luck. It still displays the usual background.

20 Dec 2007, 21:25

#7

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Smart Backgrounds support

What does your view source look like?
Can you paste in the area of it around

<div id="headerWrapper" class="smartBG_1">

If this line doesn't read like this, there is something wrong with the $current_page_base retrieval.
A link to your site would make diagnosis easier.

20 Dec 2007, 21:52

#8

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

<div id="headerWrapper" class="smartBG_contact_us">


The site isn't finished yet, and the client wanted to keep it offline until it is, but I'll talk to him about the situation and see if it's okay.

20 Dec 2007, 22:02

#9

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

I got the okay to turn the site on for you to look at. I sent you the URL via private message . Thanks for your help!

20 Dec 2007, 22:30

#10

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Smart Backgrounds support

Nice looking site. I may have identified the problem. Exactly where and what size is the background image supposed to be? You have

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: no-repeat;
	background-color: #000000;
	height:65px;
	}

The background-color will cover any header background that is behind it.

20 Dec 2007, 22:45

#11

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

I'm actually trying to change the overall background of the page, not the header. The default background I'm using is a 10x758 black-to-blue gradient called body_bg.gif that matches the blue defined below. The background I'm trying to swap in is a 1024x553 badge image called smartbg_contact_us.gif. Yeah, I know such a large image is bad, but that's what he wants... :huh:

[PHP]
/*wrappers - page or section containers*/
#mainWrapper {
background-image: url(../images/body_bg.gif);
background-repeat: repeat-x;
background-color: #0700D2;
}
[/PHP]

20 Dec 2007, 23:13

#12

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Smart Backgrounds support

The code located in tpl_header.php can only affect the header area. To apply it to the whole page, you will need to move the code.

Does the top part of the gif look like the regular header? If so, it could be switching and the change not be visible, because it is cut off below the header.

You will want to edit /includes/templates/your_template/common/tpl_main_page.php. Near the top, find[php]
}
?>

<div id="mainWrapper">
<?php
/ **
* prepares and displays header output[/php]and change

<div id="mainWrapper">

to this:[php]

<?php $smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
$smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?'_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):'';
} else { //add _ and page base to bg filename only if page bg image exists
$smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $current_page_base . '.gif'))?'_' . $current_page_base:'';
}?>

<div id="mainWrapper" class="smartBG<?php echo $smart_image;?>">
[/php]and change the stylesheet to match, with #mainWrapper instead of #headerWrapper.

20 Dec 2007, 23:47

#13

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Smart Backgrounds support

I see you're working on it. Commenting out the original line isn't working the way you have it:[html]<div id="mainWrapper" class="smartBG_contact_us">
/* Code block above replaced: <div id="mainWrapper"> */[/html]You need to use HTML comment tags [html]<div id="mainWrapper" class="smartBG_contact_us">
[/html]

OK, you have that now.

21 Dec 2007, 00:10

#14

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

That did it! It's now working in Contact Us and the US Marshals category. Sorry for being such a n00b.

I have two remaining questions:

1) How would I get this working on EZpages, like the Artist Biography one? I'm guessing there is a different template file I need to copy the code into, but I'm not sure which one.

2) Since I'm using only one special background image, is it possible to define just one image name (like "smartbg_special.gif") that could be used on multiple pages, rather than taking the same image and renaming it after the page identifier?

21 Dec 2007, 00:14

#15

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

gjh42:
You need to use HTML comment tags

Thanks! I got stuck in CSS mode...

21 Dec 2007, 01:04

#16

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Smart Backgrounds support

That's happened to me more than once when switching between languages...

It would be easy enough to change the logic for that task. You would want to check $current_page_base against a list of pages:[php]

<?php $smart_image = '';
if (in_array($current_page_base,explode(",",'list_pages_to_show_custom_bg_on_here,separated_by_commas,and_no_spaces')) ) {
$smart_image = '_badge';
}?>

<div id="mainWrapper" class="smartBG<?php echo $smart_image;?>">[/php]

For ez-pages, the base is "page"; to get specific ones and not others, you would need to run a subsidiary check on the page id:
if ($current_page_base == 'page' and $_GET['id'] == 7) {

}

21 Dec 2007, 02:38

#17

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

Thanks! The single-image aspect of this appears to be working, and the Contacts page works, but not the Marshals one (index.php?main_page=index&cPath=1).

I do want to have the special background appear on certain EZpages only, so I added that additional code as well, although I'm not sure if it's in the right spot since I don't know PHP. I'm also not sure what to put into the code below to specify the EZpage I want, Author Biography (index.php?main_page=page&id=5&chapter=0).

Here's what I have in tpl_main_page.php:
[PHP]

<?php $smart_image = '';
if ($current_page_base == 'page' and $_GET['id'] == 7) {
}
if (in_array($current_page_base,explode(",",'contact_us,1')) ) {
$smart_image = '_badge';
}?>

<div id="mainWrapper" class="smartBG<?php echo $smart_image;?>">
[/PHP]

Here's what's in the stylesheet_smartbg.css file:
[PHP]#mainWrapper.smartBG_badge { background-image: url(../images/smartbg_badge.gif);}[/PHP]

21 Dec 2007, 03:25

#18

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Smart Backgrounds support

You do want category bg function as well as main pages and specific ez-pages, so it will take a combination of the if tests posted here.[php]
<?php $smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
$smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?'_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):'';
} elseif (in_array($current_page_base,explode(",",'contact_us')) or ($current_page_base == 'page' and ($_GET['id'] == 5))) {
$smart_image = '_badge';
}?>

<div id="mainWrapper" class="smartBG<?php echo $smart_image;?>">[/php]The explode is not necessary for a single page name, but will be useful if you want more. Likewise, if you want more ez-pages, you can duplicate the $_GET['id'] == 5 like
($_GET['id'] == 5 or $_GET['id'] == 8)

You will need smartbg_1.gif image files for each category desired, and one smartbg_badge.gif for the rest.

21 Dec 2007, 05:12

#19

otakushark

New Zenner

Join Date:: Dec 2007
Posts:: 45
Plugin Contributions:: 0

Re: Smart Backgrounds support

Thank you so much! Everything is working now, and I was able to set it up to display on the desired pages no problem.

I really appreciate the extra time you took to walk a newbie like me through the process. Thanks again!

27 Dec 2007, 21:04

#20

francocauter

Zen Follower

Join Date:: Jun 2007
Posts:: 153
Plugin Contributions:: 0

Re: Smart Backgrounds support

Hi Glenn
I would like to put 3 different images in the main background.
header-top-right, right, and footer-bottom-right
I think I have an idea how to do this but I need help. I think I need to setup some <div> & class.
Do I put the <div>s in the tpl_main_page.php?
Thanks in advance
Regards
Franco