Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Header Image & Screen Resolutions

Old Feb 22, 2009, 01:27 PM
25 posts · Feb 2009
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.
Old Feb 22, 2009, 04:03 PM
Flynn's Avatar
3,768 posts · Oct 2008
Munich, Germany
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); ?>

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

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


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] 2 little issues I'm having (no header image in firefox &amp; problem with page m andytaylor Header configuration & styling 3 Jun 8, 2009 04:14 AM
Image & Link in Sidebars stevemitch Sidebars & Widgets 2 May 11, 2009 12:11 PM
How do you get header Image(s) to automatically resize to the screen resolution? nkita Header configuration & styling 0 Mar 14, 2009 07:59 PM
Image distortion at high screen resolution bdisbrow Atahualpa 3 Wordpress theme 0 Mar 13, 2009 12:48 PM
Can't get logo and header image overlay to be centered on all screen resolutions jockoe Header configuration & styling 1 Feb 27, 2009 03:44 PM

All times are GMT -6. The time now is 08:36 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.