Smart Backgrounds support

[gjh42]

The code in your post 147 puts the appropriate filename into $menubg.

The code in post 149 would replace that, building the filename a bit at a time.
First the login-or-not part, then a part denoting the page, category, ez-page, etc. and the file extension (.gif) is built and added to the first part.
It needs another tweak to replace the default logo filename

<?php if ($_SESSION['customer_id']) { 
                        
                        $menubg = 'topmenubg_';
                        
              } else {
                if (STORE_STATUS == '0') {
                    
                    $menubg = 'topmenubg_login_';
                    
        } } ?>

<?php //Smart Backgrounds - for foreground logo - 20081212
$smart_image = '';
$unique_ezpages = true;//change to false to not have diff bg for each ezpage
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //change filename to $menubg and top cat id only if cat image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . $menubg . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?$menubg . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath] . '.gif'):'.gif';
} elseif ($current_page_base == 'page' and $unique_ezpages == true) { //change filename to $menubg_page and ez-page id only if ez-page image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . $menubg . 'page' . $_GET[id] . '.gif'))?$menubg . 'page' . $_GET[id] . '.gif':'.gif';
} else { //change filename to $menubg and pagename only if  page image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . $menubg . $current_page_base . '.gif'))?$menubg . $current_page_base . '.gif':'.gif'; //default/home page image will be as defined ($menubg.gif)
}// /Smart Backgrounds

$menubg .= $smart_image;?>

You would then do whatever you want with the resulting filename.

The image files would be named according to a system:

- for the default cases:
topmenubg_.gif
topmenubg_login_.gif

- for category or product pages:
topmenubg_3_25.gif
topmenubg_login_3_25.gif

- for ez-pages:
topmenubg_page23.gif
topmenubg_login_page23.gif

- for other pages:
topmenubg_pagename.gif
topmenubg_login_pagename.gif

[Sawhorse]

Glen,
First, thank you for the information provided. It has taken me a bit of time to get my images set up for the new about_us page. So, my reply has not been timely. Sorry for the delay.

Since the main image is from a photograph (jpg) my thought process was to make the slices all jpg (no gif). Currently my defaults include both jpg and gif images.

Originally I had the thought that I could use the ZC css procedure noted in readme_css_system.html to make my header change. Thus, to get a new header for my about_us page I would make a new css file about_us.css and put in the new header information i.e. headerbg_about.us.jpg. I would then modify the common/tpl_main_page.php to handle the change necessary for the about_us defined page. However, since I am a novice programmer I thought your smart background – with your modification for foreground images might be the better “smart” way to go.

Currently, I have 4 default slices that I need to deal with:

a. headerbg.jpg 877x152px
b. topmenu.gif 666x44 px
c. topmenu_login.gif 666x44 px
d. searchbox.jpg 211x44 px

(As you know topmenu.gif and topmenu_login.gif switch based on [FONT=Arial]STORE_STATUS [/FONT][FONT=Arial]== [/FONT][FONT=Arial]'0'[/FONT]

I have made 4 new slices for my about_us page:

a. headerbg_about_us.jpg 877x152px
b. topmenu_about_us.jpg 666x44 px (note the change from default gif to jpg)
c. topmenu_login_about_us.jpg 666x44 px (note the change from default gif to jpg)
d. searchbox_about_us.jpg 211x44 px

I have added your new css file stylesheet_smartbg.css in the appropriate directory.
The exact code is as follows:

    /* stylesheet declarations: */
   
  /*set default header bg*/
  #headerWrapper {background-image: url(../images/headerbg.jpg);}
  
  /* set header bg for about_us defined page */
  
  .smartBG_about_us #headerWrapper {background-image: url(../images/headerbg_about_us.jpg);}

You will note that I have not added the smartbg_ prefix to the images. If it is necessary please let me know.

My tpl_main_page.php is a bit different than the standard tpl_main_page.php. I have included the code below. Because it is different I believe that the great code you provided may not work in my special situation. Could you look and let me know how to proceed?

// the following IF statement can be duplicated/modified as needed to set additional flags
  if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes_on_here,separated_by_commas,and_no_spaces')) ) {
    $flag_disable_right = true;
  }


  $header_template = 'tpl_header.php';
  $footer_template = 'tpl_footer.php';
  $left_column_file = 'column_left.php';
  $right_column_file = 'column_right.php';
  $body_id = str_replace('_', '', $_GET['main_page']);
?>
<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>

<!-- Added a container div to hold all page information -->
<!-- Including bottom footer info and banners -->
<!-- mainWrapper now has a background applied to it -->
<div id="container">

<!-- begin mainWrapper -->
<div id="mainWrapper">
<!-- begin header/logo area -->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
</div>
<!-- end logoWrapper --></div>
<div id="navigation">

    <!-- Begin Search --><div id="search">
    <div id="searchbox"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
    <!-- End Search --></div>
    
    <!-- begin top navigation -->
    
        <?php if ($_SESSION['customer_id']) { 
                        
                        $menubg = 'topmenubg.gif';
                        
              } else {
                if (STORE_STATUS == '0') {
                    
                    $menubg = 'topmenubg_login.gif';
                    
        } } ?>
        
    <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>
    
<!-- end navigation wrapper --></div>

<!-- begin content Main wrapper -->
<div id="contentMainWrapper" class="clearfix">

<div id="right">
    <div id="center">
    <div><!-- bof  breadcrumb --><?php if (DEFINE_BREADCRUMB_STATUS == '1') { ?>
    <div id="navBreadCrumb">You Are Here>&nbsp;<?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
    <?php } ?>
    <!-- eof breadcrumb --></div>
    
    <div><?php
      if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) {
    if ($banner->RecordCount() > 0) {
    ?>
    <div id="bannerThree" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
    <?php
        }
      }
    ?>

    <?php
     /**
      * prepares and displays center column
      *
      */
    require($body_code); ?><br />

    <?php
      if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
    if ($banner->RecordCount() > 0) {
    ?>
    <div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
    <?php
        }
      }
    ?></div>
    <!-- end center --></div>
    
<!-- end right --></div>


<div id="left">
<div id="navColumnOne" >
<?php
if (COLUMN_LEFT_STATUS == 0 or (CUSTOMERS_APPROVAL == '1' and $_SESSION['customer_id'] == '')) {
  // global disable of column_left
  $flag_disable_left = true;
}
if (!isset($flag_disable_left) || !$flag_disable_left) {
?>

<?php
 /**
  * prepares and displays left column sideboxes
  *
  */
?>
<div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div>

<?php
}
?>

<!-- End navColumnOne --></div>
<!-- end left --></div>

<!-- end content Main wrapper --></div>

<!-- begin bottom navigation -->
<div id="bottomnav">
    <div id="navSuppWrapper">
    <div id="navSupp">
    <ul>
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?>&nbsp;::&nbsp;</a></li>
    <?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
    <li><?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?></li>
    <?php } ?>
    </ul>
    </div>
    <!-- end navSuppWrapper --></div>
<!-- end bottom navigation --></div>


<!-- end mainWrapper --></div>

<!-- begin footer -->
<div>

    <div id="copyright">
    <?php
    /**
    * prepares and displays footer output
    *
    */
    require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');?>
    <!-- end copyright --></div>

    <!-- Begin footer --><div id="footer">
    <!--bof- parse time display -->
    <?php
    if (DISPLAY_PAGE_PARSE_TIME == 'true') {
    ?>
    <div class="smallText center">Parse Time: <?php echo $parse_time; ?> - Number of Queries: <?php echo $db->queryCount(); ?> - Query Time: <?php echo $db->queryTime(); ?></div>

    <?php
      }
    ?>
    <!--eof- parse time display -->
    <!--bof- banner #6 display -->
    <?php
    if (SHOW_BANNERS_GROUP_SET6 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET6)) {
    if ($banner->RecordCount() > 0) {
    ?>
    <div id="bannerSix" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
    <?php
        }
      }
    ?>
    <!--eof- banner #6 display -->
    <!-- end bottom --></div>

<!-- End container -->
</div>
</div>
</body>

Any help would be appreciated.

If you wish you can see a little of what I am trying to do using the about_us.css file and loading the new headerbg_about_us.jpg url is http://sawhorsejewelry.com/index.php?main_page=about_us

Sawhorse

[gjh42]

The smartbg code in tpl_main_page.php is only used to create a class tag for the page body. You can insert it just above the

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

and insert the class= etc. code into the <body... line as in the smartbg version of tpl_main_page.php.

If you are using the per-page stylesheet for background image switching, you may not need the smartbg code in tpl_main_page.php.

[Sawhorse]

Glen,
I am working on the conversion to Smart Backgrounds, however, I may not have given you enough information. Below is a picture map of the four slice locations that I need to change when I change pages. At this time I am only changing the about_us defined page. [IMG]file:///C:/DOCUME%7E1/Robert/LOCALS%7E1/Temp/moz-screenshot.jpg[/IMG]

I do not think I have enough arguments in the code to handle these 4 slices.

Could you review?

Sawhorse

[Sawhorse]

Using the current code I do not have my buttons across the top. Just white space.

[Sawhorse]

Also, when I remove the about_us.css file I get the original headerbg.jpg file rather than headerbg_about_us.jpg on the about_us page.

Sawhorse

[Sawhorse]

Also, I know I have file extension issues (gif vs jpg) for the topmenubg.gif & topmenubg_login.gif but using the current gif code I believe I should see a good home page.

Sawnhorse

[Sawhorse]

Additional information:

layout.css calls headerbg.jpg

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

colors.css calls searchbox.gif

    #search { background-image: url(../images/searchbox.gif); background-repeat: no-repeat; }

tpl_main-page_php calls topmenubg.gif and topmenubg_login.gif

    <!-- begin top navigation -->
              
                          <?php if ($_SESSION['customer_id']) { 
                                                                          
                                                                          $menubg = 'topmenubg.gif';
                                                                          
                                } else {
                                  if (STORE_STATUS == '0') {
                                      
                                      $menubg = 'topmenubg_login.gif';
                                      
                          } } ?>

There is very little of the new image on the searchbox.gif. One could just leave it alone and just do the three slices. (I am thinking out loud now)

I do not know - maybe what I am trying to do is not possible. Or the way the page is configured it is not conducive to replacing page headings.

Sawhorse

[gjh42]

I think you need to decide what range of functionality you are going to want for image switching. Aside from the login difference, are you going to want to account for any pages that you cannot do with separate css files? It seems you are scattering your control - is there any of those images that needs to be a foreground image, or could they all be backgrounds?

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.

It could also be 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).

[Sawhorse]

I have made both topmenubg_about_us and topmenubg_login_about_us gif so that both the default and the about_us are now gif.

Sawhorse