Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

[SOLVED] Automatic resizing of the header image


  #1  
Old Feb 10, 2009, 12:25 AM
yiorgos
 
13 posts · Feb 2009
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
  #2  
Old Feb 10, 2009, 08:06 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
In header.php change

PHP Code:
<!-- Header -->
<td id="header" colspan="<?php echo $cols?>">
        
<?php bfa_header_config($bfa_ata_configure_header); ?>
to

PHP Code:
<!-- Header -->
<td id="header" colspan="<?php echo $cols?>">
<a href="<?php echo get_option('home'); ?>/"><img id="headerimage" src="http://palestine-cyprus.com/wp-content/themes/atahualpa3/images/header/palestine-cyprus.jpg" alt="<?php bloginfo('name'); ?>" /></a>
<?php # bfa_header_config($bfa_ata_configure_header); ?>
Still in header.php find

Code:
// with caption
$bfa("div.wp-caption").each(function() {
and add the following before it
Code:
// 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}); 
}
});
And at HTML/CSS Inserts -> CSS Inserts put

HTML Code:
img#headerimage{
max-width: 100%;
width: auto 100%;
}
img[id~=headerimage] { 
height: auto; /* hiding from IE6 */
}
  #3  
Old Feb 10, 2009, 10:10 AM
yiorgos
 
13 posts · Feb 2009
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
  #4  
Old Feb 10, 2009, 10:31 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Quote:
Originally Posted by yiorgos
all the code changes are in header.php (and not index.php)
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:


Code:
     // 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
  #5  
Old Feb 11, 2009, 10:54 AM
yiorgos
 
13 posts · Feb 2009
Great Flynn thanks!
I edited the code for IE as well
  #6  
Old Mar 8, 2009, 05:52 PM
BDunphy
 
3 posts · Mar 2009
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
  #7  
Old Mar 8, 2009, 05:57 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
It's at Wordpress Site Admin -> Appearance -> Atahualpa Theme Options -> HTML/CSS Inserts -> CSS Inserts
  #8  
Old Mar 8, 2009, 06:28 PM
BDunphy
 
3 posts · Mar 2009
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
  #9  
Old Mar 8, 2009, 09:02 PM
BDunphy
 
3 posts · Mar 2009
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
  #10  
Old Apr 3, 2009, 02:04 AM
vinniev
 
22 posts · Mar 2009
Hey Flynn, does this step hold true my version as well (3.32 I think)?

Quote:
Still in header.php find

Code:

HTML Code:
// with caption
$bfa("div.wp-caption").each(function() {
I can't seem to find that code.
  #11  
Old Apr 4, 2009, 04:04 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Should be line 738 in header.php
  #12  
Old Apr 6, 2009, 09:39 AM
snowy
 
1 posts · Apr 2009
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.
  #13  
Old Apr 6, 2009, 11:42 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #14  
Old Apr 6, 2009, 09:45 PM
Rainer
 
26 posts · Apr 2009
Toronto, Canada
Quote:
Originally Posted by Flynn
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.
  #15  
Old Apr 7, 2009, 04:40 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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.
  #16  
Old Apr 7, 2009, 11:16 AM
mhbaker
 
1 posts · Mar 2009
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
  #17  
Old Apr 8, 2009, 04:24 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #18  
Old Apr 10, 2009, 02:59 PM
Rainer
 
26 posts · Apr 2009
Toronto, Canada
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.
  #19  
Old Apr 11, 2009, 05:34 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #20  
Old Apr 11, 2009, 11:15 AM
Jayce
 
14 posts · Apr 2009
This worked well for me thank you VERY much!
  #21  
Old Apr 11, 2009, 11:35 AM
Jayce
 
14 posts · Apr 2009
..tut mir leid! I spoke too soon. The fluid rezizing works great, but now my top page menu is gone. oops.

What did I do wrong?

Thank you
  #22  
Old Apr 12, 2009, 10:13 PM
Rainer
 
26 posts · Apr 2009
Toronto, Canada
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
  #23  
Old Apr 13, 2009, 10:10 PM
Rainer
 
26 posts · Apr 2009
Toronto, Canada
Quote:
Originally Posted by Jayce
..tut mir leid! I spoke too soon. The fluid rezizing works great, but now my top page menu is gone. oops.

What did I do wrong?

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

Rainer
  #24  
Old Apr 14, 2009, 07:25 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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:
PHP Code:
<?php # bfa_header_config($bfa_ata_configure_header); ?>


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

remove %image

  #25  
Old Apr 14, 2009, 01:12 PM
Rainer
 
26 posts · Apr 2009
Toronto, Canada
Thank you, Flynn. What we do without you?

Rainer

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] after resizing my blog, it's now right justified?? catty Atahualpa 3 Wordpress theme 5 Jun 8, 2009 02:30 PM
[SOLVED] footer resizing? jim Post-Kicker, -Byline & -Footer 2 Jun 2, 2009 06:44 AM
Custom Logo in Header + Resizing koligirl Header configuration & styling 0 Apr 24, 2009 09:58 AM
Sidebar Image Resizing baskenburg Sidebars & Widgets 1 Apr 17, 2009 05:49 PM
nextGen gallery with image rotator as header image shatchp Header configuration & styling 1 Feb 13, 2009 07:40 PM


All times are GMT -6. The time now is 11:37 PM.


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