Blurry thumbnails using image helper
Permalink 1 user found helpful
Has anyone had any issues with blurry thumbnails from the thumbnail helper? It even seems to be happening if I set the image size to what it actually is... The code I am using is below:
<div class="company-panels content-container-row"> <?php foreach ($contentItems as $item): if ($item['imageFID'] != 0){ $imageFile = File::getByID($item['imageFID']); $thumb = $ih->getThumbnail($imageFile, 121, 9999, false); } ?> <div class="company-panel"> <a href="<?= $item['link'] ?>" class="company-logo-link"> <img height="<?= $thumb->height ?>" width="<?= $thumb->width ?>" src="<?= $thumb->src ?>" class="company-logo"> </a> <div class="company-description"> <?= $item['content'] ?> <a href="<?= $item['link'] ?>" class="company-link">Visit <?= $item['heading'] ?></a> </div>
Viewing 15 lines of 18 lines. View entire code block.
Hi ScottC,
Apologies for the delay in getting back to you.
I have tried your fix and unfortunately it did not work :(, I even remembered to clear the cache!
Actually, just looked and the image is being converted from a png to a jpg. I'll replace with a jpg and see if that fixes it.
Thanks for the tip though - I'll email Andy and ask him to add that to the docs.
Apologies for the delay in getting back to you.
I have tried your fix and unfortunately it did not work :(, I even remembered to clear the cache!
Actually, just looked and the image is being converted from a png to a jpg. I'll replace with a jpg and see if that fixes it.
Thanks for the tip though - I'll email Andy and ask him to add that to the docs.
Hey ScottC
I got the same Problem with the blurry pictures in the blog.
Can you tell me where is this config.php file located?
I'm kinda new to this CMS :-)
Thanks
I got the same Problem with the blurry pictures in the blog.
Can you tell me where is this config.php file located?
I'm kinda new to this CMS :-)
Thanks
This thread is 2 years old so I'm not sure if ScottC is still listening so I'll help out. Have a look on your server in root/config/site.php .
Yea its a very long time since then. I hoped for reply :-)
But thanks mhawke for the info. i found it but it didn't help out for me as well. i added the line into the site.php
Is there maybe another solution for the blurry images in the Blog?
But thanks mhawke for the info. i found it but it didn't help out for me as well. i added the line into the site.php
Is there maybe another solution for the blurry images in the Blog?
Did you check whether new thumbnails are better with the new setting or are you just expecting the existing ones to look better on their own.
I expected the same looks better on their own. It only appears on the mobile version. May i should add new Thumbnails in another resolution?
You can check them at
http://www.borlo.ch/artflow/
You can check them at
http://www.borlo.ch/artflow/
Depending on the code in the block that creates the thumbnails, they are often only created the first time the page is viewed so in order to generate new thumbnails using your new quality setting, you will need to change the dimensions of the requested thumbnail. Just specify a slightly different size and concrete5 will re-create new thumbnails for those dimensions. Your code shows a width of 121px so change that to 125 and see if the thumbnail is better.
I personally don't see a problem with the thumbnails on the blog page ('News') on the URL you provided but beauty is in the eye of the beholder.
I personally don't see a problem with the thumbnails on the blog page ('News') on the URL you provided but beauty is in the eye of the beholder.
I had a look at the code in the image.php file and there is a function called "setJpegCompression($level)" where you can specify a new quality setting in your code so if you add this to your code, it should override the default setting of 80.
But you still probably need to re-create the thumbnails in order for the function to take effect on new thumbnails.
setJpegCompression(90);
But you still probably need to re-create the thumbnails in order for the function to take effect on new thumbnails.
heya thanks for looking,
i tried to change it the compression but seems that nothing changed. also the thumbnail set that you mentioned to change from "121" width to "125" i didn't find where to change that..
sorry for my nooby knowledge. i'm very new to that editing in the codes.
also when i see the logo on the mobile it gets a little blurred, isn't PNG made to get a good quality for?
or is there something i do wrong?!
i do set new thumbnails like in the preview of the theme. 241x170 like they got.
i tried to change it the compression but seems that nothing changed. also the thumbnail set that you mentioned to change from "121" width to "125" i didn't find where to change that..
sorry for my nooby knowledge. i'm very new to that editing in the codes.
also when i see the logo on the mobile it gets a little blurred, isn't PNG made to get a good quality for?
or is there something i do wrong?!
i do set new thumbnails like in the preview of the theme. 241x170 like they got.
Sorry, I'm confusing you because I was confused. The '121px' was referring to the code at the top of this thread which is not your code.
If your blog page lets you set the size of the thumbnails then try choosing a different width and height so that concrete5 will re-generate new thumbnails using the quality setting you added to the site.php file.
Regarding the logo .png file. I don't have a true mobile device handy to check the quality of your logo. All I have is a tablet but it's being served the same PNG file as the desktop version. I can only offer some advice from experience. Sometimes the transparency around the edges of letters gets messy if the original background of the logo image had a white background and you make the white background transparent and then place the PNG image on a black background. Another problem that can result in blurry images is if an image is being forced to render larger than it's real dimensions.
If your blog page lets you set the size of the thumbnails then try choosing a different width and height so that concrete5 will re-generate new thumbnails using the quality setting you added to the site.php file.
Regarding the logo .png file. I don't have a true mobile device handy to check the quality of your logo. All I have is a tablet but it's being served the same PNG file as the desktop version. I can only offer some advice from experience. Sometimes the transparency around the edges of letters gets messy if the original background of the logo image had a white background and you make the white background transparent and then place the PNG image on a black background. Another problem that can result in blurry images is if an image is being forced to render larger than it's real dimensions.
I know this is an old thread, but yet again my attention has been drawn to this 'blurry image' issue, so this time I have done some deeper investigation. I'm looking at some JPG images on a c5 website under construction, and the (pixelated) text in those images that I've carefully saved down (with decades of experience in the field) is nowhere near as sharp as the uploaded files. The images being displayed are directly referencing the unaltered uploaded files (no thumbnails in play), and if I disable all CSS, the blurriness is still evident. If I take a screen-shot of an image in the browser (sans-css) and compare it with the same file downloaded from the c5 files directory but viewed in Photoshop or Preview, the difference in sharpness is obvious.
Suspecting a Chrome issue, I googled and found quite a few threads discussing blurred images, but then opened the same site in Safari, only to see the same issue. Curiouser and curiouser!
I'm using a modern iMac with a Retina 5K screen - surely this can't be treating the same image differently depending upon the app it's being viewed in? I also have a second monitor to my right - a Dell U2715H - that I use to keep an eye on mail and server metrics, which is also fed from an AMD Radeon R9 M390 2048MB graphics card (as per the iMac monitor). So let's see; let's drag the Chrome window over from the Mac monitor to the Dell monitor, and now compare the test images in Chrome, Safari and Photoshop ...wait for it - they're all the same, nice and sharp!
Moral of the story: before looking to blame c5 or Chrome, check that it's not your latest and greatest 5k monitor that isn't being a little too clever for it's own good!
Suspecting a Chrome issue, I googled and found quite a few threads discussing blurred images, but then opened the same site in Safari, only to see the same issue. Curiouser and curiouser!
I'm using a modern iMac with a Retina 5K screen - surely this can't be treating the same image differently depending upon the app it's being viewed in? I also have a second monitor to my right - a Dell U2715H - that I use to keep an eye on mail and server metrics, which is also fed from an AMD Radeon R9 M390 2048MB graphics card (as per the iMac monitor). So let's see; let's drag the Chrome window over from the Mac monitor to the Dell monitor, and now compare the test images in Chrome, Safari and Photoshop ...wait for it - they're all the same, nice and sharp!
Moral of the story: before looking to blame c5 or Chrome, check that it's not your latest and greatest 5k monitor that isn't being a little too clever for it's own good!
And see if that helps. Keep in mind you will need to manually go in and delete your old thumbnails from the file directory under files/cache via ftp or similar :)
we had problems with this on this site:http://www.racheltrevormorgan.com/collections/hats... Since the thumbnails were so small we had to figure out where it was set and up the quality to make them look good.