Banner Image Quality No Good

[kerri]

Hey, another question… actually two issues regarding the featured/banner images on blog posts.

First when the featured image is hovered over with the cursor, they darken slightly. I don’t like this at all but can’t figure out how to stop it from happening.

Secondly, and more importantly: Why is the image quality lessened in the featured/banner image? The image directly linked from my media library is high quality, but on individual blog posts, the image is darker and the resolution isn’t nearly as good as the file itself.

Seeing as the featured image is the first thing anyone sees when visiting a post, it’s quite important that the image is of the highest quality…

Here is an example of a post:

The Evolution of the Notorious Comuna 13 in Medellin - These Foreign Roads

Here is the link to the image being used:
http://theseforeignroads.com/wp-content/uploads/2018/05/Featured-Comuna-13.jpg

Thanks again for all the help!

[nabeel]

Hi there,

Thanks for writing around!

• To fix the hover effect, please find and remove the following code from the theme:

.pinit-hover {
    opacity: 0.8 !important;
    filter: alpha(opacity=80) !important;
}

• I checked your blog post and it looks like you’re using custom functionality for the featured image which is stretching the image to make it display full width, another factor I found is your image is not of very high resolution, please try uploading the image that is at-least 2000px wide becuase the image is stretching on full screen and if it doesn’t meet the screen resolution, it will be blurry and stretchy.

Hope this helps!

[kerri]

I’m not quite sure how to find that code, but I’ll have a look.

As for the banner images, I have other images for currently scheduled posts where I’ve used a 2000px wide banner, and the problem still exists. The colour isn’t as bright and the image isn’t as sharp.

Something else is causing the problem. If it is in fact the code I’m using to make the banner full width, what code would you suggest using to correct this problem?

Thanks again

[kerri]

This is the new 2000px image I’m using for the previously mentioned page. There is a significant difference between the actual image and the one displayed on the blog.

http://theseforeignroads.com/wp-content/uploads/2018/05/Featured-13-2000.jpg

[rad]

Hi there,

In that case, let’s override it, please add this code to your global custom javascript.

jQuery ( function($) {

jQuery('.single-post .entry-thumb img').each( function() {

$(this).attr('src', $(this).attr('src').replace(/-\d+x\d+\./, '.') );

} );

} );

Hope this helps.

[kerri]

Thank you SO much!!! This is perfect, it looks amazing.

Based on the searches I’d done in regards to this, I didn’t have high hopes on an easy solution. You guys are awesome!

Thanks again!

[nabeel]

Glad we could help.

Cheers!