Merge branch 'develop'

Author: daun

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.1.2
+
+- Check for supported file formats
+- Regenerate placeholder when replacing single image
+
 ## 0.1.1
 
 - Allow generating missing placeholders for existing images

ImagePlaceholders.module.php

@@ -1,5 +1,7 @@
 <?php namespace ProcessWire;
 
+use Daun\Image;
+use Daun\Placeholders\PlaceholderAverageColor;
 use Daun\Placeholders\PlaceholderBlurHash;
 use Daun\Placeholders\PlaceholderThumbHash;
 
@@ -33,30 +35,27 @@ static public function getModuleInfo()
 	public function init()
 	{
 		$this->generators = [
-			// PlaceholderNone::class => $this->_('None'),
 			PlaceholderThumbHash::class => $this->_('ThumbHash'),
 			PlaceholderBlurHash::class => $this->_('BlurHash'),
-			// PlaceholderAverageColor::class => $this->_('Average Color'),
+			PlaceholderAverageColor::class => $this->_('Average color'),
 			// PlaceholderDominantColor::class => $this->_('Dominant Color'),
-			// PlaceholderProcessWire::class => $this->_('Image variant'),
-			// PlaceholderSVG::class => $this->_('SVG'),
 		];
 
-		// On image upload, generate placeholder
-		$this->addHookAfter('FieldtypeImage::savePageField', $this, 'handleImageUpload');
-
 		// Add settings to image field config screen
 		$this->addHookAfter('FieldtypeImage::getConfigInputfields', $this, 'addImageFieldSettings');
 
-		// Generate palceholders for existing images on field save
+		// Generate placeholders for existing images on field save
 		$this->addHookAfter('FieldtypeImage::savedField', $this, 'handleImageFieldtypeSave');
 
-		// Add `Pageimage.lqip` property that returns the placeholder data uri
+		// Generate placeholder on image upload
+		$this->addHookAfter('FieldtypeImage::savePageField', $this, 'handleImageUpload');
+
+		// Add `$image->lqip` property that returns the placeholder data uri
 		$this->addHookProperty('Pageimage::lqip', function (HookEvent $event) {
 			$event->return = $this->getPlaceholderDataUri($event->object);
 		});
 
-		// Add `Pageimage.lqip($width, $height)` method that returns the placeholder in a given size
+		// Add `$image->lqip($width, $height)` method that returns the placeholder in a given size
 		$this->addHookMethod('Pageimage::lqip', function (HookEvent $event) {
 			$width = (int) $event->arguments(0) ?: 0;
 			$height = (int) $event->arguments(1) ?: 0;
@@ -72,7 +71,9 @@ public function handleImageUpload(HookEvent $event): void
 		$type = $this->getPlaceholderType($field);
 		if ($type && $images->count() && !$page->hasStatus(Page::statusDeleted)) {
 			$image = $images->last(); // get the last added images (should be the last uploaded image)
-			$this->generateAndSavePlaceholder($image);
+			if ($this->isSupportedImageFormat($image)) {
+				$this->generateAndSavePlaceholder($image);
+			}
 		}
 	}
 
@@ -91,16 +92,18 @@ public function generateAndSavePlaceholder(Pageimage $image, bool $force = false
 
 	protected function getPlaceholderType(Field $field): string
 	{
-		return $field->generateLqip ?? '';
+		return $field->imagePlaceholderType ?: '';
 	}
 
 	protected function getPlaceholder(Pageimage $image, bool $checks = false): array
 	{
 		$type = $image->filedata("image-placeholder-type");
 		$data = $image->filedata("image-placeholder-data");
 		if ($checks) {
-			$expectedType = $this->getPlaceholderType($image->field);
-			if ($type !== $expectedType) {
+			$created = $image->filedata("image-placeholder-created");
+			$current = $created && $image->modified <= $created;
+			$expected = $this->getPlaceholderType($image->field);
+			if (!$current || $type !== $expected) {
 				$data = null;
 			}
 		}
@@ -112,33 +115,31 @@ protected function setPlaceholder(Pageimage $image, array $placeholder): void
 		[$type, $data] = $placeholder;
 		$image->filedata("image-placeholder-type", $type);
 		$image->filedata("image-placeholder-data", $data);
+		$image->filedata("image-placeholder-created", time());
 		$image->page->save($image->field->name, ["quiet" => true, "noHooks" => true]);
 	}
 
 	protected function generatePlaceholder(Pageimage $image): array
 	{
-		$type = $this->getPlaceholderType($image->field);
-		$handler = $this->getPlaceholderGenerator($type);
-		$placeholder = '';
-
 		try {
+			$type = $this->getPlaceholderType($image->field);
+			$handler = $this->getPlaceholderGenerator($type);
 			$placeholder = $handler::generatePlaceholder($image);
+			return [$type, $placeholder];
 		} catch (\Throwable $e) {
 			if ($this->wire()->user->isSuperuser()) {
 				$this->wire()->error("Error generating image placeholder: {$e->getMessage()}");
 			}
 			$this->wire()->log("Error generating image placeholder: {$e->getMessage()}: {$e->getTraceAsString()}");
 		}
 
-		return [$type, $placeholder];
+		return [null, null];
 	}
 
 	protected function getPlaceholderDataUri(Pageimage $image, int $width = 0, int $height = 0): string
 	{
 		[$type, $placeholder] = $this->getPlaceholder($image, false);
-		if (!$placeholder) {
-			return '';
-		}
+		if (!$placeholder) return '';
 
 		$handler = $this->getPlaceholderGenerator($type);
 		$width = $width ?: $this->defaultLqipWidth;
@@ -172,20 +173,20 @@ protected function createPlaceholdersForField(Field $field, bool $force = false)
 			$this->message(sprintf($this->_('Generating missing image placeholders in field `%s`'), $field->name));
 		}
 
-		$count = 0;
 		$total = 0;
+		$generated = 0;
 		$pages = $this->wire()->pages->findMany("{$field->name}.count>0, check_access=0");
 		foreach ($pages as $page) {
 			$images = $page->getUnformatted($field->name);
-			$total += $images->count();
 			foreach ($images as $image) {
+				$total++;
 				if ($this->generateAndSavePlaceholder($image, $force)) {
-					$count++;
+					$generated++;
 				}
 			}
 		}
 
-		$this->message(sprintf($this->_('Generated %d placeholders of %d images in field `%s`'), $count, $total, $field->name));
+		$this->message(sprintf($this->_('Generated %d placeholders of %d images in field `%s`'), $generated, $total, $field->name));
 	}
 
 	protected function addImageFieldSettings(HookEvent $event)
@@ -201,13 +202,14 @@ protected function addImageFieldSettings(HookEvent $event)
 		$fs->name = '_files_fieldset_placeholders';
 		$fs->label = $this->_('Image placeholders');
 		$fs->icon = 'picture-o';
+		$fs->addClass('InputfieldIsOffset');
 		// $inputfields->insertAfter($fs, $children->first());
 		$inputfields->add($fs);
 
 		// Placeholder type
 		/** @var InputfieldRadios $f */
 		$f = $modules->get('InputfieldRadios');
-		$f->name = 'generateLqip';
+		$f->name = 'imagePlaceholderType';
 		$f->label = $this->_('Placeholder type');
 		$f->description = $this->_('Choose whether this field should generate low-quality image placeholders (LQIP) on upload.');
 		$f->icon = 'toggle-on';
@@ -216,19 +218,19 @@ protected function addImageFieldSettings(HookEvent $event)
 		foreach ($this->generators as $class => $label) {
 			$f->addOption($class::$name, $label);
 		}
-		$f->value = $field->generateLqip;
+		$f->value = $field->imagePlaceholderType;
 		$fs->add($f);
 
 		// Generate missing placeholders for existing images
 		/** @var InputfieldCheckbox $f */
 		$f = $modules->get('InputfieldCheckbox');
-		$f->name = 'generateLqipForExisting';
+		$f->name = 'imagePlaceholdersGenerateMissing';
 		$f->label = $this->_('Generate missing placeholders');
 		$f->description = $this->_('Placeholders are only generated when uploading new images.') . ' '
 			. $this->_('Check the box below and submit the form to batch-generate image placeholders for any existing images in this field.');
 		$f->label2 = $this->_('Generate missing placeholders for existing images');
 		$f->collapsed = true;
-		$f->showIf = 'generateLqip!=""';
+		$f->showIf = 'imagePlaceholderType!=""';
 		$f->icon = 'question-circle-o';
 		$f->value = 1;
 		$f->checked = false;
@@ -237,30 +239,40 @@ protected function addImageFieldSettings(HookEvent $event)
 		// Re-generate all placeholders for existing images
 		/** @var InputfieldCheckbox $f */
 		$f = $modules->get('InputfieldCheckbox');
-		$f->name = 'generateLqipForAll';
+		$f->name = 'imagePlaceholdersRegenerateAll';
 		$f->label = $this->_('Re-generate all placeholders');
 		$f->description = $this->_('Check the box below and submit the form to re-generate all placeholders for any existing images in this field. Useful after changing the placeholder type.');
 		$f->label2 = $this->_('Re-generate all placeholders for existing images');
 		$f->collapsed = true;
-		// $f->showIf = 'generateLqipForExisting=1';
-		$f->showIf = 'generateLqip!=""';
+		// $f->showIf = 'imagePlaceholdersGenerateMissing=1';
+		$f->showIf = 'imagePlaceholderType!=""';
 		$f->icon = 'refresh';
 		$f->value = 1;
 		$f->checked = false;
 		$fs->add($f);
 
-		// generateLqipForExisting
+		// imagePlaceholdersGenerateMissing
 	}
 
 	protected function handleImageFieldtypeSave(HookEvent $event)
 	{
 		/** @var FieldtypeImage $fieldtype */
 		$field = $event->arguments(0);
 
-		if ($field->generateLqipForAll) {
+		if ($field->imagePlaceholdersRegenerateAll) {
 			$this->createPlaceholdersForField($field, true);
-		} else if ($field->generateLqipForExisting) {
+		} else if ($field->imagePlaceholdersGenerateMissing) {
 			$this->createPlaceholdersForField($field, false);
 		}
 	}
+
+	protected function isSupportedImageFormat(Pageimage $image): bool
+	{
+		$format = Image::getImageType($image->filename);
+		return in_array($format, $this->supportedImageFormats());
+	}
+
+	protected function supportedImageFormats() {
+		return [\IMAGETYPE_GIF, \IMAGETYPE_JPEG, \IMAGETYPE_PNG];
+	}
 }

README.md

@@ -10,7 +10,7 @@ Low-Quality Image Placeholders (LQIP) are used to improve the perceived performa
 displaying a small, low-quality version of an image while the high-quality version is being loaded.
 The LQIP technique is often used in combination with lazy loading.
 
-## How does it work
+## How it works
 
 This module will automatically generate an image placeholder for each image that is uploaded to
 fields configured to use them. In your frontend templates, you can access the image placeholder as
@@ -21,8 +21,15 @@ a data URI string to display while the high-quality image is loading. See below
 Currently, the module supports generating two types of image placeholders. The default is
 `ThumbHash`.
 
-- [BlurHash](https://blurha.sh/): the original format developed by Wolt
-- [ThumbHash](https://evanw.github.io/thumbhash/): a newer format with better color rendering and alpha channel support
+### BlurHash
+
+[BlurHash](https://blurha.sh/) is the original placeholder algorithm, developed at Wolt. It
+currently has no support for alpha channels and will render transparency in black.
+
+### ThumbHash
+
+[ThumbHash](https://evanw.github.io/thumbhash/) is a newer algorith with improved color rendering
+and support for transparency.
 
 ## Installation
 
@@ -40,6 +47,9 @@ You'll need to configure your image fields to generate image placeholders.
 
 `Setup` → `Fields` → `[images]` → `Details` → `Image placeholders`
 
+There, you can choose the type of placeholder to generate. If you're installing the module on an
+existing site, you can also choose to batch-generate placeholders for any existing images.
+
 ## Usage
 
 Accessing an image's `lqip` property will return a data uri string of its placeholder. Using it as

TODO.md

@@ -0,0 +1,5 @@
+# Todo
+
+- Blurhash module compatibility if previously installed
+- Add examples and screenshots to readme
+- Dominant color

lib/Image.php

@@ -3,8 +3,38 @@
 namespace Daun;
 
 class Image {
+	static $imageTypes = [
+		'gif' => \IMAGETYPE_GIF,
+		'jpg' => \IMAGETYPE_JPEG,
+		'jpeg' => \IMAGETYPE_JPEG,
+		'png' => \IMAGETYPE_PNG
+	];
+
+	public static function getImageType(string $path) {
+		if (!file_exists($path) || !is_readable($path) || is_dir($path) || !exif_imagetype($path)) {
+			return null;
+		}
+
+		$type = null;
+		if (function_exists('exif_imagetype')) {
+			return exif_imagetype($path);
+		}
+
+		$info = @getimagesize($path);
+		if (isset($info[2])) {
+			return $info[2];
+		}
+
+		$extension = strtolower(pathinfo($path, \PATHINFO_EXTENSION));
+		if (static::$imageTypes[$extension]) {
+			return static::$imageTypes[$extension];
+		}
+
+		return null;
+	}
+
 	public static function readImageContents(string $path) {
-		if (!file_exists($path) || is_dir($path) || !exif_imagetype($path)) {
+		if (!file_exists($path) || !is_readable($path) || is_dir($path) || !exif_imagetype($path)) {
 			// $this->errors("Image file does not exist", Notice::log);
 			return null;
 		}
@@ -30,6 +60,20 @@ public static function contain(int $width, int $height, int $max): array {
 		return [$width, $height];
 	}
 
+	public static function generateDataURIFromRGB(int $r, int $g, int $b): string {
+		$image = imagecreatetruecolor(1, 1);
+		imagefill($image, 0, 0, imagecolorallocate($image, $r, $g, $b));
+
+		ob_start();
+		imagepng($image);
+		$contents = ob_get_contents();
+		ob_end_clean();
+		imagedestroy($image);
+
+		$data = base64_encode($contents);
+		return "data:image/png;base64,{$data}";
+	}
+
 	public static function supportsImagick(): bool {
 		return class_exists('\\Imagick');
 	}

lib/Placeholders/PlaceholderAverageColor.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace Daun\Placeholders;
+
+use Daun\Image;
+use Daun\Placeholder;
+use ProcessWire\Pageimage;
+
+class PlaceholderAverageColor extends Placeholder {
+	public static string $name = 'average-color';
+
+	public static function generatePlaceholder(Pageimage $image): string {
+		$contents = Image::readImageContents($image->filename);
+		if ($contents) {
+			try {
+				return static::readAverageImageColor($contents);
+			} catch (\Exception $e) {
+				throw new \Exception("Error encoding average color: {$e->getMessage()}");
+			}
+		}
+		return '';
+	}
+
+	public static function generateDataURI(string $hash, int $width = 0, int $height = 0): string {
+		if (!$hash || $width <= 0 || $height <= 0) {
+			return static::$fallback;
+		}
+
+		[$r, $g, $b] = explode('.', $hash);
+		return Image::generateDataURIFromRGB($r, $g, $b);
+	}
+
+	protected static function readAverageImageColor(?string $contents): string {
+		if (!$contents) {
+			return '';
+		}
+
+		$image = imagecreatefromstring($contents);
+		$image = imagescale($image, 1, 1);
+		$rgba = imagecolorsforindex($image, imagecolorat($image, 0, 0));
+		imagedestroy($image);
+
+		$channels = array_slice(array_values($rgba), 0, 4);
+
+		return implode('.', $channels);
+	}
+}