|
#1
Feb 10, 2009, 12:25 AM
|
|
[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
|
#2
Feb 10, 2009, 08:06 AM
|
|
|
|
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
Feb 10, 2009, 10:10 AM
|
|
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
Feb 10, 2009, 10:31 AM
|
|
|
|
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
Feb 11, 2009, 10:54 AM
|
|
Great Flynn thanks!
I edited the code for IE as well
|
#6
Jun 1, 2009, 12:38 PM
|
|
Flynn, I tried to edit the header.php using Notepad, by copy and pasting the codes you gave for resizing the header automatically, but I get this error message:
Fatal error: Cannot redeclare image_files() (previously declared in /home/armst5/public_html/MyBlog/wp-content/themes/atahualpa.3.2/atahualpa/functions/bfa_postinfo.php:2) in /home/armst5/public_html/MyBlog/wp-content/themes/atahualpa.3.2/atahualpa/functions/bfa_postinfo.php on line 2
|
#7
Jun 1, 2009, 01:13 PM
|
|
I realize my problem is in the image source code, but not sure how to code it. I am using rotating images in the header.
|
#8
Mar 8, 2009, 05:52 PM
|
|
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
|
#9
Mar 8, 2009, 05:57 PM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
It's at Wordpress Site Admin -> Appearance -> Atahualpa Theme Options -> HTML/CSS Inserts -> CSS Inserts
|
#10
Mar 8, 2009, 06:28 PM
|
|
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
|
#11
Mar 8, 2009, 09:02 PM
|
|
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
|
#12
Apr 6, 2009, 09:39 AM
|
|
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
Apr 6, 2009, 11:42 AM
|
|
|
|
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
Apr 6, 2009, 09:45 PM
|
|
|
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
Apr 7, 2009, 04:40 AM
|
|
|
|
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
Mar 1, 2010, 03:10 AM
|
|
Hi Flynn,
I took your advice with resizing header images and i must have done something wrong. I am unable to view my header at all. Help!
|
#17
Jul 12, 2010, 02:19 PM
|
|
|
72 posts · Mar 2009
Prague
|
|
I know that this is a very old thread, but could somebody please enlighten me how to achieve this (automatically resizing header image) in the newest version (3.5.1) of Atahualpa? I don't think it would do any good if I try the code here that is now over a year old ;-) Thanks a lot, SY
|
#18
Jan 12, 2011, 02:42 PM
|
|
Quote:
Originally Posted by hospitalera
I know that this is a very old thread, but could somebody please enlighten me how to achieve this (automatically resizing header image) in the newest version (3.5.1) of Atahualpa? I don't think it would do any good if I try the code here that is now over a year old ;-) Thanks a lot, SY
|
I am also looking for this same solution in the current version (now 3.6). Does anybody know what it takes to get this done with the current version?
Thank you!
Billy
|
#19
Jan 12, 2011, 04:59 PM
|
|
This is what solved it for ATO 3.5.3.
http://forum.bytesforall.com/showthr...6049#post46049
Quote:
In ATO>Style & edit Header Area in place of %image put code similar to the following.
HTML Code:
<img src="http://path_to_image.jpg" width="100%" />
To get the necessary html I usually create a dummy page add the picture, copy the code, and trash the page. Then I paste the code where aI want.
You could of course also wrap the image with an <a> tag so it could be linked to the home page.
|
Last edited by juggledad; Jan 25, 2012 at 03:14 AM.
|
#20
Jun 17, 2009, 09:50 AM
|
|
Flynn, My header has rotating images in an image folder. What I would like is to direct the header to different image folders for each page, so that each page has a unique header.
What is the best way to do this? I have read posts on creating a new template which I did, but cannot get the newheader.php to work. Another post suggested modifying the original header.php by adding code which would direct specific pages to specific image folders, but I couldn't quite figure out how to do it.
I am php ignorant, so if you could help I would REALLY appreciate it!
|
#21
Feb 5, 2010, 12:00 PM
|
|
Hi found this thread but on my site with version 3.4.4 I cannot find the entries in header.php to change the //headerimage information.
I find such a section in the js.php
is the the same?
|
#22
Oct 13, 2010, 02:55 PM
|
|
|
75 posts · Apr 2009
Oregon, USA
|
|
Does this also apply to the logo too? I've created a nice logo but it pushes the rss subscription buttons etc off the page and looks funny in my net book.
|
|