Help setting up
Closed this issue · 1 comments
Tazi0 commented
I've followed the instruction steps but when rendering it gives me this error.
GET https://portfolio.ddev.site/media/pages/home/360f2650a6-1712227239/img_6166-1200x1201-crop-q65-sharpen25.avif 500 (Internal Server Error)
Which is logical because I've uploaded a JPEG. Am I missing anything? Is there auto converter which creates the respective formats?
my steps
compose require
of courseconfig.php
/**
* Timnarr plugin configuration
* @see https://github.com/timnarr/kirby-imagex
*/
'timnarr.imagex' => [
'cache' => true,
'customLazyloading' => false,
'formats' => ['avif', 'webp'],
'includeInitialFormat' => true,
'noSrcsetInImg' => false,
'relativeUrls' => false,
],
'thumbs' => [
'srcsets' => [
'my-srcset' => [ // preset for jpeg and png
'400w' => ['width' => 400, 'crop' => true, 'quality' => 80],
'800w' => ['width' => 800, 'crop' => true, 'quality' => 80],
'1200w' => ['width' => 1200, 'crop' => true, 'quality' => 80],
],
'my-srcset-webp' => [ // preset for webp
'400w' => ['width' => 400, 'crop' => true, 'quality' => 75, 'format' => 'webp', 'sharpen' => 10],
'800w' => ['width' => 800, 'crop' => true, 'quality' => 75, 'format' => 'webp', 'sharpen' => 10],
'1200w' => ['width' => 1200, 'crop' => true, 'quality' => 75, 'format' => 'webp', 'sharpen' => 10],
],
'my-srcset-avif' => [ // preset for avif
'400w' => ['width' => 400, 'crop' => true, 'quality' => 65, 'format' => 'avif', 'sharpen' => 25],
'800w' => ['width' => 800, 'crop' => true, 'quality' => 65, 'format' => 'avif', 'sharpen' => 25],
'1200w' => ['width' => 1200, 'crop' => true, 'quality' => 65, 'format' => 'avif', 'sharpen' => 25],
],
],
],
- creating a simple snippet
snippets/atoms/imagex.php
<?php
$options = [
'image' => $image->toFile(),
'srcsetName' => 'my-srcset',
];
?>
<figure <?= merge('overflow-hidden', $class ?? '') ?>>
<?php snippet('imagex-picture', $options) ?>
</figure>
- Adding the snippet to my block
<?= snippet('atoms/imagex', ['image' => $block->image(), 'class' => 'rounded-full w-20 mb-6']) ?>
- Adding field
fields:
image:
type: files
label: field.blocks.gallery.images.label
uploads:
template: image
info: "{{ file.dimensions }}"
multiple: false
width: 1/2
size: small
Tazi0 commented
figured it out! After some digging in the forum i found this in which a driver was set which wasn't at mine!
'thumbs' => [
'driver' => 'im', // HERE
'srcsets' => [
'my-srcset' => [ // preset for jpeg and png
'400w' => ['width' => 400, 'crop' => true, 'quality' => 80],
'800w' => ['width' => 800, 'crop' => true, 'quality' => 80],
'1200w' => ['width' => 1200, 'crop' => true, 'quality' => 80],
],
'my-srcset-webp' => [ // preset for webp
'400w' => ['width' => 400, 'crop' => true, 'quality' => 75, 'format' => 'webp', 'sharpen' => 10],
'800w' => ['width' => 800, 'crop' => true, 'quality' => 75, 'format' => 'webp', 'sharpen' => 10],
'1200w' => ['width' => 1200, 'crop' => true, 'quality' => 75, 'format' => 'webp', 'sharpen' => 10],
],
'my-srcset-avif' => [ // preset for avif
'400w' => ['width' => 400, 'crop' => true, 'quality' => 65, 'format' => 'avif', 'sharpen' => 25],
'800w' => ['width' => 800, 'crop' => true, 'quality' => 65, 'format' => 'avif', 'sharpen' => 25],
'1200w' => ['width' => 1200, 'crop' => true, 'quality' => 65, 'format' => 'avif', 'sharpen' => 25],
],
],
],