Image assets pixelated on frontend after Kirby update

The CMS Questions
21

So the code to render the thumbs is along the lines of this:

'image' => $project->listingimage()->toFile()->resize(800)->url()
22

@rasteiner discovered it was happening specifically to .jpeg and not .png files

23

I’ve just added that to my config file, but nothing has happened.

24

Deleting the generated thumbnail images in the media folder should suffice.

If you open your website’s sourcecode in an IDE, and search over the whole site folder the word quality, does something suspicious show up?

25

So this is what I have now added to my config file.

	'thumbs' => [
		'driver' => 'im',
		'quality' => 100
	],

I’ve performed a search on the whole site folder and the only reference to quality is from the new reference in the config file.

26

Does this work now? If not, have you ever tested if you run into the same issue in your local dev environment?

27

Not working as of yet. I will give a try with the local dev environment, but I may also try and attempt to reclone the origin site.

28

Just to confirm my config theory, could you add this somewhere to a template and tell us what it outputs?

<?php
var_dump(option('thumbs'));
?>
29

i’ve run into the same problem a couple weeks ago. already did a post at the time.

the bad quality jpeg issue ocurred after updating to kirby 3.9 and only happens on the webserver. the local project is running fine with mamp. even thumbs in the panel don’t look good.

as a workaround i’ve changed the format for thumbs to gif in the config. not really a good solution but at least images were not pixelated anymore.

30

OK so I’ve just added that, but I’ve also:

  • recloned the site from the origin to a new copy at https://phpstack-585419-3968763.cloudwaysapps.com/en
  • added the following to my config
	'thumbs' => [
		'driver' => 'im',
		'quality' => 100,
	],
  • deleted the media folder

Et voila! Images are now rendering how they should.

This is what is being output now: array(2) { ["driver"]=> string(2) "im" ["quality"]=> int(100) }

31

To me, that looks rather like the original image is used and not a thumb. Are you sure that ImageMagick is available on the server? If not, then you cannot use the im driver, but have to stick with GD. If you do have ImageMagick installed, you might have to add the path to the convert binary: thumbs | Kirby CMS

32

yup, that’s not 800 pixels wide: https://phpstack-585419-3968763.cloudwaysapps.com/media/pages/work/the-wheel-of-time-s2/f51afc4227-1696886881/wotposter-800x.jpg

So in the template it’s getting the correct config, but not when generating the thumbnails. I really don’t know what’s happening there.

33

Quite possibly…

Cloudways has confirmed ImageMagick is available.

The only issue I’m getting now is a message saying Class "Composer\Semver\Semver" not found when I click ‘System’ in the backend.

34

What I did notice, at least for this image (qcuzkcqx79lxbrlrk6ssw2b5mjd-800x.jpg), is that the original dimensions are 600x900. So rendering it at 800px wide would mean it would have to upscale.

35

Hmm… it is quite a long-in-the-tooth install now so chances are some best practices are absent.

I’ve never had to declare anything regarding thumbs prior to the 3.9 update.

36

Yes, unfortunately, there are a lot of images on this site that require reprocessing as a result of some recent client led UI layout decisions so a fair bit of upscaling is going on.

37

We haven’t actually tried without the im driver, I think…

config:

	'thumbs' => [
		// 'driver' => 'im', // remove this line
		'quality' => 100,
	],

Then delete the media folder and try again

PS:
some wild guesses:

  • does the project use a standard Kirby index.php?
  • does it use a standard .htaccess?
  • does your site define any additional routes?
38

OK I’ve just removed the driver line and deleted the media folder, but it appears we’re back to pixelated images.

That’ll be a no to the index.php in the site folder but there is an index.php in the root. .htaccess does have some modifications.

Below is probably the only additional route worth a mention if that helps.

	'routes' => [
		[
			'pattern' => 'upgrade',
			'action'  => function () {
				return Kirby\Cms\System::upgradeContent(kirby()->root('content'));
			},
		],
	],
39

yes, I mean the one in the root folder. That’s another place one could think of having configuration options.

I guess none of those modifications concern the media folder?

that looks harmless (you probably want to remove it, though, if you don’t use it anymore. Its purpose was to migrate content from kirby 2).

I’m out of ideas… Being there I would probably start hacking and taking stuff apart.

40

What if you explicitly put the quality into the template, where you generate the thumbnails:

'image' => $project->listingimage()->toFile()->resize(800, quality: 100)->url()

Does that, at least, work?