Smart Backgrounds support

Have you taken the Smart BG code out of tpl_main_page.php? There is no .smartBG class being generated for the body, therefore any styling that uses it will never be applied.

The foreground switching will not depend on the stylesheet to function. Ifyou read the new code, you will see that I reconfigured the names to smartimg_whatever.gif. You will have to use names built on that premise, or change the code back to smartbg_...

Almost there. It's calling the image from template_default though:

<div id="logo"><a href="http://www.ashbysonline.com/"><img src="includes/templates/template_default/images/smartimg_95" 

It's also leaving off the .gif extension.

So, the final step now is to get it to add the extension, and pull from the correct template image file, and I think that will do it.:happy:

Oh, and yes, I did go ahead and remove the code from tpl_main_page.php.

/images/smartimg_95"

It should be calling for the complete filename with extension:

/images/smartimg_95.gif"

It's not finding a file named smartimg_95 without extension in your template, so it's looking in /template_default/ (and not finding it there either.)

I missed some code when remaking the smartimg section from the smartbg. The tests look for the correct names, but the output only gives the filename without extension. Use this in place of the above:```php

<!--bof-branding display--> <div id="logoWrapper"> <?php //Smart Backgrounds - for foreground logo - 20080913 $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 smartimg_ and top cat id only if cat image exists $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartimg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.gif'))?'smartimg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath] . '.gif'):HEADER_LOGO_IMAGE; } elseif ($current_page_base == 'page' and $unique_ezpages == true) { //change filename to smartimg_page and ez-page id only if ez-page image exists $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartimg_page' . $_GET[id] . '.gif'))?'smartimg_page' . $_GET[id] . '.gif':HEADER_LOGO_IMAGE; } else { //change filename to smartimg_ and pagename only if page image exists $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartimg_' . $current_page_base . '.gif'))?'smartimg_' . $current_page_base . '.gif':HEADER_LOGO_IMAGE; //default/home page image will be as defined (HEADER_LOGO_IMAGE) }// /Smart Backgrounds?> <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir($smart_image, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $smart_image, HEADER_ALT_TEXT) . '</a>'; ?></div> ```

:clap::clap::clap:

Glenn, that was Perfect! Good call. Keeping in mind this was just a test page, and In about 20 minutes I'll be putting the regular logo back on this page, but take a look at your handy work HERE

I'm going to use this little mod (and you could call it a seperate mod) throughout my site very shortly also.

Thank you very much for your time, patience and hard work.

I LOVE THIS COMMUNITY!!!!:hug:

One last question. If I want to use jpeg or jpg's, can I do so by just changing all instances of .gif to .jpg, or whatever in this code?

Looking good!

Yes, the image type can be changed as you wish. You will have to keep it consistent - you could make all cats have gifs and all ez-pages have jpegs, but you can't have some cats with gifs and some with jpegs.

Thanks again Glenn.

Seriously though, you should package this up as another mod. It's so brilliantly simple. There are soooo many people looking for just this sort of thing.

I did think of one more question. Is there a way to add unique and individual alt text to each new logo as well? Or, is that asking too much:P?:blush:

Glenn, I've finished changing all my category logos. Thought you might want to take a look and see how well your mod works. I'd say it works perfectly!:bigups:

Very nice indeed!

It would actually be possible to tweak this code to allow individual alt text. The standard alt text is defined (probably in english.php) as HEADER_ALT_TEXT; definitions could be added for HEADER_ALT_TEXT_23, HEADER_ALT_TEXT_PAGE7, etc.
It would mean picking apart the code to make the distinctive part (like _23) and then add the smartimg and the .gif around it. Keeping the variable with the distinctive part, that variable could be appended to HEADER_ALT_TEXT in the last line:```php
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir($smart_image, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $smart_image, HEADER_ALT_TEXT . $smart_base) . '</a>'; ?></div>

Can you be a little more specific? Like, where do I add the line of code you showed above, and, will I have to create a seperate defines for each logo's alt text?

Yes, you would have to make a separate define for each logo alt. Just about every line of the code above would have to be reshuffled - not difficult, but will take a bit of work. I'll look at it in the next day or so.

Ok, cool. LOL, like I said, looks like you are well on your way to a new mod. :P One of the cleverest ones I've had the pleasure of using yet. And I'm the first kid on the street to have it too!:clap:

Hi Glenn,

Fantastic addon! works like a dream... Just need to be able to have smartbg work with sub categories aswell. Can you point me in the direction of the code for this or help in anyway ?

Each lady/model needs to be featured showing the products on sub categories aswell. Site design and build in progress here:
http://www.soukdesigns.com/shop

Thanks
Mark

The code is actually a little simpler to have backgrounds for each subcategory; if you do this, you do need to have a separate background image file for every subcat as well as their top cat, even if they are all identical.

Change thisphp 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]):''; to this:```php
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and cPath to bg filename only if (sub)cat bg image exists
$smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $GET[cPath] . '.gif'))?'' . $_GET[cPath]):'';

Name your images like smartbg_3.gif, smartbg_3_27.gif, smartbg_3_28.gif, etc.

Hi Glenn,

Thanks for your code. However when I replace as you've said, I refresh the homepage everything vanishes (the whole page, just left with background colour).

Will this happen if a smartbg image is missing; didn't even get to view a subcat page or is something else wrong?

Thanks again,
Mark

If a smartbg image is missing, the code is supposed to use the default background image, if any. It definitely could not cause an output error other than not having a background where one is supposed to be.

I double checked the code change just now; it appears to be correct.

Please post the whole "smartbg" section of your tpl_main_page.php, using ```
[php] and [/php]

I don't know if this is off topic or not but I am interested in just having an image as my background but have it stretched to match different resolutions. I would like to do this in css I have researched it throughout this forum but haven't found anything that worked or I am most likely doing something wrong. Here is the site in question...

http://www.wpc-consulting.com/~stxmill

The code I have right now in my css for this is as follows;

body {

	margin: 60px;

	font-family: verdana, arial, helvetica, sans-serif;

	font-size: 62.5%;

	color: #103808; 
	
	
	background-image: url(http://www.wpc-consulting.com/~stxmill/images/home_page/background.jpg);

	background-attachment:fixed;



	}

CSS background images do not stretch. They display at the pixel size they were created; if they are bigger than the container, they will get cut off at the edges, and if they are smaller, they will repeat to fill it, or leave blank space around if set to no-repeat.

The best way to make a background-image is to save it in the custom template folder
(/includes/templates/your_template/images/home_page_background.jpg) and use a relative url:
background-image: url(../images/home_page_background.jpg);

The absolute url you have will not work when the site is transferred to your client's domain and will have to be recoded. (Actually, it might work as long as you keep the image in the same location in your domain, but your client's site will be hotlinking back to your site to use it... not good.) The relative url works from the top of wherever it is, so is portable without editing.

Well the site is https://www.wpc-consulting.com/~stxmill because I am still working on it when it is done it will be its own url. So pretty much all the links and urls will be changed to match this. However my background does repeat or leaves blank space and if you have seen the background on the page it can't do that it won't look good. Are you saying my only solution is to make the image much larger?