Featured Image on Sample Theme Getting blurred

[Amol]

Hello Everyone,

I have been working on my new website based on the genesis sample theme with AMP standard view. I have created a full width featured image for the page & post by using the following code.

add_post_type_support( 'post', 'genesis-singular-images' );
add_post_type_support( 'page', 'genesis-singular-images' );
remove_action( 'genesis_entry_content', 'genesis_do_singular_image', 8 );
add_action( 'genesis_after_header', 'genesis_do_singular_image' );

by default, the featured image size in genesis customizer is 702 X 526 which creates a lot of white space on both the left & right side ( css rule was object-fit: contain;) so I add a CSS rule

amp-img.amp-wp-enforced-sizes[layout="intrinsic"] > img {
object-fit: cover;
}

The problem I am facing the hero image keeps getting blurred. Kindly help me fix the image blur issue.

Link to website page

---

What’s Beneath the Webface

https://wordpress-220811-1615918.cloudwaysapps.com/about-us/

[Anita]

It's because your image is too small. You need to create a new image larger image size.

---

Love coffee, chocolate and my Bella!

[Amol]

Dear Anita,

The image dimension are minimum 1920 x 1080 px.

By default the image gets cropped to 702 x 526 pixel. This is featured image dimension set in customizer.

I did use simple image plugin to reset the image as per the container size & different images. Even after that the image keeps getting blur.

Please advice.

Thank you.

---

What’s Beneath the Webface

[Amol]

Fixed the issue by changing the featured image size in function.php from 702 to 1263.

Thank you so much for your support.

---

What’s Beneath the Webface

[Author]

Posts