Blurry featured images

Hello,

I found a code here on aThemes forum that made my West Pro article images on single post page full width.
Now the images seem blurry and I am asking if you know what could cause this?

There’s an example of the blurry image. I am using 1920x1280 images but it scales them down, could this cause this? I tried using smaller image but they seemed still blurry.

This is the post and the code I took the code: SINGLE POST LAYOUT – WEST PRO

Any advice? Thanks a lot in advance!

Hello @tomirytkonen,

I have just visited the link that you mentioned but I didn’t see blurry images. Have you already resolved this issue?

Kind Regards, Roman.


Hey, no I haven’t. There is a example of the blurry image.

I noticed that this code causes the blurriness:

.single-thumb img {
    width: 100%;
}

I would still like that images would be full width as they are now. Is there a way to do this without losing quality?

Hello @tomirytkonen,

There is 'west-large-thumb' size used for post images, which is set in functions.php file, row 49. You might want to check this WordPress Codex page in order to learn more about post thumbnails:
https://codex.wordpress.org/Post_Thumbnails

Please do not modify functions.php file directly in order to avoid losing your modifications after theme update.

You can add your PHP code to functions.php file of a child theme. Alternatively you can use a plugin to add PHP snippets, for example Code Snippets.

Also you can check these useful links:
https://codex.wordpress.org/Child_Themes

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hey @Roman ,
I did not quite get what code should I add to my child theme functions.php or where I can find it to override the west-large-thumb code.

If you can still assist with this, I can do the rest myself! Thanks a lot!

Hello @tomirytkonen,

You can try this PHP snippet:

function image_size_override() {
    add_image_size('west-large-thumb', 1000, 560);
}
add_action( 'after_setup_theme', 'image_size_override', 11 );

Then you can use Regenerate Thumbnails plugin.

But please create a full site backup first, you can read about it here:
https://codex.wordpress.org/WordPress_Backups

You can read about functions that are used in snippet here:


You can read about after_setup_theme hook (that is also used in snippet) here:

Also you might want to check this tutorial:

Kind Regards, Roman.