Hi! I have a quick question. The thumbnails on my homescreen (in the blocks) are all blurry, and I’m unsure why? I uploaded high quality PNG files, and I run the “Regenerate Thumbnails” regularly when I make changes. Any idea why they don’t look sharper? (a few of them do, while the rest are blurry. That’s why it’s confusing)
Thank you!
Spencer
Hello,
Please provide a link to your website so we can take a look. If the images are not stretched, there should not be any quality loss. The theme crops images but it does not stretch them.(Except for the background image.)
Thanks.
Hi Bogdan,
I’m facing the same problem. The site is http://www.kuaby.com . Can you please help to check?
Thanks a bunch!
Hello,
I have checked your website and there seems to be no blurry images. The module 2 you use uses a 324×160 thumbnail and it seems to work as expected.
Here is an example of a thumbnail vs an actual image: http://screencast.com/t/pk7Nvtf6vg
Thank you!
Hi Bogdan,
Thank you for the reply. Sorry for not being specific.
The blurriness is very obvious on my phone (Galaxy S5) and MacBook Pro. Is it because of retina display? If it is, do you have any recommendations for us?
Thank you so much for the prompt support.
Hi Bogdan,
I did a few more comparisons, and I realized that all images look good on retina displays when used in a blog post. However, the quality becomes lower when I set the exact same image to be the featured image for the blog post.
Hope this helps to clarify.
Hi Bogdan,
For example, http://demo.tagdiv.com/newspaper_travel/wp-content/uploads/2015/08/42.jpg will appear fine on a retina display, but http://demo.tagdiv.com/newspaper_travel/wp-content/uploads/2015/08/42-696×464.jpg (used as a featured image) will show up with a lower quality despite having the same display dimensions.
To recreate,
Insert featured image on http://demo.tagdiv.com/newspaper_travel/td-post-could-shanghais-disneyland-be-cooler-than-walt-disney/ into the blog post itself as an inline image.
Open the blog post on a device with retina display, and you’ll see the difference between the two images (featured vs inline) in terms of quality even though they share the same display dimensions.
Hello,
I understand what you mean now, and there is a an explanation for it.The featured image uses a thumbnail while images inserted into a post use the full size. So when compressed on a mobile phone, the difference will be visible between a full size image ex: 1920×1080 and the thumb used by the theme for featured image which has a size of 696×0. This choice was made for pagespeed. You can override this thumbnail if you want by editing the theme files. You need to edit the template you use. Every post template has a separate file corresponding to it:
http://screencast.com/t/YBaK9ToiDFm Inside these files you will find the code used for image and the thumbnail: http://screencast.com/t/irKCRL3Qm You siumply need to change the td_696x0 to full and then the full image will be used for the featured image.
I hope this helps.
Thank you!
Hello, I have a very similar issue, but with the 324×160 thumbnail images. If you look on this page: http://demo.tagdiv.com/newspaper, at a browser window of 700px wide, for example, you’ll see that the thumbnails are being scaled up more than 2x. This of course makes them blurry, especially on a retina display. Example here: http://www.screencast.com/t/OxsmYbpo0xYw
These 324×160 thumbnails are also displayed in their ‘normal’ resolution on a full-width page, instead of 2x which would make them sharp on a retina display. Example here: http://www.screencast.com/t/Rf9E5vdpqT
If the featured image is not uploaded, then the theme shows either a placeholder or nothing, and that is not what I want.
Do you have a suggestion for how to show double-density images as thumbnails?
Thanks and Happy New Year!
Hello,
Unfortunately this is how the theme was built. The only thing you can do is force the theme to use a different thumbnail or use the full image instead of a thumbnail. This was a choice made to avoid creating too many thumbnails. In order to change this behavior, you will need custom modifications to the theme files. The thumbnails can be found here: http://screencast.com/t/GSSZqJ2w9G
You can define new ones you wish to use and then set the module to use the one you define. For example: http://screencast.com/t/baLnqO6chA
I hope this helps.
Thank you!
Thanks, Bogdan – I’ll play with this.
Are there any plans to update the template to address this issue? I think it’s important as more and more screens are 5K or ‘retina’ quality.
Hi,
At the moment there are no plans for such a modification as changing thumbnails will impact lots of users that have thousands of images. Regenerating a huge amount of thumbs is a big pain and it could cause problems for lots of people. I will pass this information on to the developers and maybe we can figure out an elegant workaround.
Thank you!
My question is a bit more specific–On block 1, Module 4–it’s pulling the thumbnail sized 324×235, and it looks really poor on mobile. Where do I find just that image and tell the site to grab the full size image for only block1, module 4?
Thanks!
Hi,
You can deactivate the thumbnail from here: http://screencast.com/t/1jeqCpDJEil8 and use the full size image instead. the downside of this is that you cannot set only module 4 to not use it, as there are other modules that use this thumbnail. You can make module 4 use another thumbnail if you want. You can create your own thumbnails through the theme api: https://forum.tagdiv.com/api-thumbnail-introduction/ if you have the proper knowledge.
Then you can change the thumb used on module 4 from here: http://screencast.com/t/516Ro7aG
Hope this helps.
Thank you!
Thanks for that. Can’t believe I forgot about the block settings. However, I turned off the thumbnail for the size I wanted the full image to replace, then I regenerated the thumbnails, but the full size image still won’t appear in the thumbnail’s place–I get an image placeholder that reads “Enable thumb from Theme Panel –> Block Settings”. I also deleted the cache and nothing seems to work.
When I inspect the code, it looks like the site is still trying to pull the thumbnail instead of using the full image.
EDIT: So, when I switched back on the thumb on block setting, the full image appeared in place of the thumb. Because I’m certain I’ll be regenerating thumbnails frequently (still building the site), I went ahead and altered the size of that particular generated thumbnail in the td_config.php file. My question about that is this: I’m using a child theme, but edited the parent version of the td_config.php file–how should I go about setting it up so that my changes don’t get wiped out upon theme update? Should I place a copy of the td_config.php file in my Child theme folder? Thanks!
One more quick question–I doubled the size of a few thumbnails and they look fantastic on mobile… they all resize properly for the module(s), except for one size–I doubled 100×70 to 200×140, and the thumnail doesn’t display at 100×70, so it throws the styling all off and overlaps. Is there a way for me to force the thumbnail to display at half size, so that the 200×140 thumbnail resizes to fit into the 100×70 container? I couldn’t find the parameter to do that, since I had no reference due to all the other thumbnails resizing automatically.
Thanks!
Hi,
Unfortunately the td_config file will not work from the child theme so you will have to make this modification in the main theme. There is no update proof method for customizing the theme files. Not even the child theme is update proof.
As for the second question, you can use css to reduce the size of the image. You can post a link to the block in question and I will provide the code for it.
Thanks.
test.cbecast.com
Take a look at the Featured Workshop and New to CBRB sections–for the module 6 entries, I would like to have the 100×70 thumbnail actually pull the 200×140 thumbnail in the same size container.
Thanks!
EDIT: Ok, I figured out the code to add to get the image resized… but the issue I have now is that when it’s a YouTube post, the play icon over the thumbnail is no longer centered. You can see this in the Featured Workshop section.
Hi,
You can use this code for the video icon.
.td_module_6 .td-video-play-ico > img{
right: 100px;
}
You can adapt it to other modules if you use this on others as well
Thanks.
