Smart Backgrounds support

[Sawhorse]

Glen,
1) You asked: Aside from the login difference, are you going to want to account for any pages that you cannot do with separate css files?
Answer: First, I thought that I could only override the headerbg.jpg image in the separate css files. (I believe that I would also need to override the searchbox.gif image)

2) You asked: is there any of those images that needs to be a foreground image, or could they all be backgrounds?
Answer: Since I am a novice I do not know the difference. If you could tell me the difference I could then answer.

I assume you asked the foreground/background question because of your two followup statements.

A. The code in post 151 will handle one foreground image filename, though it would be simple to apply it to several images that switch in the same way. It does need to be used as a unit exactly as I posted it, replacing the few lines of your original code as noted. With a little modification, it could be used to switch both gif and jpeg files.

B. "... tweaked to give unique body class names in tpl_main_page.php, and handle all the image switching as backgrounds without any additional stylesheets (all the alternate bg names would go in the main stylesheet)."

So, I guess my response foreground or background will mostly depend on what the differences are between the two.

So, why use one over the other?

Sawhorse

[gjh42]

A foreground image is one that is called with an <img> tag, and is itself a tangible entity on the page with dimensions that can affect the rest of the page.
A background image is called in the stylesheet or by a style: parameter in the code. It doesn't give a size to the element where it resides.

Looking at your view source, I see that you are using the generated filenames to code background images, not foreground images. There is really no need to do this; you can use the smartbg code in tpl_main_page.php with the addition of the login code to set an appropriate body class, and then switch all of the bg images with the stylesheet. The rest of your files can ignore image filenames.

In order for the main smartbg classes to be generated, image filenames do need to exist corresponding to the class names. You need one image for each page you want to switch, for checking; other images can also be switched, but will not be checked for existence.

Will any images beside #navMain change depending on login status? If not, you can keep that check out of tpl_main_page and localized in tpl_header.php.

[Sawhorse]

Glen,

I am glad that you can tell that ...Looking at your view source, I see that you are using the generated filenames to code background images, not foreground images. There is really no need to do this. I of course can not tell this (novice you know). ;-)

You asked: Will any images beside #navMain change depending on login status?

Answer: No, no other images will change based on login status.

Does moving the the check out of tpl_main_page and localized in tpl_header.php provide better code efficiency?

I believe I currently have one image (a set of 4 images) for each page I want to switch. Currently the only page is about_us.

Were do we go from here?

Sawhorse

[gjh42]

Moving the login check to tpl_header.php means more filename efficiency. Class names can be switched based only on the page for most elements, and an added class name can be used to further control the #navMain bg.

Considering that there are multiple pages as well as the one login element to account for, I think it will be most efficient to do all of the image switching with stylesheets.

The advantage of Smart BG is that all of the changes can be handled on one stylesheet, making coordination simpler, and individual ez-page backgrounds can be handled without other mods; the advantage of per-page stylesheets is that backgrounds relevant to a page are separated on their own stylesheet.
The more different style elements will change per page, the more reasonable it is to go with per-page stylesheets. You have three elements that will change backgrounds (and one of them has two sub-variants), so it is a tossup. Will you be wanting any different backgrounds on different ez-pages? How many pages will you ultimately be switching for?

[Sawhorse]

Moving the login check to tpl_header.php means more filename efficiency. Class names can be switched based only on the page for most elements, and an added class name can be used to further control the #navMain bg.

Good to know-I would not know how to do, but I appreciate your knowledge.

You asked: Will you be wanting any different backgrounds on different ez-pages? How many pages will you ultimately be switching for?
Answer: My current intent is to only change the about_us page. I see no reason to change any ez-page backgrounds. I tend to want to use defined pages anyway - it is my understanding that they are better SEO. Again, currently just about_us defined page.

So, what is your verdict Smart BG or per-page stylesheets?

Sawhorse

[gjh42]

Either way would work fine. Since this is the Smart BG support thread, I will go over how to use that. A relatively small number of pages means not too much space taken up in the one stylesheet where everything is handled.

As you already have mods in your tpl_main_page.php, you can just replace this line

<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

with this:

<?php //Smart Backgrounds
$smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to classname 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 ($current_page_base == 'page') { //add _page and ez-page id to classname only if ez-page id bg image exists, else add _page to classname only if general ez-page bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page' . $_GET[id] . '.gif'))?'_page' . $_GET[id]:(file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page.gif')?'_page':'');
} else { //add _ and page base to classname only if page bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $current_page_base . '.gif'))?'_' . $current_page_base:''; //default/home page classname will be just .smartBG, and filename smartbg.gif
}// /Smart Backgrounds?>
<body id="<?php echo $body_id . 'Body'; ?>" class="smartBG<?php echo $smart_image;?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

Rename one set of your images with smartbg_ names so they will be detected and the page class will be set. If you want to use jpegs, change all instances of .gif above to .jpg.

Say headerbg.jpg > smartbg.jpg, headerbg_about_us.jpg > smartbg_about_us.jpg, etc.

You have separated many properties out into layout.css and colors.css, but this in layout.css mixes them again:
#logoWrapper { width: 100%; height: 153px; background-image: url(../images/headerbg.jpg); background-repeat: no-repeat; position: relative; }
To be consistent, pull the background out of that rule and make one in colors.css like this:
#logoWrapper { background-image: url(../images/smartbg.jpg); background-repeat: no-repeat; }

Put all of the new background rules in colors.css.

.smartBG_about_us #logoWrapper { background-image: url(../images/smartbg_about_us.jpg); background-repeat: no-repeat; }

I'll go over the login class in the next post.

[gjh42]

<?php if ($_SESSION['customer_id']) { 
                        
                        $menubg = 'topmenubg.jpg';
                        
              } else {
                if (STORE_STATUS == '0') {
                    
                    $menubg = 'topmenubg_login.jpg';
                    
        } } 
?>

I am not sure this logic will always do what you want.
If there is a logged-in customer, you get 'topmenubg.jpg'.
Otherwise if store status is 0 (regular store), you get 'topmenubg_login.jpg'.
If store status is anything else, you get no background image at all.

Try a strict either/or:

<?php
     if (STORE_STATUS == '0' and !$_SESSION['customer_id']) { 
            $menubg = 'topmenubg_login.jpg';
     } else {
            $menubg = 'topmenubg.jpg';
     } 
?>

The only time you want the login bg is if it is a regular store with no logged-in customer.

Now scrap the filenames so the stylesheet can handle all the permutations. Build a class name instead, and add that to the #navMain div:

<?php
     if (STORE_STATUS == '0' and !$_SESSION['customer_id']) { 
            $menuclass = 'login';
     } else {
            $menuclass = 'noLogin';
     } 
?>
<div id="navMain" class="<?php echo $menuclass;?>">

In colors.css:

#navMain.login { background-image: url(../images/topmenubg_login.jpg); background-repeat: no-repeat; }
#navMain.noLogin { background-image: url(../images/topmenubg.jpg); background-repeat: no-repeat; }
.smartBG_about_us #navMain.login { background-image: url(../images/topmenubg_login_about_us.jpg); background-repeat: no-repeat; }
.smartBG_about_us #navMain.noLogin { background-image: url(../images/topmenubg_about_us.jpg); background-repeat: no-repeat; }

[Sawhorse]

OK, smartbg it is.

I replace as indicated in my tpl_main_page.php (It did look very similar to your original code)

I renamed the set of images for the about_us page with
smartbg_ prefix as follows:

smartbg_headerbg_about_us.jpg
smartbg_searchbox_about_us.gif
smartbg_topmenubg_about_us.gif
smartbg_topmenubg_login_about_us.gif

Please note that I am following the default pattern of image file extensions. The default header is jpg the rest are gif. Do I need to change the headers to gif. - it may take me a bit to do so if I must).

I committed out in layout.css :
#logoWrapper { width: 100%; height: 153px; background-image: url(../images/headerbg.jpg); background-repeat: no-repeat; position: relative; }

I then added logoWrapper to colors.css like this:
#logoWrapper { background-image: url(../images/smartbg.jpg); background-repeat: no-repeat; }

I also put all of the new background rules in colors.css.
.smartBG_about_us #logoWrapper { background-image: url(../images/smartbg_about_us.jpg); background-repeat: no-repeat; }

I think I have it completed.

Sawhorse

[gjh42]

The Smart BG code I posted is the latest version not yet published; it automatically (without manually setting a flag in the code) accounts for individual ez-page bg images, or a generic ez-page bg, or the default bg. Not really relevant to your case, but might be of interest to some reading this. If anyone wants to test it, please let me know how it works.

You only need to name the images for one location per the smartbg convention; the others will be individually called out in the stylesheet and can be named whatever you want.

You don't want smartbg_headerbg_about_us.jpg, but smartbg_about_us.jpg.

Rename headerbg.jpg to smartbg.jpg.


You didn't comment out the whole
#logoWrapper { width: 100%; height: 153px; background-image: url(../images/headerbg.jpg); background-repeat: no-repeat; position: relative; }
in layout.css, did you?
It should still have
#logoWrapper { width: 100%; height: 153px; position: relative; }

[Sawhorse]

OK, on part of you last post.

In tpl_main_page.php I changed the login/logout code to a strict either/or. (That was easy)

You indicated "Now scrap the filenames so the stylesheet can handle all the permutations. Build a class name instead, and add that to the #navMain div:"

I am a bit confused. Are you saying to delete the following code.

    <div id="navMain" style="background-image: url(includes/templates/Series_12_Horses/images/<?= $menubg; ?>); background-repeat: no-repeat;">
        <a href="/"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Home Page" width="156" height="44" border="0" /></a>
        
        <?php if ($_SESSION['customer_id']) { ?>
        
        <a href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="My Account" width="94" height="44" border="0" /></a>
        <a href="index.php?main_page=logoff"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Log Out" width="70" height="44" border="0" /></a>
        
                <?php
              } else {
                if (STORE_STATUS == '0') {
            ?>

        <a href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="My Account" width="94" height="44" border="0" /></a>
        <a href="index.php?main_page=login"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Log In" width="70" height="44" border="0" /></a>
        
        <?php } } ?>
        <a href="index.php?main_page=shop"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Shop On Line" width="50" height="44" border="0" /></a>
        <a href="index.php?main_page=shopping_cart"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Shopping Cart" width="100" height="44" border="0" /></a>
        <a href="index.php?main_page=checkout_shipping"><img src="includes/templates/Series_12_Horses/images/spacer.gif" alt="Checkout Now" width="80" height="44" border="0" /></a>
    <!-- end top nav --></div>

And replace it with:

 <?php
     if (STORE_STATUS == '0' and !$_SESSION['customer_id']) { 
            $menubg = 'topmenubg_login.jpg';
     } else {
            $menubg = 'topmenubg.jpg';
     } 
?>

I added the background code to colors.css

Other than the one question above I also have another one.
I notice that all the image extensions are jpg not gif is there are reason?

Sawhorse