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
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:
- After changing images sizes below you will need to regenerate your thumbnails.
- The changes will take effect on Bloglovin’ once you publish a new blog post.
- 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.”
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.
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 – 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.
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.
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 ); |
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’.
Here’s what the thumbnails look like using the custom feed generated by “Send Images to RSS” for MailChimp.
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 🙂
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 🙂
Thank you Maira for adding that. Do you know how that change might effect users of MailChimp’s RSS-to-Email?
Do you know if there is a way to fix blurry images from posts that have already published to Bloglovin?
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.