How to get srcset and thumbs + Image quality not working?

Kirby 3 Solved ✅
#1

I am trying to create srcsets with a low quality. The srcsets are made, but I am not sure the quality works, also the width and height are not generated together in ‘xs’ or in ‘1’. What am I doing wrong?
Thanks in advance!

<?php

    return [
        'debug'  => true
    ];
    return [
      'markdown' => [
        'extra' => true
      ]
    ];



    return [		
        'thumbs' => [
    		'presets' => [
               	'default' => ['width' => 2000, 'quality' => 30],
                's' => ['width' => 600, 'quality' => 30],
    			'xs' => ['width' => 1, 'height' => 1, 'quality' => 30]
            ]
        ]
    ];


    return [
        'thumbs' => [
    		    'driver' => 'im',
    		    'interlace'  => 'plane',
    			'quality'   => 30,
    		    'srcsets' => [
                	'default' => [1 =>['width' => 1, 'height' => 1, 'quality' => 30], 300, 500, 1000, 2000]
    				]
        ]
    ];
#2

Please see the docs: https://getkirby.com/docs/reference/system/options/thumbs#srcsets

#3

I have based my code on that page. I just don’t understand why it is not working. Do you see any
thing wrong with the code?

#4

You use presets not srcsets

presets for thumbs (used with the thumb()method)
srcsets for srcsets (used with the srcset() method)

#5

Did you scroll through the code? Below I do.

#6

Ah, sorry, didn’t see that.

But your config has multiple return statements. You should only have one: https://getkirby.com/docs/guide/configuration#the-config-php. All config options go within a single return array. And everything after your first return statement will be ignored.

Check out what return does for a deeper understanding: https://www.php.net/manual/en/function.return.php

#7

HI Texnixe,

I have been working with the previous help, but I am still not sure if it is functioning properly.
Mainly the conversion of gif files doesn’t work. Also the low image quality seems to stay high.
Is there anything wrong with the code bellow?

<?php

return [
  'omz13.xmlsitemap.cacheTTL' => 60,
  'omz13.xmlsitemap.includeUnlistedWhenSlugIs' => [ ],
  'omz13.xmlsitemap.includeUnlistedWhenTemplateIs' => [ ],
  'omz13.xmlsitemap.excludePageWhenTemplateIs' => [ 'content_accordion','content_collection_inline', 'content_iframe', 'content_imagesheet', 'content_photo'  ],
  'omz13.xmlsitemap.excludePageWhenSlugIs' => [],
  'omz13.xmlsitemap.excludeChildrenWhenTemplateIs' => [ ],
	
	'debug'  => true,

  'markdown' => [
    'extra' => true
  ],

  'hooks' => [
        'page.create:after' => function ($page) {
          $page->changeStatus('listed');
          }
  ],

  'medienbaecker.autofavicon.text' => '',
  'medienbaecker.autofavicon.color' => '#000000',
  'medienbaecker.autofavicon.color_dark' => '#rrrrrr',
    		
  'thumbs' => [
  		'driver'    => 'im',
			'quality'   => 30,
      'srcsets'   => [
            	  'default' => [1, 300, 500, 1000, 2000]
			],
            'presets' => [
                'default' => ['width' => 2000, 'quality' => 30],
                's' => ['width' => 600, 'quality' => 30],
                'xs' => ['width' => 1, 'height' => 1, 'quality' => 30]
        ]
    ]
  ];

  array(
  'sylvainjule.colorextractor.average' => false,
  );

  array(
  'sylvainjule.colorextractor.fallbackColor' => '#000000',
  );

 [
  'languages' => true,
 ];
#8

Unrelated to your problem, but the last three arrays won’t have any effect at all

#9

I do get this error when uploading:

exec() has been disabled for security reasons

#10

What should I change to maken it work? I see now it doesnt work indeed. Thanks!

#11

All settings have to be within the return array.

#12

Then you have to get in contact with your hosting provider, because the thumbs driver calls exec(), so it may not be disabled.

#14

I still dont get it to work. Strange enough the last three did work previously. Bu tin the code bellow they dont. Any ideas?

    <?php

return [
  'omz13.xmlsitemap.cacheTTL' => 60,
  'omz13.xmlsitemap.includeUnlistedWhenSlugIs' => [ ],
  'omz13.xmlsitemap.includeUnlistedWhenTemplateIs' => [ ],
  'omz13.xmlsitemap.excludePageWhenTemplateIs' => [ 'content_accordion','content_collection_inline', 'content_iframe', 'content_imagesheet', 'content_photo'  ],
  'omz13.xmlsitemap.excludePageWhenSlugIs' => [],
  'omz13.xmlsitemap.excludeChildrenWhenTemplateIs' => [ ],
	
	'debug'  => true,

  'markdown' => [
    'extra' => true
  ],

  'hooks' => [
        'page.create:after' => function ($page) {
          $page->changeStatus('listed');
          }
  ],

  'medienbaecker.autofavicon.text' => '',
  'medienbaecker.autofavicon.color' => '#000000',
  'medienbaecker.autofavicon.color_dark' => '#rrrrrr',
    		
  'thumbs' => [
  		'driver'    => 'im',
			'quality'   => 30,
      'srcsets'   => [
            	  'default' => [1, 300, 500, 1000, 2000]
			],
            'presets' => [
                'default' => ['width' => 2000, 'quality' => 30],
                's' => ['width' => 600, 'quality' => 30],
                'xs' => ['width' => 1, 'height' => 1, 'quality' => 30]
        ]
            ],


  array(
  'sylvainjule.colorextractor.average' => false,
  ),

  array(
  'sylvainjule.colorextractor.fallbackColor' => '#000000',
  ),

 [
  'languages' => true,
 ]
 ];
#15

Let’s start with properly formatting the file:

<?php

return [
    'omz13.xmlsitemap.cacheTTL' => 60,
    'omz13.xmlsitemap.includeUnlistedWhenSlugIs' => [],
    'omz13.xmlsitemap.includeUnlistedWhenTemplateIs' => [],
    'omz13.xmlsitemap.excludePageWhenTemplateIs' => ['content_accordion', 'content_collection_inline', 'content_iframe', 'content_imagesheet', 'content_photo'],
    'omz13.xmlsitemap.excludePageWhenSlugIs' => [],
    'omz13.xmlsitemap.excludeChildrenWhenTemplateIs' => [],

    'debug'  => true,

    'markdown' => [
        'extra' => true
    ],

    'hooks' => [
        'page.create:after' => function ($page) {
            $page->changeStatus('listed');
        }
    ],

    'medienbaecker.autofavicon.text' => '',
    'medienbaecker.autofavicon.color' => '#000000',
    'medienbaecker.autofavicon.color_dark' => '#rrrrrr',

    'thumbs' => [
        'driver'    => 'im',
        'quality'   => 30,
        'srcsets'   => [
            'default' => [1, 300, 500, 1000, 2000]
        ],
        'presets' => [
            'default' => ['width' => 2000, 'quality' => 30],
            's' => ['width' => 600, 'quality' => 30],
            'xs' => ['width' => 1, 'height' => 1, 'quality' => 30]
        ]
    ],

    'sylvainjule.colorextractor.average' => false,
    'sylvainjule.colorextractor.fallbackColor' => '#000000',

    'languages' => true,

];

There should never be whitespace before the opending PHP tag

#16

Thanks a lot. That worked. (How did I not see that???)

#17

I saw it wrong. It was my own code that ‘worked’. :frowning:

My hosting service said they cant change the exec(). (One.com)
That means that I cant use the IM driver right?

In my old code the image resizing worked, even on gif files.
Also the

 [
  'languages' => true,
 ];

part worked which is the last one. So there must be something different going on.

I really don’t know what to do anymore. Already struggling with this for over a year.

Any ideas or checks I could do?

#18

This is my last code by the way:

<?php
c::set('panel.install', true); 



return [
  'omz13.xmlsitemap.cacheTTL' => 60,
  'omz13.xmlsitemap.includeUnlistedWhenSlugIs' => [ ],
  'omz13.xmlsitemap.includeUnlistedWhenTemplateIs' => [ ],
  'omz13.xmlsitemap.excludePageWhenTemplateIs' => [ 'content_accordion','content_collection_inline', 'content_iframe', 'content_imagesheet', 'content_photo'  ],
  'omz13.xmlsitemap.excludePageWhenSlugIs' => [],
  'omz13.xmlsitemap.excludeChildrenWhenTemplateIs' => [ ],
	
	
	'debug'  => true,

  'markdown' => [
    'extra' => true
  ],

'hooks' => [
        'page.create:after' => function ($page) {
          $page->changeStatus('listed');
          }
        ],

'medienbaecker.autofavicon.text' => '',
'medienbaecker.autofavicon.color' => '#000000',
'medienbaecker.autofavicon.color_dark' => '#FFFFFF'
  
];

		

return [		
    'thumbs' => [
		'driver' => 'im',
    'bin' => 'convert',
    'interlace'  => 'plane',
			'quality'   => 30,
		    'srcsets' => [
              'cover' => [
                    '800w' => ['width' => 800, 'quality' => 80],
                    '1200w' => ['width' => 1200, 'quality' => 80],
                    '1600w' => ['width' => 1600, 'quality' => 80],
                    '2000w' => ['width' => 2000, 'quality' => 80]
                    ],
                'column' => [
                    '100w' => ['width' => 400, 'quality' => 80],
                    '800w' => ['width' => 800, 'quality' => 80]
                    ],
                'half' => [
                    '100w' => ['width' => 200, 'quality' => 80],
                    '800w' => ['width' => 400, 'quality' => 80]
                    ],
                'quarter' => [
                    '100w' => ['width' => 200, 'quality' => 80],
                    '800w' => ['width' => 300, 'quality' => 80]
                    ],
            	  'default' => [1 =>['height' => 1, 'quality' => 30], 300, 500, 1000, 2000]
				],
            'presets' => [
                'default' => ['width' => 2000, 'quality' => 30],
                's' => ['width' => 600, 'quality' => 30],
                'xs' => ['width' => 1, 'height' => 1, 'quality' => 30]
        ]
    ]
];

return array(
  'sylvainjule.colorextractor.average' => false,
);
return array(
  'sylvainjule.colorextractor.fallbackColor' => '#000000',
);

return [
  'languages' => true,
];
#19

As has already been mentioned above, all return statements after the first one will be ignored. You can read what return does and why that is the case here: PHP: return - Manual

@pixelijn has shown you what your config should look like How to get srcset and thumbs + Image quality not working? - #15 by pixelijn

#20

I tried that, and I made it work like bellow. Here the driver is defined as IM,
but gifs are not animating . Also I set the quality to ‘1’ just see if it works, but I dont think this part works either.

That makes me think it is not working as supposed to. Or am i missing something?
How can I check if ImageMagick is truly functioning?

Does ImageMagick only work when the images are uploaded,
or are changes in the config file also applied to previous uplaoded images?

Sorry I am being such a bore.

<?php
c::set('panel.install', true);



return [
  'thumbs' => [
    'driver' => 'im',
    'quality'   => 1,
    'srcsets' => [
      'default' => [
        1, 300, 500, 1000, 2000
      ]
    ],
    'presets' => [
      'default' => ['width' => 2000, 'quality' => 30],
      's' => ['width' => 600, 'quality' => 30],
      'xs' => ['width' => 1, 'height' => 1, 'quality' => 30]
    ]
  ],

  'omz13.xmlsitemap.cacheTTL' => 60,
  'omz13.xmlsitemap.includeUnlistedWhenSlugIs' => [],
  'omz13.xmlsitemap.includeUnlistedWhenTemplateIs' => [],
  'omz13.xmlsitemap.excludePageWhenTemplateIs' => ['content_accordion', 'content_collection_inline', 'content_iframe', 'content_imagesheet', 'content_photo'],
  'omz13.xmlsitemap.excludePageWhenSlugIs' => [],
  'omz13.xmlsitemap.excludeChildrenWhenTemplateIs' => [],

  'debug'  => true,

  'markdown' => [
    'extra' => true
  ],

  'hooks' => [
    'page.create:after' => function ($page) {
      $page->changeStatus('listed');
    }
  ],

  'medienbaecker.autofavicon.text' => '',
  'medienbaecker.autofavicon.color' => '#000000',
  'medienbaecker.autofavicon.color_dark' => '#FFFFFF',

  array(
    'sylvainjule.colorextractor.average' => false,
  ),
  array(
    'sylvainjule.colorextractor.fallbackColor' => '#000000',
  ),

  [
    'languages' => true,
  ]
];
#21

Again, these settings should not be in their own array. Nothing to do with your issue, but it doesn’t make sense if you ignore our recommendations.