Thumbs not generated (using CloudPanel one server)

I’m attempting to setup my Apache server using https://www.cloudpanel.io/ to manage multiple websites.

I have previously created Kirby websites with Apache server and Debian 11. I’ve done the same for this.

Everything is working fine except for no media thumbs are generated. I get no relevant errors logged except that the relevant media file cannot be found when I navigate to the relevant page.

I have trawled through the various suggested solutions in different Kirby forums.

I can confirm the following:

  1. imagick (3.5.1) and GD (2.3.0) are installed and enabled (php 8.1 with the same issue replicable with php 8.0)
  2. Permissions for directory/file are set to 755/644.
  3. Ownership is set to the relevant site owner (for cloudpanel this is not www-data:www-data but siteowner:siteowner, where each website has its own “owner”)
  4. The media folder and relevant image files are generated correctly by the Blurry Placeholder plugin.
  5. Accounts folder is created when signing in to the panel for the first time.
  6. I have tried the broken thumbs driver solution but this does not work either (noting that /usr/local/bin/convert does exist on my server)
  7. Thumbs generations appears to be failing silently, with no errors.
  8. The issue occurs accross multiple, independently set-up Kirby websites.

Any leads very much appreciated!

Which thumb driver is set in your config.php?

Does Kirby write the .job files for the thumbs?

I have tried with no thumbs driver specified (which I understand means GD Lib applies based on the thumbs documentation) and with ImageMagick.

I have tried with no thumbs settings in config and with the convert absolute path specified.

Here is my full config.php file with ImageMagick and convert path specified:

<?php

return [
    'panel' => [
        'install' => true   // https://getkirby.com/docs/reference/system/options/panel
        // turn to false once installed
    ],

    'debug' => true, // turn to false once finished

    # https://github.com/medienbaecker/kirby-autoresize
    'medienbaecker.autoresize.maxWidth' => 1980,

    # https://getkirby.com/docs/reference/objects/cms/file/srcset
    'thumbs' => [
        'driver' => 'im',                                       //https://getkirby.com/docs/guide/troubleshooting/thumbnails
        'bin' => '/usr/local/bin/convert',                      //https://getkirby.com/docs/guide/troubleshooting/thumbnails
        'srcsets' => [                                          // https://getkirby.com/docs/cookbook/performance/responsive-images
            'default' => [
                '300w'  => ['width' => 300],
                '600w'  => ['width' => 600],
                '900w'  => ['width' => 900],
                '1200w' => ['width' => 1200],
                '1800w' => ['width' => 1800]
            ],
            'avif' => [
                '300w'  => ['width' => 300, 'format' => 'avif'],
                '600w'  => ['width' => 600, 'format' => 'avif'],
                '900w'  => ['width' => 900, 'format' => 'avif'],
                '1200w' => ['width' => 1200, 'format' => 'avif'],
                '1800w' => ['width' => 1800, 'format' => 'avif']
            ],
            'webp' => [
                '300w'  => ['width' => 300, 'format' => 'webp'],
                '600w'  => ['width' => 600, 'format' => 'webp'],
                '900w'  => ['width' => 900, 'format' => 'webp'],
                '1200w' => ['width' => 1200, 'format' => 'webp'],
                '1800w' => ['width' => 1800, 'format' => 'webp']
            ],
        ]
    ]
];

Apologies forgot to note, .jobs is written for the placeholders made by the Blurry Placeholder plugin—but not for the main page image files.

actually, on second review it appears .jobs is written

Does the autoresizing plugin work?

Excellent suggestion. Now I have an error thrown from the panel:

Screen Shot 2022-09-18 at 7.13.31 pm.png

The imagemagick convert command could not be executed: '/usr/local/bin/convert' -limit thread 1 'pathToSite/content/pathToPage/screen-shot-2022-09-18-at-7.13.31-pm.png' -strip -auto-orient -thumbnail '1980x1133!' -quality '90' '/pathToSite/content/pathToPage/screen-shot-2022-09-18-at-7.13.31-pm.png'

In relation to this, I have disable_functions=''; in the relevant php.ini (which I had already done as part of my troubleshooting with the thought exec() may be disabled)

That error is thrown from Kirby in ImageMagick.php line 164, so it seems that the exec() command cannot be executed.

Test what you get when you do a simple exec() test in a template:

exec('whoami', $output, $retval);
dump($output);
dump($retval);

The answer: I am siteowner (the same siteowner specified in my sudo chown -R siteowner:siteowner . command — i.e., the owner of all directories/files).

The issue might be this: siteowner may not have permission to execute /usr/local/bin/convert/

Hm, can you execute the convert command on the command line as siteowner?

Yes I can, i.e., if I execute a blank convert I get:

siteuser@vultr:~$ convert
Version: ImageMagick 7.1.0-49 beta Q16-HDRI x86_64 c243c9281:20220911 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI OpenMP(4.5) 
Delegates (built-in): x 
Compiler: gcc (10.2)
Usage: convert [options ...] file [ [options ...] file ...] [options ...] file

Image Settings:
  -adjoin              join images into a single multi-image file
  -affine matrix       affine transform matrix
  -alpha option        activate, deactivate, reset, or set the alpha channel
  -antialias           remove pixel-aliasing
  -authenticate password
                       decipher image with this password
  -attenuate value     lessen (or intensify) when adding noise to an image
  -background color    background color
  -bias value          add bias when convolving an image
  -black-point-compensation
                       use black point compensation
  -blue-primary point  chromaticity blue primary point
  -bordercolor color   border color
  -caption string      assign a caption to an image
  -clip                clip along the first path from the 8BIM profile
  -clip-mask filename  associate a clip mask with the image
  -clip-path id        clip along a named path from the 8BIM profile
  -colorspace type     alternate image colorspace
  -comment string      annotate image with comment
  -compose operator    set image composite operator
  -compress type       type of pixel compression when writing the image
  -define format:option
                       define one or more image format options
  -delay value         display the next image after pausing
  -density geometry    horizontal and vertical density of the image
  -depth value         image depth
  -direction type      render text right-to-left or left-to-right
  -display server      get image or font from this X server
  -dispose method      layer disposal method
  -dither method       apply error diffusion to image
  -encoding type       text encoding type
  -endian type         endianness (MSB or LSB) of the image
  -family name         render text with this font family
  -features distance   analyze image features (e.g. contrast, correlation)
  -fill color          color to use when filling a graphic primitive
  -filter type         use this filter when resizing an image
  -font name           render text with this font
  -format "string"     output formatted image characteristics
  -fuzz distance       colors within this distance are considered equal
  -gravity type        horizontal and vertical text placement
  -green-primary point chromaticity green primary point
  -illuminant type     reference illuminant
  -intensity method    method to generate an intensity value from a pixel
  -intent type         type of rendering intent when managing the image color
  -interlace type      type of image interlacing scheme
  -interline-spacing value
                       set the space between two text lines
  -interpolate method  pixel color interpolation method
  -interword-spacing value
                       set the space between two words
  -kerning value       set the space between two letters
  -label string        assign a label to an image
  -limit type value    pixel cache resource limit
  -loop iterations     add Netscape loop extension to your GIF animation
  -matte               store matte channel if the image has one
  -mattecolor color    frame color
  -moments             report image moments
  -monitor             monitor progress
  -orient type         image orientation
  -page geometry       size and location of an image canvas (setting)
  -ping                efficiently determine image attributes
  -pointsize value     font point size
  -precision value     maximum number of significant digits to print
  -preview type        image preview type
  -quality value       JPEG/MIFF/PNG compression level
  -quiet               suppress all warning messages
  -read-mask filename  associate a read mask with the image
  -red-primary point   chromaticity red primary point
  -regard-warnings     pay attention to warning messages
  -remap filename      transform image colors to match this set of colors
  -repage geometry     size and location of an image canvas
  -respect-parentheses settings remain in effect until parenthesis boundary
  -sampling-factor geometry
                       horizontal and vertical sampling factor
  -scene value         image scene number
  -seed value          seed a new sequence of pseudo-random numbers
  -size geometry       width and height of image
  -stretch type        render text with this font stretch
  -stroke color        graphic primitive stroke color
  -strokewidth value   graphic primitive stroke width
  -style type          render text with this font style
  -support factor      resize support: > 1.0 is blurry, < 1.0 is sharp
  -synchronize         synchronize image to storage device
  -taint               declare the image as modified
  -texture filename    name of texture to tile onto the image background
  -tile-offset geometry
                       tile offset
  -treedepth value     color tree depth
  -transparent-color color
                       transparent color
  -undercolor color    annotation bounding box color
  -units type          the units of image resolution
  -verbose             print detailed information about the image
  -view                FlashPix viewing transforms
  -virtual-pixel method
                       virtual pixel access method
  -weight type         render text with this font weight
  -white-point point   chromaticity white point
  -write-mask filename associate a write mask with the image  -word-break type     sets whether line breaks appear wherever the text would otherwise overflow

Image Operators:
  -adaptive-blur geometry
                       adaptively blur pixels; decrease effect near edges
  -adaptive-resize geometry
                       adaptively resize image using 'mesh' interpolation
  -adaptive-sharpen geometry
                       adaptively sharpen pixels; increase effect near edges
  -alpha option        on, activate, off, deactivate, set, opaque, copy
                       transparent, extract, background, or shape
  -annotate geometry text
                       annotate the image with text
  -auto-gamma          automagically adjust gamma level of image
  -auto-level          automagically adjust color levels of image
  -auto-orient         automagically orient (rotate) image
  -auto-threshold method
                       automatically perform image thresholding
  -bench iterations    measure performance
  -bilateral-blur geometry
                       non-linear, edge-preserving, and noise-reducing smoothing filter
  -black-threshold value
                       force all pixels below the threshold into black
  -blue-shift factor   simulate a scene at nighttime in the moonlight
  -blur geometry       reduce image noise and reduce detail levels
  -border geometry     surround image with a border of color
  -bordercolor color   border color
  -brightness-contrast geometry
                       improve brightness / contrast of the image
  -canny geometry      detect edges in the image
  -cdl filename        color correct with a color decision list
  -channel mask        set the image channel mask
  -charcoal radius     simulate a charcoal drawing
  -chop geometry       remove pixels from the image interior
  -clahe geometry      contrast limited adaptive histogram equalization
  -clamp               keep pixel values in range (0-QuantumRange)
  -colorize value      colorize the image with the fill color
  -color-matrix matrix apply color correction to the image
  -colors value        preferred number of colors in the image
  -connected-components connectivity
                       connected-components uniquely labeled
  -contrast            enhance or reduce the image contrast
  -contrast-stretch geometry
                       improve contrast by 'stretching' the intensity range
  -convolve coefficients
                       apply a convolution kernel to the image
  -cycle amount        cycle the image colormap
  -decipher filename   convert cipher pixels to plain pixels
  -deskew threshold    straighten an image
  -despeckle           reduce the speckles within an image
  -distort method args
                       distort images according to given method and args
  -draw string         annotate the image with a graphic primitive
  -edge radius         apply a filter to detect edges in the image
  -encipher filename   convert plain pixels to cipher pixels
  -emboss radius       emboss an image
  -enhance             apply a digital filter to enhance a noisy image
  -equalize            perform histogram equalization to an image
  -evaluate operator value
                       evaluate an arithmetic, relational, or logical expression
  -extent geometry     set the image size
  -extract geometry    extract area from image
  -fft                 implements the discrete Fourier transform (DFT)
  -flip                flip image vertically
  -floodfill geometry color
                       floodfill the image with color
  -flop                flop image horizontally
  -frame geometry      surround image with an ornamental border
  -function name parameters
                       apply function over image values
  -gamma value         level of gamma correction
  -gaussian-blur geometry
                       reduce image noise and reduce detail levels
  -geometry geometry   preferred size or location of the image
  -grayscale method    convert image to grayscale
  -hough-lines geometry
                       identify lines in the image
  -identify            identify the format and characteristics of the image
  -ift                 implements the inverse discrete Fourier transform (DFT)
  -implode amount      implode image pixels about the center
  -integral            calculate the sum of values (pixel values) in the image
  -interpolative-resize geometry
                       resize image using interpolation
  -kmeans geometry     K means color reduction
  -kuwahara geometry   edge preserving noise reduction filter
  -lat geometry        local adaptive thresholding
  -level value         adjust the level of image contrast
  -level-colors color,color
                       level image with the given colors
  -linear-stretch geometry
                       improve contrast by 'stretching with saturation'
  -liquid-rescale geometry
                       rescale image with seam-carving
  -local-contrast geometry
                       enhance local contrast
  -mean-shift geometry delineate arbitrarily shaped clusters in the image
  -median geometry     apply a median filter to the image
  -mode geometry       make each pixel the 'predominant color' of the
                       neighborhood
  -modulate value      vary the brightness, saturation, and hue
  -monochrome          transform image to black and white
  -morphology method kernel
                       apply a morphology method to the image
  -motion-blur geometry
                       simulate motion blur
  -negate              replace every pixel with its complementary color 
  -noise geometry      add or reduce noise in an image
  -normalize           transform image to span the full range of colors
  -opaque color        change this color to the fill color
  -ordered-dither NxN
                       add a noise pattern to the image with specific
                       amplitudes
  -paint radius        simulate an oil painting
  -perceptible epsilon
                       pixel value less than |epsilon| become epsilon or
                       -epsilon
  -polaroid angle      simulate a Polaroid picture
  -posterize levels    reduce the image to a limited number of color levels
  -profile filename    add, delete, or apply an image profile
  -quantize colorspace reduce colors in this colorspace
  -raise value         lighten/darken image edges to create a 3-D effect
  -random-threshold low,high
                       random threshold the image
  -range-threshold values
                       perform either hard or soft thresholding within some range of values in an image
  -region geometry     apply options to a portion of the image
  -render              render vector graphics
  -resample geometry   change the resolution of an image
  -resize geometry     resize the image
  -roll geometry       roll an image vertically or horizontally
  -rotate degrees      apply Paeth rotation to the image
  -rotational-blur angle
                       rotational blur the image
  -sample geometry     scale image with pixel sampling
  -scale geometry      scale the image
  -segment values      segment an image
  -selective-blur geometry
                       selectively blur pixels within a contrast threshold
  -sepia-tone threshold
                       simulate a sepia-toned photo
  -set property value  set an image property
  -shade degrees       shade the image using a distant light source
  -shadow geometry     simulate an image shadow
  -sharpen geometry    sharpen the image
  -shave geometry      shave pixels from the image edges
  -shear geometry      slide one edge of the image along the X or Y axis
  -sigmoidal-contrast geometry
                       increase the contrast without saturating highlights or
                       shadows
  -sketch geometry     simulate a pencil sketch
  -solarize threshold  negate all pixels above the threshold level
  -sort-pixels         sort each scanline in ascending order of intensity
  -sparse-color method args
                       fill in a image based on a few color points
  -splice geometry     splice the background color into the image
  -spread radius       displace image pixels by a random amount
  -statistic type geometry
                       replace each pixel with corresponding statistic from the
                       neighborhood
  -strip               strip image of all profiles and comments
  -swirl degrees       swirl image pixels about the center
  -threshold value     threshold the image
  -thumbnail geometry  create a thumbnail of the image
  -tile filename       tile image when filling a graphic primitive
  -tint value          tint the image with the fill color
  -transform           affine transform image
  -transparent color   make this color transparent within the image
  -transpose           flip image vertically and rotate 90 degrees
  -transverse          flop image horizontally and rotate 270 degrees
  -trim                trim image edges
  -type type           image type
  -unique-colors       discard all but one of any pixel color
  -unsharp geometry    sharpen the image
  -vignette geometry   soften the edges of the image in vignette style
  -wave geometry       alter an image along a sine wave
  -wavelet-denoise threshold
                       removes noise from the image using a wavelet transform
  -white-balance       automagically adjust white balance of image
  -white-threshold value
                       force all pixels above the threshold into white

Image Channel Operators:
  -channel-fx expression
                       exchange, extract, or transfer one or more image channels
  -separate            separate an image channel into a grayscale image

Image Sequence Operators:
  -append              append an image sequence
  -clut                apply a color lookup table to the image
  -coalesce            merge a sequence of images
  -combine             combine a sequence of images
  -compare             mathematically and visually annotate the difference between an image and its reconstruction
  -complex operator    perform complex mathematics on an image sequence
  -composite           composite image
  -copy geometry offset
                       copy pixels from one area of an image to another
  -crop geometry       cut out a rectangular region of the image
  -deconstruct         break down an image sequence into constituent parts
  -evaluate-sequence operator
                       evaluate an arithmetic, relational, or logical expression
  -flatten             flatten a sequence of images
  -fx expression       apply mathematical expression to an image channel(s)
  -hald-clut           apply a Hald color lookup table to the image
  -layers method       optimize, merge, or compare image layers
  -morph value         morph an image sequence
  -mosaic              create a mosaic from an image sequence
  -poly terms          build a polynomial from the image sequence and the corresponding
                       terms (coefficients and degree pairs).
  -print string        interpret string and print to console
  -process arguments   process the image with a custom image filter
  -smush geometry      smush an image sequence together
  -write filename      write images to this file

Image Stack Operators:
  -clone indexes       clone an image
  -delete indexes      delete the image from the image sequence
  -duplicate count,indexes
                       duplicate an image one or more times
  -insert index        insert last image into the image sequence
  -reverse             reverse image sequence
  -swap indexes        swap two images in the image sequence

Miscellaneous Options:
  -debug events        display copious debugging information
  -distribute-cache port
                       distributed pixel cache spanning one or more servers
  -help                print program options
  -list type           print a list of supported option arguments
  -log format          format of debugging information
  -version             print version information

By default, the image format of 'file' is determined by its magic
number.  To specify a particular image format, precede the filename
with an image format name and a colon (i.e. ps:image) or specify the
image type as the filename suffix (i.e. image.ps).  Specify 'file' as
'-' for standard input or output.

So to wrap up: convert() on the command line works and the PHP exec() command also didn’t throw an error. But you nevertheless get the error from the process() method.

What if you try to execute on the command line exactly the command that failed with exec() from Kirby?

I notice you are using a beta version of ImageMagick, try to use a stable version instead.

That give me the following:

convert: no decode delegate for this image format `PNG' @ error/constitute.c/ReadImage/741.
convert: no images defined `/pathToSite/content/pathToPage/screen-shot-2022-09-18-at-11.03.25-pm.png' @ error/convert.c/ConvertImageCommand/3342.

Have you made sure that the input and output paths you used are correct from where you started the command?

I believe so. I have use the absolute paths exactly as they appeared in the panel.

I have also tried a basic convert command directly from a Kirby page directory in the form convert input.jpg output.png

Same error message.

The same command works on my other server (Apache, Debian 11 as well) without CloudPanel installed.

Ok, then it seems it doesn’t have anything to do with Kirby or the exec() function, but rather with ImageMagick.

I think you’re right. Thanks for helping reach this conclusion!

Ok, I’ve reinstalled ImageMagick with IMEI.

Here is the outcome:

  1. I can manually execute with success from the command line convert input.jpg output.png in any page folder.
  2. The Autoresize plugin, which previously failed and spat out an error in the panel, now works correctly (images are uploaded and correctly resized).
  3. But—Kirby is still not generating thumbs…
1 Like

Hm, since the autoresize plugin uses Kirby’s thumb functionality, it seems to be working in general.

Note that the thumbs are only generated on the fly when a file url is called.

Are the thumbs for the Panel generated, i.e. the small preview images for sections etc.?