sadzik
Forum Replies Created
-
Forum: Themes and Templates
In reply to: [Snaps] Blurry Header ImageHello Oskar,
I’ve noticed that your header is 1920x157px and you mentioned cropping it to 1920/300 px. Which height do you mean to use? Resizing between this two values might be the cause of the problem. Besides the image has very low quality itself (only 13,1 KB). Did you upload it this way or did the theme crop it for you?
And how did you change the header height from default 500 px?
Let me tell you my approach – it worked like a charm:). I also changed my header height -> to 1920x400px. It took three steps:
1) Change the displayed header height
2) Change the allowed image header size
3) Upload the image and don’t let the theme mess with the image (don’t let him crop it).Details:
1) I don’t know how you did it, but I changed the Header.php file (arbitrary value of 400px).
<header id="masthead" class="site-header" role="banner" <?php if ( ! empty( $header_image ) ) { ?>style="background:url(<?php header_image(); ?>) no-repeat center center; background-size: cover; height:400px;" <?php } ?>>2) In custom-header.php you have to change both values:
'width' => 1920, 'height' => 400,3) Prepare the image exactly this size (1920 x 400), see if it looks ok, make sure that it’s more than 13KB (maybe 100KB?) and don’t crop it. If you upload the image in right size, the “Skip cropping” button will appear. Use it and the image on your site should look exactly the same as the one you prepared (given that you watch in on HP monitor – 1920 x 1080 px).
Of course, in your case change the heoght from 400px (my settings) to yours.
Forum: Themes and Templates
In reply to: [Snaps] Blurry Header ImageHi Emily,
I had the same problem. I’ve just worked it out! 🙂
It looks poor on high resolution monitors. That’s because no matter how big image you upload, it’s being scaled down to 1200 x 500 px. So if you want to see it in HD, the header image must be scaled up (zoomed in) from 1200 to 1920 px width. That’s where you loose the quality. Snaps just won’t let you upload bigger image (by default).
To overcome this limitation you have to change the source code of the template. It’s easy! Just go to “Appearance -> Editor”. You will see a list of Templates on the left and editor field in the middle. Select “custom-header.php” and change one line:
‘width’ => 1200, to
‘width’ => 1920it’s in the first function: snaps_custom_header_setup(), at the beggining of the file.
Then, click the “Update File” button, and go to “Customize -> Header Image”. You will notice that reccomended header size changed to 1920 x 500! Prepare the file (make it precisely 1920 x 500) and upload. The “Skip cropping” button will appear. Click it, so you will use the image unchanged. That’s it! 🙂
Notice, that the header height remains constant no matter the resolution. When the header image is 1920 x 500, it will be unchanged on HD monitors, on bigger res it will be scaled up (worse quality), on smaller it will be cropped – sides will be cut, but the quality remains the same. I assumed that you want it to look good on HD monitors, but you can experiment with bigger resolutions.
Greetings 🙂