Home>Support>Blurry Featured Images from Normal Post

Blurry Featured Images from Normal Post

I have been trying to get rid of blurry featured images on normal posts. I am using the Vantage Version 2.2.3. theme (I just upgraded today to the premium theme). I have a thumbnail of the image in the post that I can click on that opens a blurry image of the stored image in my Media Library.
(1) How do I get the full post image to be un-blurry (like the media library image)?
I tried disabling the plug-ins one by one to see if any of them have been causing the issue, but no luck.
• Askimet
• Black Studio TinyMCE Widget
• Contact Form 7
• Disable Comments
• Jetpack by WordPress.com
• Mechanic Visitor Counter
• Meta Slider
• NK Google Analytics
• Page Builder by SiteOrigin
• SiteOrigin Widgets Bundle
• TinyMCE Advanced
• WP Google Maps
I tried installing the Simple Image Sizes plug-in and modifying several parameters one at a time to no avail. An example of the blurry image is the 3rd post from the top with the description “Nice Uniform” in the following link: http://www.parkridgetkd.com/category/blog/
(2) Where are these blurry images stored? They are not in the media library.
(3) Is a scaler or filter being run on these images?

URL: http://www.parkridgetkd.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi Denis

    This post for example: http://www.parkridgetkd.com/source-taekwondo-news-facebook-28/. The featured image is 424px wide, it’s being stretched to 770px wide. That’s the reason for the blur.

    Try the following under Appearance > Custom CSS to prevent the featured images from enlarging:

    /* Featured Images */
    
    article.post .entry-header .entry-thumbnail img, article.page .entry-header .entry-thumbnail img {
    width: auto;
    }
    
  2. 9 years, 9 months ago Denis Slota

    OK, I added the code to the Custom CSS and it is looking a little better, but when I click on the thumbnail from the original post, I am expecting it to open the image to close to the size and resolution of what is stored in the media library. The image that opens is about 4X the size of the thumbnail.

    1) Where is the image getting cropped?
    2) Is there a setting to tell WP or Vantage to display close to full-size image when the thumbnail is clicked (maybe through the Simple Image Sizes plug-in)?
    3) Without support, how (or why) would I know to add this code to remove blurry images? (is there a conflict somewhere?)

  3. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    The image in the media library in this case is 424 x 300, that’s the size being rendered on the single post page. You can hide the featured image on the single post page from Appearance > Theme Settings > Blog. Or using Custom CSS decrease it’s width:

    /* Set a max-width for the single post and archive featured image */
    
    .single .entry-thumbnail img {
    max-width: 50%;
    }
    

    Adjust the max-width percentage as required.

    The featured image option you’re using on archive pages doesn’t dictate the size of the featured images on single post pages. That’s where the confusion is here. By default Vantage loads features images on the single post page at column full width. Right now the theme has the option to remove the featured image from the single post page but no sizing options for the single post page. In summary this is unfortunately a limitation of theme settings that you’ve run into.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More