Wordpress Themes - WP Forum at BFA - Header Image & Screen Resolutions

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - Header Image & Screen Resolutions (http://forum.bytesforall.com/showthread.php?t=498)

Header Image & Screen Resolutions

I'm not sure if this is possible, but I thought I'd ask...

Is there any way that you can set up say 3 image files in the folder with different pixel widths, so that the appropriate one is delivered to the viewer's browser.

What I had in mind was having 3 versions of the header with widths of 1280, 1024 and 800. If the system could deliver 1280 as default to the viewer's browser, but if it detected a screen resolution width of 1024 or 800px, then it would deliver the alternative image file as appropriate.

I understand about how images are cropped if they don't fit, but what I have in mind above would allow for a complete image to be delivered to suit the viewer's browser.

Thanks again, in advance.

You could turn off the regular header image at A. Theme Options -> Header and in header.php right after

PHP Code:


		
			
<?php bfa_header_config($bfa_ata_configure_header); ?>

put:

HTML Code:

<img src="/wp-content/themes/atahualpa/images/header/<script type="text/javascript">document.write(screen.width);</script>.jpg alt="My site" />

and place 640.jpg, 800.jpg, 1024.jpg, 1152.jpg, 1280.jpg, 1440.jpg, 1600.jpg, 1680.jpg and 1920.jpg in
/wp-content/themes/atahualpa/images/header/

or to serve only for 800-1280 and use a default image "default.jpg" for smaller than 800 and bigger than 1280:

HTML Code:

<img src="/wp-content/themes/atahualpa/images/header/<script type="text/javascript">

if ((screen.width<800) OR (screen.width>1280)) { document.write('default'); }

else { document.write(screen.width); } </script>.jpg alt="My site" />

I'm not sure if this works, I'm not very fluent in Javascript