✍️ Watermark Plugin

Resources Plugins
1

Hello

For personal needs, I just created a watermark plugin that adds a signature directly onto the image after filling out a watermark field, which I’m sharing with you here. Fill in the field, save, then open the image (icon in the top right corner) to see the signature in the corner of the image. To change the signature, re-upload the original image and repeat the process.

Blueprint example default.yml

title: Image
create:
  width: 1920
accept:
  extension: jpg, png
  
fields:
  watermark:
    label: Copyright
    type: text
    before: ©

Plugin into site/plugins/watermarks/index.php

<?php

use Kirby\Filesystem\F;

Kirby::plugin('custom/watermark', [
  'hooks' => [
    'file.update:after' => function ($newFile, $oldFile) {
      if (!in_array($newFile->extension(), ['jpg', 'png'])) return;

      $watermarkRaw = $newFile->watermark()->value();
      if (empty($watermarkRaw) || $newFile->watermark()->value() === $oldFile->watermark()->value()) return;

      $watermarkText = '© ' . $watermarkRaw;

      $imagePath = $newFile->root();

           
      if ($newFile->extension() === 'jpg') {
        $image = imagecreatefromjpeg($imagePath);
      } else {
        $image = imagecreatefrompng($imagePath);
      }

      if (!$image) return;

      $white = imagecolorallocatealpha($image, 255, 255, 255, 60); 
      $fontSize = 14;
      $margin = 20;
      $fontFile = __DIR__ . '/arial.ttf';

      if (!file_exists($fontFile)) return;

      $bbox = imagettfbbox($fontSize, 0, $fontFile, $watermarkText);
      $textWidth = abs($bbox[4] - $bbox[0]);
      $textHeight = abs($bbox[5] - $bbox[1]);

      $imageWidth = imagesx($image);
      $imageHeight = imagesy($image);

      $x = $imageWidth - $textWidth - $margin;
      $y = $imageHeight - $margin;

      imagettftext($image, $fontSize, 0, $x, $y, $white, $fontFile, $watermarkText);

      if ($newFile->extension() === 'jpg') {
        imagejpeg($image, $imagePath, 90);
      } else {
        imagepng($image, $imagePath);
      }

      imagedestroy($image);
    }
  ]
]);

Don’t forget to add your font file “arial.ttf” into the same directory

1 Like