timnarr/kirby-imagex

Help setting up

Closed this issue · 1 comments

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

  1. compose require of course
  2. config.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],
            ],
        ],
    ],
  1. creating a simple snippetsnippets/atoms/imagex.php
<?php

$options = [
  'image' => $image->toFile(),
  'srcsetName' => 'my-srcset',
];

?>

<figure <?= merge('overflow-hidden', $class ?? '') ?>>
  <?php snippet('imagex-picture', $options) ?>
</figure>
  1. Adding the snippet to my block
<?= snippet('atoms/imagex', ['image' => $block->image(), 'class' => 'rounded-full w-20 mb-6']) ?>
  1. 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
  1. uploading file
    Screenshot 2024-04-04 at 13 50 44
  2. Checking the page and seeing the error

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],
            ],
        ],
    ],