• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » How to Fix Blurry Images on Bloglovin’

Published on May 8, 2016 / Updated on June 26, 2016 / Reading Time: 6 minutes

How to Fix Blurry Images on Bloglovin’


Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 29 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 31 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 32 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

How to Fix Blurry Images on Bloglovin

For quite some time there has been an issue with blurry images on Bloglovin’. The reason for this behavior is because Bloglovin’ is pulling your featured images directly from your default RSS feed. In turn their system is forcing smaller images to become large which means they lose their clarity.

One way to fix this is to re-size those images. However, in doing so… there are several things that can possibly go wrong. Below I will show you how to fix the blurry images and also how to fix a few known issues.

For the purposes of this tutorial, I am going to walk you through how to fix them on your WordPress website. The principle behind this could also be used with other blogging systems.

Things to know before you proceed:

  1. After changing images sizes below you will need to regenerate your thumbnails.
  2. The changes will take effect on Bloglovin’ once you publish a new blog post.
  3. It will only update the last 7-8 days of blog posts. It will not fix every blurred image on Bloglovin’. This is on the Bloglovin’ side and there isn’t anything you can do about those.

So let’s get started! Read everything in its entirety before proceeding.

Using WordPress

The RSS feed is pulling the images from the thumbnail size shown under “Media.”

How to Fix Blurry Images on Bloglovin'
Click to open in new tab

Depending on how your WordPress theme was developed, your featured images could also be using the thumbnail setting. So changing this for Bloglovin’ may not be an option for you. Check with your theme developer to see how you should proceed.

If your theme is not using the thumbnail image, you need to set that thumbnail image size to be at least 310px wide. The Bloglovin’ image size is approximately 310px.

Once you change this thumbnail size, you will need to regenerate your thumbnails. You can use the Regenerate Thumbnails plugin to do this. If you are using a caching plugin, clear your cache when you are done.

Tip: Since Bloglovin’ will only update 7-8 days back, instead of regenerating all the thumbnails in your website, go to Media > Library. Select the current month from the drop down that says “All Dates” then click “Filter. Check the box next to “File” and from the drop down, select “Regenerate Thumbnails.” Do this for the current month and the previous month if you do not blog regularly.

When you publish a new blog post, your new image should take effect on Bloglovin’.

Wait! Don’t do anything yet though! There’s an issue with MailChimp!

If you are using MailChimp's RSS-to-Email, click here for more instructions!
If you are not using MailChimp’s “RSS-To-Email” to send out a newsletter – you can stop here.

If you are using MailChimp’s RSS-To-Email – changing that thumbnail size WILL have an effect on your newsletters. Why? Because it is using the same RSS feed to generate the image over on Bloglovin’. And you may not want a 310px thumbnail size in your newsletter.

So now what?

Well, now is where you need to add a plugin and also some code to your functions.php file.

To keep the new size you created for Bloglovin’ and keep the current size being used in your MailChimp newsletter, you will need to install the “Send Images to RSS” plugin by Robin Cornett. Now… you need to download it from Github and not the WP repository because Robin helped me with this a few days ago. She was gracious with her time to edit the plugin to help us out. Once you download it from Github, when she makes the final edits… you will see an update in the dashboard under Plugins.

Install and activate the plugin like you would any other WordPress plugin.

Then browse over to Settings > Send Images to RSS. The screen will look like this.

How to Fix Blurry Images on Bloglovin'
Click to open in new tab

Focus only on 2 & 3. Do not configure anything else. First, check the box that says “Alternate Feed“. You won’t see the link you see in the image until you save it. So Save. Now, you will see a custom email feed link you can use in your MailChimp RSS-To-Email newsletter.

Wait!! There’s another step you need to do to make that link work.

Make a back up of your “functions.php” file. This file is located in your theme folder (www.yoursite.com/wp-content/themes/your-theme/functions.php). Next, you want to edit the functions.php file using a File Editor like Notepad++ or Sublime Text.

Click “View Raw” at the bottom of the code below. Copy and paste that code into the bottom of the functions.php file.

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
add_filter( 'send_images_rss_thumbnail_size', 'prefix_change_thumbnail_alternate_feed' );
function prefix_change_thumbnail_alternate_feed( $image_size ) {
if ( is_feed( 'email' ) ) {
$image_size = 'mailchimp-rss';
}
return $image_size;
}
add_image_size( 'mailchimp-rss', 300, 150, true );
view raw functions.php hosted with ❤ by GitHub

Now… if you want your thumbnail image to remain 150px by 150px – then change the two numbers on line 13 to 150 and 150. If you want your thumbnail images to be another size, just change those two numbers. Then regenerate your thumbnails.

Important: Once you complete these steps, you need to go to Settings > Permalinks. Click the Save button. This step is so that the system will recognize the new URL to the custom RSS feed. If you don’t do this and you try the link, you will probably get a “404 Page Not Found” message.

Lastly – take the new feed link shown in the plugin that looks similar to this (http://sample.cre8tivediva.com/feed/email) and use that link as your RSS feed URL in MailChimp.

Here’s what the 310px by 310px thumbnails look like using the default RSS feed for Bloglovin’.

2016-05-08_17-16-48

Here’s what the thumbnails look like using the custom feed generated by “Send Images to RSS” for MailChimp.

2016-05-08_17-17-09

It can get really complicated when you are trying to use several different services to share your blog to multiple websites. Hopefully this will work out for some of you. It’s worked out perfectly for me and my clients.

For those of you using Feedburner, you may or may not be experiencing issues with and/or without MailChimp. If you are, I’d like to hear from you to see how we can resolve that for you.

Thanks to Robin Cornett for taking time out of her schedule last week to help me with the MailChimp issue. You can check out her other cool plugins on her website at http://robincornett.com.

If you need some assistance, hit the Tech Support tab on the top menu.

If you find this post useful, please share 🙂

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrintShares15

    Filed Under: Genesis Framework, Tutorials, WordPress

    A recent conflict was found when Genesis Simple Share is activated and configured while using the Posts and Page Grid in Genesis Blocks. The error can be seen when viewing the content on the front end. The error does not display in edit mode. Below is a temporary fix that will allow you to manually set […]

    Reader Interactions

    Comments

    1. Maira says

      May 12, 2016 at 3:38 pm

      Thanks for this useful tutorial, in Blogger the solution is as simple as selecting the feed options “Full” or “Until the jump break”, in case this is helpful to someone 🙂

      • TheCre8tiveDiva says

        May 12, 2016 at 4:00 pm

        Thank you Maira for adding that. Do you know how that change might effect users of MailChimp’s RSS-to-Email?

    2. Tanya says

      September 12, 2016 at 2:28 pm

      Do you know if there is a way to fix blurry images from posts that have already published to Bloglovin?

      • TheCre8tiveDiva says

        September 12, 2016 at 2:31 pm

        From my experience with the code and Bloglovin’, it will only resolve blurry images for posts published in the last 5-7 days. As you publish more blogs they will not be blurry but it’s really Bloglovin’ that isn’t retroactively going through every blog post and fixing them.

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2022 · Designed with by Me! · Hosted on SiteGround

    We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy