From a27a54e6b3c1e155ec1ca5cc5fefd23a8fc844fa Mon Sep 17 00:00:00 2001 From: Stephane Guigne Date: Thu, 19 Apr 2018 14:19:37 +0200 Subject: [PATCH 1/4] Custom sizes with different suffix names. --- README.md | 85 ++++++++++++++++++------------------------- blueprints.yaml | 5 +++ resize-images.php | 89 +++++++++++++++++++++++++++++++++++++--------- resize-images.yaml | 25 +++++++------ 4 files changed, 126 insertions(+), 78 deletions(-) diff --git a/README.md b/README.md index 0cee332..875497b 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,34 @@ -# [Grav](http://getgrav.org) Resize Images Plugin - -**This plugin is still young! If you encounter any issues, please don't hesitate -to [report -them](https://github.com/fredrikekelund/grav-plugin-resize-images/issues).** - -> Resize images at upload time in the Grav admin - -Grav provides some nifty built-in features for editing images on the fly through -the use of [Gregwar/Image](https://github.com/Gregwar/Image). But there's no -support yet for automatically generating responsive image alternatives at upload -time rather than at request time. This plugin fixes that! It will automatically -resize images that are uploaded through the [Grav -admin](https://github.com/getgrav/grav-plugin-admin) to a set of predetermined -widths. This means improved performance for Grav, and less manual resizing work -for you. Win-win! :tada: - -Moreover, this plugin doesn't support just GD, but also Imagick, which means -you'll get higher quality results than with the -[ImageMedium#derivatives](https://learn.getgrav.org/content/media#sizes-with-media-queries) -method that can be used to generate image alternatives in theme templates. - -Images that already have responsive alternatives won't be resized. - -## Configuration - -You can customize the set of widths that your images will be resized to. By -default they are 640, 1000, 1500, 2500, 3500 pixels in width. Images will never -be scaled up, however, so only the widths that are smaller than the original -image's will be used. - -For every width, you're also able to set the JPEG compression quality. A good -rule of thumb is to lower that number at higher widths - the result will still -be good! - -This plugin won't convert PNG's to JPEG's, so the quality number only applies to -JPEG images. - -To generate variations of existing images go into the admin panel and re-save the pages where those images live. Every time a page is saved (whether it's new or old), this plugin will go through all images (again, whether they are new or old) in that page, check if they have responsive variants and generate new ones if necessary. - -## Installation - -Download the [ZIP -archive](https://github.com/fredrikekelund/grav-plugin-resize-images/archive/master.zip) -from GitHub and extract it to the `user/plugins` directory in your Grav -installation. - -## CLI - -I'm aiming to add support for CLI commands to this plugin as well, to make it -easy to generate responsive image alternatives for already uploaded images. +This modified version is taking a different approach. + +## Problem solved +Grav doesn't allow url parameters to generate resized images on the fly. + +## Goal +The final purpose of the plugin is to have different images sizes generated on page save. +In my case, Grav is only used as an admin panel to generate a json file ready to be consumed by my front-end app (weither it's React, Angular, VueJs). So I wanted to have pre-generated images, with defined size/names (and not @{size}x names, who wasn't making sens), ready to be displayed in my app. +**note** : It isn't really intended to be used within Grav ecosystem as it's already handling smart caching and as lots of built-in fonctionnalities to display media files. + +## Usage +Out of the box the plugin is generating sizes : THUMB (300), SMALL (560), MEDIUM (770), LARGE (1024), FULLSCREEN (1400). But sizes and names can be changed/added/removed depending on your needs. + +On the front end-side you can now simply use ``. + +### Extra +It's great to use it in combinaison with the `resolution.min` attribute of your field options (in your `.yaml` file) to make sure the desired generated image size is available. There isn't any official documentation about it, but it's already available in Grav Admin Plugin `v1.7.3`. + +For exemple, with the default sizes, if you want to have all sizes available, here is your options : +```yaml +header.custom.image: + type: file + label: "Image" + destination: 'self@' + accept: + - image/* + resolution: + min: + width: 1400 +``` + +### Roadmap +- Try to hook onAdminAfterAddMedia/onAdminAfterDelMedia events for on-the-fly actions instead of waiting for page save event (it's taking a while for saving mutliples images at once) +- Add a `force regenerate all images` button for when changing plugin options (sizes and/or names) diff --git a/blueprints.yaml b/blueprints.yaml index 64bca47..38df421 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -61,3 +61,8 @@ form: min: 0 max: 100 default: 82 + .name: + type: text + label: Name + placeholder: THUMB + default: '' diff --git a/resize-images.php b/resize-images.php index 918ea49..dd79269 100644 --- a/resize-images.php +++ b/resize-images.php @@ -8,6 +8,13 @@ require_once 'adapters/imagick.php'; require_once 'adapters/gd.php'; +/** + * TODO : + - Separate create and delete actions + - Try to use onAdminAfterAddMedia/onAdminAfterDelMedia for on-the-fly actions + - Delete images when page is deleted ? + */ + /** * Class ResizeImagesPlugin * @package Grav\Plugin @@ -112,14 +119,19 @@ public function onAdminSave($event) } $this->sizes = (array) $this->config->get('plugins.resize-images.sizes'); - $this->adapter = $this->config->get('plugins.resize-images.adapter', 'imagick'); + $this->sizesNames = array_map(function($size) { + return $size['name']; + }, $this->sizes); - foreach ($page->media()->images() as $filename => $medium) { + $this->adapter = $this->config->get('plugins.resize-images.adapter', 'imagick'); + $mediaCount = count($page->media()->images()); + $allImages = $page->media()->images(); + foreach ($allImages as $filename => $medium) { + $message = ''; $srcset = $medium->srcset(false); + $sizesNames = implode('|', $this->sizesNames); - if ($srcset != '') { - continue; - } + // $message .= "{$filename} "; // We can't rely on the path returned from the image's own path // method, since it points to the directory where the image is saved @@ -129,6 +141,52 @@ public function onAdminSave($event) $source_path = "$page_path/$filename"; $info = pathinfo($source_path); $count = 0; + $sizeRegexp = "/-({$sizesNames})\.{$info['extension']}$/"; + $isResizedFile = preg_match($sizeRegexp, $filename); + + // Stop here is it's a resized file + if ( $isResizedFile ) { + $hasOriginalFile = false; + $orginialFileName = preg_replace($sizeRegexp, ".{$info['extension']}", $filename); + + // Try to find the original/non-resized file + foreach ($allImages as $subFilename => $subMedium) { + if ( $orginialFileName == $subFilename ) + { + $hasOriginalFile = true; + break; + } + } + + // If the orignal file is missing then also delete this resized version + if ( !$hasOriginalFile ){ + unlink($source_path); + $message .= "$filename - deleted, because original file was missing"; + } else { + // $message .= "$filename - skip, it's a resized file"; + } + + $this->grav['admin']->setMessage($message, 'info'); + continue; + } + + $hasResizedFiles = false; + $resizedFileRegexp = "/{$info['filename']}-({$sizesNames})\.{$info['extension']}$/"; + + foreach ($allImages as $subFilename => $subMedium) { + if ( preg_match($resizedFileRegexp, $subFilename) ) + { + $hasResizedFiles = true; + break; + } + } + + // Stop here if the file already has resized version(s) + if ( $hasResizedFiles ) { + // $message .= "$filename - skip, it already has resized file(s)"; + $this->grav['admin']->setMessage($message, 'info'); + continue; + } foreach ($this->sizes as $i => $size) { if ($size['width'] >= $medium->width) { @@ -136,11 +194,12 @@ public function onAdminSave($event) } $count++; - $dest_path = "{$info['dirname']}/{$info['filename']}@{$count}x.{$info['extension']}"; + $sizeName = $size['name'] ?: "SIZE{$count}"; + $dest_path = "{$info['dirname']}/{$info['filename']}-{$sizeName}.{$info['extension']}"; $width = $size['width']; $quality = $size['quality']; $height = ($width / $medium->width) * $medium->height; - + $this->resizeImage($source_path, $dest_path, $width, $height, $quality, $medium->width, $medium->height); } @@ -149,22 +208,18 @@ public function onAdminSave($event) if ($count > 0) { $original_index = $count + 1; + $message .= " Resized $filename $count times"; + if ($remove_original) { unlink($source_path); - } else { - rename($source_path, "{$info['dirname']}/{$info['filename']}@{$original_index}x.{$info['extension']}"); - } - rename("{$info['dirname']}/{$info['filename']}@1x.{$info['extension']}", $source_path); + $message .= ' (and removed the original image)'; + } } - $message = "Resized $filename $count times"; - - if ($remove_original) { - $message .= ' (and removed the original image)'; + if ( $message && $message != '' ) { + $this->grav['admin']->setMessage($message, 'info'); } - - $this->grav['admin']->setMessage($message, 'info'); } } } diff --git a/resize-images.yaml b/resize-images.yaml index dbf0747..7fdd97c 100644 --- a/resize-images.yaml +++ b/resize-images.yaml @@ -1,19 +1,24 @@ -enabled: '1' +enabled: true adapter: imagick -remove_original: '0' +remove_original: false sizes: - - width: 640 - quality: 92 - - - width: 1000 + width: 300 quality: 90 + name: THUMB - - width: 1500 - quality: 87 + width: 560 + quality: 88 + name: SMALL - - width: 2500 + width: 770 quality: 85 + name: MEDIUM + - + width: 1024 + quality: 82 + name: LARGE - - width: 3500 + width: 1400 quality: 82 + name: FULLSCREEN From cb342cb3952b8511c15ea75ede3afe147616136f Mon Sep 17 00:00:00 2001 From: Stephane Guigne Date: Thu, 19 Apr 2018 14:55:50 +0200 Subject: [PATCH 2/4] modified credentials --- README.md | 2 +- blueprints.yaml | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 875497b..2607e11 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -This modified version is taking a different approach. +This is a fork of the (Grav Resize Images Plugin)[https://github.com/fredrikekelund/grav-plugin-resize-images] with a slightly different approach. ## Problem solved Grav doesn't allow url parameters to generate resized images on the fly. diff --git a/blueprints.yaml b/blueprints.yaml index 38df421..a3d6f94 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -1,14 +1,14 @@ name: Resize Images version: 0.2.2 -description: Generate responsive versions of images as they are uploaded +description: Generate multiple images sizes as they are uploaded icon: picture-o author: - name: Fredrik Ekelund - email: fredrik@fredrik.computer -homepage: https://github.com/fredrikekelund/grav-plugin-resize-images -keywords: images, responsive, srcset -bugs: https://github.com/fredrikekelund/grav-plugin-resize-images/issues -docs: https://github.com/fredrikekelund/grav-plugin-resize-images/blob/develop/README.md + name: Stéphane Guigné + email: contact@stephaneguigne.com +homepage: https://github.com/guins/grav-plugin-resize-images +keywords: images, responsive, srcset, resize, Imagick, GD, javascript, js, front-end, React, Angular, Vue +bugs: https://github.com/guins/grav-plugin-resize-images/issues +docs: https://github.com/guins/grav-plugin-resize-images/blob/master/README.md license: MIT form: From 40251b408a30d103745037bd57b0aa49ea7fdae3 Mon Sep 17 00:00:00 2001 From: Stephane Guigne Date: Thu, 19 Apr 2018 14:59:37 +0200 Subject: [PATCH 3/4] v0.3.0 release --- CHANGELOG.md | 6 ++++++ blueprints.yaml | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cf97013..f1278e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# v0.3.0 +## 19/04/2018 + +1. [](#new) + * Use custom suffix names for pre-generated images + # v0.2.2 ## 03/03/2017 diff --git a/blueprints.yaml b/blueprints.yaml index a3d6f94..1fae09f 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -1,5 +1,5 @@ name: Resize Images -version: 0.2.2 +version: 0.3.0 description: Generate multiple images sizes as they are uploaded icon: picture-o author: From 568a17e7e23901ecd1ece2cef97d41f1cb37ddee Mon Sep 17 00:00:00 2001 From: Stephane Guigne Date: Sun, 13 May 2018 22:54:50 +0200 Subject: [PATCH 4/4] debug - Process resizing if original image width equal defined resized version width --- CHANGELOG.md | 6 ++++++ blueprints.yaml | 2 +- resize-images.php | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f1278e6..1c011ab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# v0.3.1 +## 13/05/2018 + +1. [](#bugfix) + * Process resizing if original image width equal defined resized version width + # v0.3.0 ## 19/04/2018 diff --git a/blueprints.yaml b/blueprints.yaml index 1fae09f..4b00c4c 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -1,5 +1,5 @@ name: Resize Images -version: 0.3.0 +version: 0.3.1 description: Generate multiple images sizes as they are uploaded icon: picture-o author: diff --git a/resize-images.php b/resize-images.php index dd79269..cab9465 100644 --- a/resize-images.php +++ b/resize-images.php @@ -189,7 +189,7 @@ public function onAdminSave($event) } foreach ($this->sizes as $i => $size) { - if ($size['width'] >= $medium->width) { + if ($size['width'] > $medium->width) { continue; }