how can I edit the CSS so that the header image doesn’t show up on the individual posts pages (but does on the landing page)?
Since individual post pages all have the class single, you can globally target them by adding this custom CSS to your Jetpack CSS editor to remove the featured image:
.single .entry-thumbnail {
display: none;
}
The header will probably look too tall at this point, so you can reduce its height by also adding this:
.single .entry-header {
height: 110px;
}
Is there a way to make sure the image always takes up 100% of the space available?
The problem with this method would be that images would become distorted – either stretched vertically if they were too short, or horizontally if they weren’t wide enough.
If you don’t want your images cropped or stretched, and you’ll be hiding the featured images on single posts, you could simply try making sure your images are square before uploading them.
Thanks! I could also just choose images that are already the right dimensions though, or edit them ahead of time. How can I see the default dimensions of the thumbnail images?
How can I see the default dimensions of the thumbnail images?
It’s defined at 295px square in the CSS:
.home .site-content .hentry,
.archive .site-content .hentry,
.search .site-content .hentry {
float: left;
margin: 0;
overflow: hidden;
width: 295px;
height: 295px;
}
Thanks!
My header is still being stretched everywhere, even though I think it’s the size it’s supposed to be. My custom-header.php says the below. My image is exactly 1105 x 718, but still gets stretched and distorted. What can I do about that?
[big code chunk removed, please use Pastebin next time -Kathryn]
My image is exactly 1105 x 718, but still gets stretched and distorted.
I’m not sure if you changed it since you posted this, but your current header image is actually 1200 x 538, as you see here:
http://statusquotable.com/wp-content/uploads/2014/06/cropped-Picture111.png
The theme calls for a custom header of 1200 x 525, as you can see in this part of the code:
function pictorico_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'pictorico_custom_header_args', array(
'default-image' => '',
'default-text-color' => '07a1f2',
'width' => 1200,
'height' => 525,
Can you try:
1) Uploading a header at exactly 1200 x 525
2) Regenerating thumbnails using a plugin like this one.
Keep in mind that the way the theme is designed, the header will resize if you make the browser window bigger or smaller. I’m not sure if this is the “stretching” your’re referring to.
p.s. I’m removing the large block of unformatted code above, per forum etiquette. If you need to post large pieces of code, please use a Pastebin. Thanks!
On second thought, you shouldn’t need to do step 2 (regenerate plugins) since you’re not changing the header size in the PHP.
Hey Kathryn – can I just change the 1200 and the 525 in the custom_header.php to match my needs? Changing those dimensions didnt seem to change the look of my page, is there another place this should be edited?
Also something else must not be working properly – when I go to themes > customize and upload a header image that is SMALLER than 1200×525, I still get asked to crop it pretty significantly
Hello everyone
I do have the roughly the problems than Katiegera.
My effort to change the size of the header (which is too big for our need) haven’t succeed. I do have the impression the theme zoom in as it whishes in images… depending of navigators, some images are cropped, some are pixellized….
the site is here http://ecologiecitoyenne.fr/
Kathryn,
dunno if I can ask in this same thread, but it’s exactly about the same thing that katie had. I’ve followed your tip to remove the header from posts, but I can’t seem to make the header size to 110px… I mean I’ve added your suggested line of code to the CSS (the “display: none” works, as there is no header image anymore, but “height: 110px” doesn’t and the post does not get resized)… Have I missed anything?
Mike
Hey Kathryn – can I just change the 1200 and the 525 in the custom_header.php to match my needs? Changing those dimensions didnt seem to change the look of my page, is there another place this should be edited?
While you can change it, you’ll encounter two issues:
1) Your changes will be overwritten the next time you update the theme. The way around this is to create a child theme, so your tweaks won’t be overwritten when updating the theme. Here are some guides in case you haven’t made one before:
http://codex.wordpress.org/Child_Themes
http://op111.net/53/
http://vimeo.com/49770088
If you need more help after that, let me know.
2) When you change a size in a function like that, you’ll need to regenerate the theme-specified image sizes using a plugin like Regenerate Thumbnails.
Fenisa & mintymike – since this thread is already quite long and I’m focussing on helping katiegera here, would you each please start a new thread so it’s easier to help you one-on-one with your issues? Please also include a link to your site so folks can have a look directly. Thanks.
Well, I’ve actually managed to fix this by installing Custom CSS plugin and adding your line in there. I don’t know why it didn’t work when I tried adding it directly to site’s CSS file, but it’s gotta be one of those ghosts in the machine. I don’t need to understand it as long as it’s working.
mintymike – glad you got it working. It’s never recommended to make changes directly in the original theme’s CSS file – because you’ll lose all your tweaks the next time you update the theme – so installing a custom CSS plugin was actually the right thing to do! Glad you’re all set.
