-
Hi, I’m working on a web site where I used a header block for merging, combined with a Page Hero block (hook) with a photo for every page (7). All the photo’s are cut outs (1900 x 500 px, 150 dpi). On my laptop and big screen all looks good (to me) but on my android phone the pics are blurry. Now my client just told me that the pics are blurry on his computer screen, but look good on his mobile phone. Moreover, my client would like to the pictures to have more height…
I have tried a lot of things, but I can’t get it a 100% OK. Can you advise me. Maybe I should make another setup (featured image, header block for every page…)? I’m a bit lost now 🙂
Thank you!
Eva -
Hi there,
if you only want the menu sitting in front of the hero image then:
1. remove the Cover Block
2. add a GB Image Block and set its Dyanmic Data to show the Featured Image.This will render the full size image with its src-set sizing directly into the page.
If need be we can then adjust its height based on screen size.
Let me know.
-
Thank you for your fast reply, David! Just for my understanding: After removing the Cover block, I add a GB image block to every page, and make sure hat every page has a featured image, right? Does this image has to have a specific size?
By the way, I now see that I forgot to mention that I used Elements for the headers as they are now, but I think those won’t be needed when I use the GB image Bloke with Dynamic Data.Thanks again!
Eva -
Ok, so if the image has no other content in front of it then.
You could just let the Theme display the Featured Image above the content.
We can then discuss the size in a moment … is that an option ? -
Thank you!
I’ll try. I would like to show the menu and the logo in front, if possible… -
So the Header Element you would keep as that shows the Menu and Logo in front
In Customiser > Layout > Blog -> Featured Images:https://docs.generatepress.com/article/adjusting-the-featured-images/
For the Posts and Pages you can set the Location to
Above Content Areas -
Ok, I have now added a featured image for the page mentioned in the p.i. below, set the location to Above Content, and activated the merge header element. But the image is very small now, and I just can’t find where to change the width…
-
Do you want the image to be full width?
If so, try adding this CSS:
.page .featured-image.grid-container { max-width: 100%; }Adding CSS: https://docs.generatepress.com/article/adding-css/
-
Thank you Ying! It works, but I find the image quite blurry. Can you give some advise about the best size?
Thank you!
Eva -
The image looks fine to me, it’s already using full size image which is 1900px in width, it should be more than enough.
-
Hello, sorry for the late answer. It works but it’s still blurry. I did a test now, using the same photo for 2 different headers on one page (/contact).
For the first header I used the 2 elements: the page hero and the header element.
For the second I used the featured image and the header element.The first is OK on my computer screen, but totally blurry on mobile, while the second only looks ok on tablet… See: http://prntscr.com/3gJ37PrpXIm- and http://prntscr.com/DAaiY4Q41i_U.
Maybe there is another option?
Thank you!
Eva -
How does it compare to the original image you have ? And what size is the original image ?
As you can try a larger size image. eg.2400px wide -
Hi David, finally I think we found a solution… What seems to work best is using a page hero element for each page, and setting a focus point for each image. I also used bigger images (2400 px wide), and now they all seem to be sharp on all devices. The only thing I would like (if possible) is diminishing the height on mobile only. If that’s possilbe, great… If not, well ok 🙂
Thank you for thinking with me.
-
Thats good to hear 🙂
The Height issue comes from using the cover block, although we could treat it with some CSS it will negatively affect the image loading performance on mobile.
Could you follow the steps above to just show the featured image instead ?
-
Hi David,
Thanks again. I made a testpage, so the two options can be compared. For both pages I used exactly the same image. The /test uses the featured image as header, the Home uses the page hero as described before. The difference is clear… blurry on the testpage and sharp on the home.
What do you think?
Thank you for your patience,
Eva -
The cover block method squeezes the image down and crops off some of the detail which is why you see less of the compression markers in the image.
OK, lets try resizing your cover block by adding this CSS to the site:
@media(max-width: 768px) { .wp-block-cover { min-height: 240px; } }It will reduce its heigh on mobile devics.
- You must be logged in to reply to this topic.