[SOLVED] Automatic resizing of the header image
 

Hi
What are the settings in the Layout section (for Layout WIDTH and type, Layout MIN width, Layout MAX width) in order to get the header image to automatically resize according to the browser size or screen resolution?

Take a look at http://palestine-cyprus.com/
The header width is 1284px and when the screen resolution is e,g, 1024x768, it is cropped.
However the image in the post below is resized. How can I achieve this?
I have tried a number of combination for the above value without success

Any help is greatly appreciated
Thanks

In header.php change

to

Still in header.php find

and add the following before it
And at HTML/CSS Inserts -> CSS Inserts put

Thank you very much Flynn
That did the trick. However, all the code changes are in header.php (and not index.php)

I would definitely not managed alone
Thanks for the support

Sorry about that, I changed it in the post above, the Javascript was also slightly wrong, it's not working in IE6 and throwing an error in IE7, it's corrected now in the post above. In header.php it should look like this now:

Great Flynn thanks!
I edited the code for IE as well

Hey Flynn,

"And at HTML/CSS Inserts -> CSS Inserts put"

You had me right up to this point.

I've been wading through this slowly and (I hope) carefully, but this instruction threw me for a loop.
Where or what is "HTML/CSS Inserts" ?

Your help is deeply appreciated. I'd love to get my header resizing automatically....

Bill

It's at Wordpress Site Admin -> Appearance -> Atahualpa Theme Options -> HTML/CSS Inserts -> CSS Inserts

Wow.
I didn't expect - and probably don't deserve - such fast service.
That did the trick for me - it's working great - although the blog is still only half built.
Many thanks and I hope to learn enough here to repay the favour - or at least pay it forward.
Bill

Oh. I spoke too soon.
My header image is resizing, but now all my categories, pages and logo section have disappeared. The change to Header.php must have over written code for those items. I'll wade back in there to see if I can figure it out. If anyone has any ideas though, I'd appreciate them...
Bill

Hey Flynn, does this step hold true my version as well (3.32 I think)?

I can't seem to find that code.

Should be line 738 in header.php

Great forum for this theme. Time to donate.

In the meantime, I'm not a programmer, don't know much about .php but nevertheless I need to fix my header since my webmaster is as responsive as I'd like.

How do I get at the php code to change it? Is it through the Theme Options in WP or do I need to go to my cPanel? If it's cPanel, how do I get to the code?

Thx.

header.php is in the theme's main directory

When uploaded it is at /wp-content/themes/[theme-name]/header.php

[theme-name] can be atahualpa, atahualpa3, atahualpa332 or similar

You'd edit header.php with a text editor such as Notepad or Notepadd++ and upload the edited version of header.php with a FTP Client software such as Filezilla to your web hosting account and overwrite the existing /wp-content/themes/[theme-name]/header.php

Thanks for the quick reply, Flynn. I just realized if I right click the header.php that the code will open up in cpanel. Can I just edit it there according to your post up above and save it? That way I don't need to go into Notepad.

Thx again.

I don't know CPanel well enough and currently don't use it but it's entirely possible that you can edit this way right on the web server in CPanel, without the need to re-upload a file that you modified on your desktop computer.

Hello Flynn

How close is the above information able to assist me in making sure my site fits on all monitors (without needing to scroll from the left to the right.) - I had been informed I needed to change something from pixels to percentage. Hope you're doing well; Mark

Atahualpa already fits into various screen sizes in its default state when you choose a fluid width layout. The header image gets cut off when required. The code above is about not cutting off but shrinking the header image instead

I'm still trying to re-size my header image automatically. I tried using the code above but I noticed that some of Yiorgos' code is in there too so I'm hesitant about doing just a copy 'n paste. So I'm asking questions instead of trying it out (not a programmer). Sorry.

By default, the larger headers will be cropped, correct? On the other hand, if it re-sizes automatically, does the resolution stay the same or will the header quality be affected by the re-sizing?

If the resolution stays intact, that's great.

If not, then I have to decide what the best image size would be. For example, on my widescreen laptop a 1300 pix header looks great but on my 17" desktop, it gets cropped. If I use a 970 pix header for my desktop, then it's way to small for for laptop. I guess that brings us back to auto re-sizing - as long as the quality is not affected by the re-sizing.

My WP site is at http://www.directmailinsider.com

What's the best way to go? Thanks for your help.

Rainer

P.S. You are very responsive and helpful with these posts, so it's donation time now.

The image resolution & quality would change. The default setting is to crop the image, with the option to choose from which end the image should be cropped, at Theme Options -> Header Image -> Header Image Alignment

This worked well for me thank you VERY much!

..tut mir leid! I spoke too soon. The fluid rezizing works great, but now my top page menu is gone. :confused: oops.

What did I do wrong?

Thank you

Thanks, Flynn. I got my header to re-size automatically. But somewhere along the way, I lost my menu bar along the top. Can you tell me how to get it back?

Thx.

Rainer
www.DirectMailInsider.com

Looks like we have the same problem. See my post ABOVE.

Rainer

The solution above was geared towards a site that wasn't using anything but the header image

In header.php remove the hash # character from this line again:


And at Theme Options -> Header -> Configure Header Area

remove %image

Thank you, Flynn. What we do without you?

Rainer

Done!

Jayce

I've made the changes and got the resize to work which is great. I removed the # from <?php bfa_header_config($bfa_ata_configure_header); ?> and also removed %image from configure header area but my menu pages are still gone. I had them under the image so I'm wondering if I did something wrong. Any thoughts?

site is adailydad.com

Thank you for the help.

Do you have %pages still in Theme Options -> Header -> Configure Header Area?

Yes. It's listed as follows:

%bar2 %pages %bar1

I put the %bar1 in to see if it made a difference. I can reload the old header.php and remove the css styling bit and it shows up? I copied the codee directly from your post so not sure what I did wrong. I love the resizing though, just need to get the menu back. :)

Dear All,
I'm a blind user who has just started a blog and who has discovered this theme. I think I can understand some of this image resize code. I can forward this thread to the guy who is helping me launch my podcast to figure out the rest. I have two questions:
1. Is it possible to put the header and tag line text,not a bitmapped image of text, in the center of the header image?
2. If I'm having trouble with the resizing thing, what is the best generic header image size for one image that occupies all three panes of the header?
Thanks,
Kevin
PS. Because I'm blind, I may not see the answer if any. Could those of you who can answer this, send an e-mail to kevjazz@gmail.com. I use a screenreader and I had a heck of a time putting this post in this forum. Hope I did it right.

www.joecrogan.com

I absolutely love the theme!

This is my first try at making a website, I have made a few amendments from reading your other threads – very useful!

I feel this time I need some extra guidance.

I basically use a block image above my sidebars to act as my logo, so that I can have my content at the top of the site. Therefore I don’t have a header image.

But I still have the same problem with resolution. I have developed the site with a max resolution display, and as a result the site looks terrible in the common 1224x768.

Is there any way to edit all text and images on the site so that they change dependent on the screen resolution?

Do I edit the text so that I use % rather than px? And the same with any image I attach/embed?

Thanks in Advance,
Graeme

As I listed above I have %bar2 %pages %bar1 in Theme Options -> Header -> Configure Header Area. Here is my header.php, maybe I did something wrong?

// without caption
$bfa(".post img").each(function() {
var maxwidth = centerwidth - 10 + 'px';
var imgwidth = $bfa(this).width();
var imgheight = $bfa(this).height();
var newimgheight = (centerwidth / imgwidth * imgheight) + 'px';
if (imgwidth > centerwidth) {
$bfa(this).css({width: maxwidth});
$bfa(this).css({height: newimgheight});
}
});
// headerimage
var headerwidth = $bfa("td#header").width();
$bfa("#headerimage").each(function() {
var maxwidth = headerwidth + 'px';
var imgwidth = $bfa(this).width();
var imgheight = $bfa(this).height();
var newimgheight = (headerwidth / imgwidth * imgheight) + 'px';
if (imgwidth > headerwidth) {
$bfa(this).css({width: maxwidth});
$bfa(this).css({height: newimgheight});
}
});
// with caption
$bfa("div.wp-caption").each(function() {
var captionwidth = $bfa(this).width();
var maxcaptionwidth = centerwidth + 'px';
var captionheight = $bfa(this).height();
var captionimgwidth = $bfa("div.wp-caption img").width();
var captionimgheight = $bfa("div.wp-caption img").height();
if (captionwidth > centerwidth) {
$bfa(this).css({width: maxcaptionwidth});
var newcaptionheight = (centerwidth / captionwidth * captionheight) + 'px';
var newcaptionimgheight = (centerwidth / captionimgwidth * captionimgheight) + 'px';
$bfa(this).css({height: newcaptionheight});
$bfa("div.wp-caption img").css({height: newcaptionimgheight});
}
});
}


The second part:
<!-- Header -->
<td id="header" colspan="<?php echo $cols; ?>">
<a href="<?php echo get_option('home'); ?>/"><img id="headerimage" src="http://adailydad.com/wp-content/themes/atahualpa/images/header/Banner3.jpg" alt="<?php bloginfo('name'); ?>" /></a>
<?php bfa_header_config($bfa_ata_configure_header); ?>

</td>
<!-- / Header -->

In the CSS inserts:
img#headerimage{
max-width: 100%;
width: auto 100%;
}
img[id~=headerimage] {
height: auto; /* hiding from IE6 */
}


Only thing different from the originals is that when I added the theme I put the 3.2 atahualpa version in the atahualpa folder I had already created. Would that cause an issue? Maybe the old atahualpa is being called somewhere else?

Steven T

To kevjazz:

To center the blog title, do this:

1. Go to "Atahualpa Theme Options" > "Header Image", and set these options:
"Overlay Blog TITLE over Header Image(s)?" > YES
"Overlay Blog TAGLINE over Header Images(s)?" > YES

Into the textarea titled "Overlayed Blog Title/Tagline Style" put this:

Click "Save Changes" at the bottom of the page.

2. Go to "Atahualpa Theme Options" > "HTML/CSS Inserts" and into the textarea titled "CSS Inserts" put this:

Click "Save Changes" at the bottom of the page.

I have sent this to your email address as well.

I think your site looks pretty good. In which browser are you seeing width issues? I see that in Safari the right side is being cut off when the browser viewport is being shrinked too much. I'd consider a fixed width of 1000px for your site to avoid this. The min/max width doesn't seem to work fully with the changes you made.

Setting the font to a em value allows visitors to adjust the font size through their browser. Making the font and all content grow and shrink based on the current browser viewport, and have that working in all browser, would require tremendous effort. I have never seen a site doing this.

The code in header.php looks alright. Make sure you're looking at the right theme, or that you've put the modified header.php into the directory of the right theme version. If you hover over the screenshot or title of the non-active themes at Site Admin -> Appearance -> Themes you should see their directory in the browser's menu bar as "...preview=1&template=atahualpa332&stylesheet=atahualpa332..."

Or, the %pages section may be disabled or deleted in functions/bfa_header_config.php

Dear Flynn,
I tried placing the code you suggested in the appropriate places without results. While I was finally able to find the post styling box to change the color of post headlines, changing the header as you recommended has not yet centered the text over the picture. If I don't say yes to float title over image, can I simply center the blog title and tagline above the image so that they would be centered where they are currently hard left?Does it matter that I'm using version 3.2 instead of 3.32? Would updating erase all my customizations so far?

Thanks for an amazing theme and a great learning experience.
Kevin

In the newest Atahualpa version it should read

in header.php instead of

Not sure what went wrong, the code worked for me. To center the blog title where it is requires many file edits unless you are willing to drop the search box, the RSS icons and the logo image from the header area.

To do this, turn off the search box at Theme Options > Header > Show search box?, turn off the RSS icons at Theme Options > RSS Settings > Show Post Feed icon? / Show Comment Feed icon? / Show Feedburner Email icon?, and turn off the logo image at Theme Options > Show Logo Image? by deleting the logo image file name.

Then add
to both the "Blog Title" and "Blog Tagline" text areas at Theme Options -> Header. Or remove the blog tagline at Theme Options -> Show Blog Tagline?

Flynn,
the only thing I can think of is that I'm using version 3.2 instead of 3.32. Would upgrading alter the changes I've made in my theme so far? If so, which files should I back up to restore my theme to its current condition in 3.32?
I don't want to turn off the search box and other icons.
Thanks,
Kevin

Just upload the new theme version as a differently named directory to /wp-content/themes/

So if your current version is at /wp-content/themes/atahualpa3/, upload the new version as i.e. /wp-content/themes/atahualpa332/

That way you can run both versions at the same time and switch between them at Site Admin > Appearance > Themes

No files would be overwritten because both theme versions have their own directory. Both versions would share the same theme settings.

It may be a bit hard to distinguish between the two versions. The description of the version 3.3.2 should start with "Version 3.3.2".