Description

Getting the following error message when attempting to upload a jpg (sized 2000 × 1239) to an asset volume with an attached OptimizedImages field:

Upload failed. The error message was: “Call to undefined function nystudio107\imageoptimize\lib\imagecreatefromjpeg()”

Looks like there's a imagecreatefromjpeg call in ./vendor/nystudio107/craft-imageoptimize/src/lib/Potracio.php. Setting createPlaceholderSilhouettes => false suppresses the upload error.

Additional Info

The attached OptimizedImages field has only one image variant. It's configured like:

Composer dependencies look okay:
composer install returns "Nothing to install or update"
composer status returns "No local changes"

ImageOptimize is using Craft native transforms with the following libs successfully installed:

It would be great if one could have the option of not crop the image, and only stretch it proportionally after a desired width or height, like Crafts native ”Stretch” mode. If I understood how this plugin is working, one will need to set up an Asset Source each per image format, quite often we use mixed images of 4:3, 1:1, 16:9,9:16 etc which will make us end up with a lot of Asset Sources.

Imgix gives us the ability to enable "secure URLs" on a source which requires image URLs to be signed with a secret token to be valid. Right now, image URLs generated with ImageOptimize are not signed so they're not valid when secure URLs are enabled, which makes ImageOptimize less secure! Haha no but it would be great if you could support it. ;)

More info: https://docs.imgix.com/setup/securing-images

When ImageOptimize is enabled and you try to move some images to a subfolder, it optimizes all the images again, which it shouldn't do as the images themselves have not been changed.

When you try to move a lot of them at once, everything just hangs and makes the site unresponsive.

This is probably more of a feature request than a bug.

Basically, I am attempting to use this plugin to output an image in two variations; a 16:10 variation and a 1:1 variation.

In addition to just displaying the image, I want to lazy-load it while using a placeholder (doesn't matter which one, but let's say the LQIP-version) until the actual image is loaded.

Now, on large screens, displaying the 16:10 variation, the placeholder works nicely as it is the same size as the actual image. However, on smaller screens (displaying the 1:1 variation) the placeholder is still of a 16:10 aspect, making it smaller than the actual image.

So - would it be possible to get an extension to the various placeholder-methods so that we can somehow access the placeholders for each individual variation?

Then we could do something akin to src="{{ placeholderImage }}" data-srcset="{{ srcset }}" data-placeholder-srcset="{{ placeholders }}" on the img-element and implement custom JS-logic that set's the correct src based on viewport-width or something (read: I am totally open to completely different methods of implementing this if you can think of a better way)

If it's possible, adding a click event to the "Focal Point set" text, or adding an "Edit Image with Craft" button that would open up Craft's image editor would be a nice convenience for clients.

I realize this only saves about 2 clicks, but if you're quickly processing a bunch of images, it would be a bit of a time saver.

Hi,

I just updated Craft 3 from RC9 to RC11 and also updated ImageOptimize to the latest version. Since the update I'm getting several errors on control panel templates.

Image Optimize settings:

Twig_Error_Runtime: Calling unknown method: nystudio107\imageoptimize\models\Settings::imgixSecurityToken() in /home/vagrant/Development/projects/grappa-bruno/vendor/nystudio107/craft-imageoptimize/src/templates/settings.twig:63

Image Optimize field:

Calling unknown method: nystudio107\imageoptimize\fields\OptimizedImages::displayOptimizedImageVariants()

I'm also getting an error when I try to access the context menu with the previews on an asset.

Any ideas? Thanks.

• https://github.com/google/guetzli
• https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html

'defaultAspectRatios' => [
    ['x' => 16, 'y' => 10],
    ['x' => 16, 'y' => 9],
    ['x' => 4, 'y' => 3],
    ['x' => 1, 'y' => 1],
    ['x' => 10, 'y' => 16],
    ['x' => 3, 'y' => 4],
    ['x' => 3, 'y' => 4],
],< 

When I double the last line it works as expected.

Instead of showing this:

https://slack-imgs.com/?c=1&url=https%3A%2F%2Fmonosnap.com%2Ffile%2F9y3yNio4xxHamFUKYqImcj09O5ydoy.png

The plugin is broken with the last Craft update.

Please note one of the release note's of the update.

{note} Plugin handles are kebab-cased now rather than camelCased. Plugins’ Craft::t() and |t() calls, translation files, and template paths must be updated accordingly, as well as any plugin config files in Craft 3 projects.

Please let me know if i can assist you with the fix!

When using imageoptimize i get huge problems with image quality. The example image is 2500px width and is beeing downscaled to 1200px by imageoptimize. (webp get's even worse)

Standard Image transforms of Craft3 are doing a good job from quality side.

What to consider to get the the best image quality? Configuration not changed from standard so far.

Detail in image (100%)

same detail in original image (100%):

Hopefully will be addressed as per: craftcms/cms#2198

Hey there. Awesome plugin. I'm looking to jump into some of the more robust features of this plugin but am running into some errors.

I'm fairly new to Craft 3 so I'm still getting accustomed to how Craft handles temporary assets and transforms.

I'm getting the following error when trying to save out assets:

Likewise when I try to use the webp transform, I get the following error:

Clearly it has to do with Craft not being able to read from my template directory. I've adjusted permissions to 777 to test, as well as chowning the folder to my root username to no avail.

Some more information on my setup: I'm using remote asset volumes through Rackspace Cloud Files. Before I attached an OptimizedFiles field to my Asset field I'm able to save out assets just fine. My assets are being saved to the /storage/runtime/temp/ directory, but I guess they're just not being read.

Not sure if this is an error with the plugin, or an error with my setup, but would love some guidance and an opportunity to contribute to the instructions to make sure no one else gets caught with this in their transition from Craft 2 -> Craft 3.

Uploading a new image to an Asset location with OptimizedImage field, yields this error.

When ImageOptimize is enabled, .webp files get created for both ImageOptimize transforms (using the field type) and standard Craft transforms. When an image is deleted from Craft (through Assets), the .jpg transforms get deleted with the image, but .jpg.webp files remain together with the folders (eg. _600x337_crop_center-center_82_line).

It would be good to delete both file types + the folders or it will leave unused folders/files on the server.

Thanks! (great plugin!)

Coming in with a feature request per request from #craftcms on slack (I'm apparently the second person today that wants this functionality). Thanks!

Hey @khalwat

Great plugin as ever! Just noticed that when previewing the variants on an asset, if all the variants have the same width it seems to only be using the last transform on all the previews.

This causes a bit of an issue with the previews looking skewed if the aspect ratios are different.

Have put together a short video that should show the issue: http://x.n43.me/3Y2O020C0M1T

Keep up the great work!

Overriding the default plugin settings with a imageoptim.php file in the craft/config folder throws an error: Call to a member function setAttributes() on null.

Looking at the updated plugin settings documentation, it seems you're missing the createSettingsModel() method on the main plugin class. Will test and submit a pull request if it fixes the error.

What's the right way to clear Image Caches.
Case is: The Client changes the Focal Point but no images are recreated.
I must delete them manually from /web/uploads/images/XXX

Imager have the Option to Select an Image within the Assets and Choose: "Clear Transforms"
Maybe that would be a solution for ImageOptimize

I would try the plugin but this message comes with any image. It's a local installation

Hi.

Just installed the plugin on Craft3-RC10.1 and hooked it up to Imgix. In the backend, the image-variations show up just fine when editing an asset. However, in the frontend, I get the error listed in the subject.

My template-code is:

{% if section.images|length %}
  <div class="section__images">
    {% for image in section.images.all %}
      {% set optimizedImages = image.variations %}
    {% endfor %}
  </div>
{% endif %}

Obviously, I have tried with the various methods of displaying the images as per the examples - but as you can see the error occurs before I attempt to display them.

The error stems from /vendor/nystudio107/craft-imageoptimize/src/imagetransforms/ImgixImageTransform.php line 88, which reads if (property_exists($transform, 'interlace')) {

Let me know if you need any screenshots or details about my various settings etc :)

I don't need default Variants cause I create three fields (square, landscape, portrait). But when I remove the default I can't add Variants on backend side.

        // Default image variants
        'defaultVariants' => [
            /*[
                'width'          => 100,
                'useAspectRatio' => false,
                'aspectRatioX'   => 1.0,
                'aspectRatioY'   => 1.0,
                'retinaSizes'    => ['1'],
                'quality'        => 82,
                'format'         => 'jpg',
            ],*/
        ],

I'm trying to use the image optimizer with the element-api plugin in. I am writing an app for a big touch screen. So the images won't be changing sizes, but I won't have control of the images they put in the cp. After calling the image, I would like to modify it prior to converting it to json.
my questions are:

1. how do I call your plugin? my closest guess is: use nystudio107\imageoptimize\ImageOptimize;
   this is incorrect.
2. how do I call the createOptimizedImages() ?

public function includeLeft(Entry $entry)
  {
    return $this->collection($entry->left, function($model) {
      $image = $model->image;
      $optimzedImage = ImageOptimize::getInstance()->createOptimizedImages(
        $image,
        [
          [
            'width' => 200,
            'useAspectRatio' => true,
            'aspectRatioX' => 1.0,
            'aspectRatioY' => 1.0,
            'retinaSizes' => ['1'],
            'quality' => 82,
            'format' => 'jpg',
          ],
        ]
      );
        return $optimzedImage;
    }, 'left');
  }

It would be great to have an option to print the code in as inline CSS (complete with @media queries for all sizes/retina settings) for use as a background: url(imagefile.here); of a HTML element.

I'm thinking something along the lines of:

{% set optimizedImage = entry.myAsset.one().optimizedImageField %}
<div id="my-div" style="background-color: {{ optimizedImage.colorPalette().one() }}; {{ optimizedImage.srcsetCss() }}"></div>

Turns into (sloppy example but you get the idea):

{% set optimizedImage = entry.myAsset.one().optimizedImageField %}
<div id="my-div" style="background-color: #ff0000; background-image: url(/myAsset/mobileSize.jpg); @media only screen and (min-width: 768px) { background-image: url(/myAsset/tabletSize.jpg); }; @media only screen and (min-width: 980px) { background-image: url(/myAsset/desktopSmall.jpg); }; @media only screen and (min-width: 1280px) { background-image: url(/myAsset/desktopMed.jpg); }; @media only screen and (min-width: 1440px) { background-image: url(/myAsset/desktopLarge.jpg); };"></div>

Thoughts?

When using imgix, all image requests have the api-key appended as a url parameter. I'm assuming this should only happen for purge requests, and not for normal public requests?

e.g.

https://mydomain.imgix.net/filename.jpg?api-key=[key-from-plugin-config]&auto=compress%2Cformat&crop=focalpoint&domain=mydomain.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=450&ixlib=php-1.2.0&sharp=50&w=600

I added the field type, I updated the focal point, the placeholders are generated, color palette is generated.

But all the variants give the same message. XXX variant does not exist,..

Am I missing something? My config lives in config/image-optimize.php
I'm using Craft 3 rc5 and assets are in a symlinked shared folder.

After one of the latest updates i get this error "Variable "gdInstalled" does not exist" though i have GD installed. And before this update plugin was working fine and placeholder silhouettes were created. Can you check this?

It would be nice if the plugin would cache images created dynamically in the template, as we usually have a lot of different aspect ratios for images used through-out the site. So it would be really hard to set up image variants for each image type. And it's also quite hard to swallow a 10s load time for a page that has 6 images.

Looking at the implementation of the spatie/laravel-medialibrary implementation of responsive images, I'm thinking/suggesting you could implement a few things that they do to make using it a lot easier.

One of the things they're doing is automatically calculating the necessary transform width for an image based on when it is 20% smaller. (https://github.com/spatie/laravel-medialibrary/blob/v7/src/ResponsiveImages/WidthCalculator/FileSizeOptimizedWidthCalculator.php) using this, you wouldn't need to specify all the image widths manually.

They also implemented a pretty smart way to use the placeholder without having to rely on something like lazysizes: https://github.com/spatie/laravel-medialibrary/blob/v7/resources/views/responsiveImageWithPlaceholder.blade.php

Of course this is in a Laravel environment so they probably have a bit more flexibility as to what they can do.

Getting the following error when installing on clean craft3.beta 12 setup

$ composer require nystudio107/craft3-ImageOptimize -vvv
Reading ./composer.json
Loading config file ./composer.json
Checked CA file /private/etc/ssl/cert.pem: valid
Executing command (/Users/dan/Sites/hoban): git branch --no-color --no-abbrev -v
Executing command (/Users/dan/Sites/hoban): git describe --exact-match --tags
Executing command (/Users/dan/Sites/hoban): git log --pretty="%H" -n1 HEAD
Executing command (/Users/dan/Sites/hoban): hg branch
Executing command (/Users/dan/Sites/hoban): fossil branch list
Executing command (/Users/dan/Sites/hoban): fossil tag list
Executing command (/Users/dan/Sites/hoban): svn info --xml
Reading /Users/dan/.composer/composer.json
Loading config file /Users/dan/.composer/composer.json
Reading /Users/dan/Sites/hoban/vendor/composer/installed.json
Loading plugin yii\composer\Plugin
Loading plugin craft\composer\Plugin
Running 1.4.1 (2017-03-10 09:29:45) with PHP 7.0.17 on Darwin / 16.5.0
Downloading https://asset-packagist.org/packages.json
Writing /Users/dan/.composer/cache/repo/https---asset-packagist.org/packages.json into cache
Downloading https://packagist.org/packages.json
Writing /Users/dan/.composer/cache/repo/https---packagist.org/packages.json into cache
Reading /Users/dan/.composer/cache/repo/https---asset-packagist.org/p-provider-latest-.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-2013.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-2014.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-2015.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-2016.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-2016-07.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-2016-10.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-2017-01.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-2017-04.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-archived.json from cache
Reading /Users/dan/.composer/cache/repo/https---packagist.org/p-provider-latest.json from cache


  [InvalidArgumentException]
  Could not find package nystudio107/craft3-ImageOptimize at any version for your minimum-stability (beta). Check the package spelling or your minimum-stability


Exception trace:
 () at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/src/Composer/Command/InitCommand.php:643
 Composer\Command\InitCommand->findBestVersionForPackage() at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/src/Composer/Command/InitCommand.php:365
 Composer\Command\InitCommand->determineRequirements() at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/src/Composer/Command/RequireCommand.php:117
 Composer\Command\RequireCommand->execute() at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/vendor/symfony/console/Command/Command.php:267
 Symfony\Component\Console\Command\Command->run() at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/vendor/symfony/console/Application.php:846
 Symfony\Component\Console\Application->doRunCommand() at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/vendor/symfony/console/Application.php:191
 Symfony\Component\Console\Application->doRun() at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/src/Composer/Console/Application.php:227
 Composer\Console\Application->doRun() at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/vendor/symfony/console/Application.php:122
 Symfony\Component\Console\Application->run() at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/src/Composer/Console/Application.php:100
 Composer\Console\Application->run() at phar:///usr/local/Cellar/composer/1.4.1/libexec/composer.phar/bin/composer:54
 require() at /usr/local/Cellar/composer/1.4.1/libexec/composer.phar:24

require [--dev] [--prefer-source] [--prefer-dist] [--no-progress] [--no-suggest] [--no-update] [--no-scripts] [--update-no-dev] [--update-with-dependencies] [--ignore-platform-reqs] [--prefer-stable] [--prefer-lowest] [--sort-packages] [-o|--optimize-autoloader] [-a|--classmap-authoritative] [--apcu-autoloader] [--] [<packages>]...

Other NYStudio107 plugins installing, just not this one.

Have tried shifting minimum stability down to dev with the same error.

Is it possible to queue all generation of image variants?

Uploading/saving an image now takes a long time for the user while they won't instantly need to view the variants anyway.

In most situations I don't need to optimize my transforms in my local environment, so I don't install and manage libraries like jpegoptim in my dev environment. I usually match my staging environment to my production, so if I need to test things like creating a webp variant or doing image compression, I would do it on staging.

It would be great to either have an overall kill switch config option to simply ignore all optimizations from third-party libraries, or to have kill switches to enable/disable each type of optimization.

I'd still like to see the image transforms happen in my dev environment, so ideally the option to enable/disable optimizations would just mean that the functions that return an optimized URL would simply return a URL of the transformed image.

NOTE: Right now I'm getting some errors that I think are based on the fact that I don't have the libraries installed, but this config option would not only fix these errors, but I think it would speed up local development by skipping extra steps of attempting the optimizations in the first place.

After clicking the "Save" button in the top right of the settings view, each image processor displays twice. Uninstalling the plugin and reinstalling resolves the issue.

When an image is deleted from Craft entirely (from assets), it should probably also call the "purge image" API call on Imgix / imgix docs link:

curl "https://api.imgix.com/v2/image/purger" \
  -u "$API_KEY:" \
  -d "url=$URL_TO_PURGE"

Not sure what to do about the cached transforms when an image is purged - Imgix says it changes cache headers, but I was getting the old image (after manually purging the image from Imgix dashboard) until I did a hard reset in Chrome ("Empty cache and hard reload").

When I change the settings in the control panel (turning off Create Color Palette etc.), and then Save and then view the settings again, they are still on.

It is possible to remove all variants which then makes it not possible to re-add a variant once all the variants have been deleted.

In the dropdown to delete variants the last variant shows the delete grayed out but it still functions.

Reloading the field after saving it with no variants will repopulate it will all the default variants.

Some people have shared/managed hosting where tools like jpegoptim, etc. can't be installed.

Consider adding support for API image transforms for Imgix, Cloudinary, kraken.io, and ImageOptim

Small detail but it appears that the incorrect plugin name appears in the breadcrumb immediately after installation.

Pass in a parameter via Twig to override the generation of:

• Dominant Color Palette:
• LazyLoad Placeholder Images:

Installed version 1.3.2

Trying to add a ImageOptimize field. Can select it from the field type dropdown but after saving the field it responds with: "The field type “nystudio107\imageoptimize\fields\OptimizedImages” could not be found."

https://d.pr/free/i/ndVNxZ

I Create the Field and save:

Now I go back into the field and it looks like this:

Newest Version.

Have a light switch to control whether the following appear in the Field display:

• Optimized Image Variants:
• Dominant Color Palette:
• LazyLoad Placeholder Images:

If a client uploads an image that is too large (either due to format - eg. TIF - or to size - eg. huge 10k x 10k image), there should be an option to enforce:

• maximum size (fit to bounds) in pixels - width and height
• image format (probably good to keep png=png, jpg=jpg and just convert other image types to jpg)

Another benefit of this could be quality - there is an old trick (and a plugin) for Photoshop where if you're a professional photographer and really want to optimize your photos for the web (though this was in pre-retina times), you would run it through a few consecutive unsharp mask filters - so resize down a bit, unsharp mask slightly, resize down a bit, unsharp... etc. Doing multiple steps like this produced a significantly better image than just unsharpening strongly and downsizing (which is still better than nothing).

So by adding a sharpening step before saving the smaller original in case the image is really big (say you're starting with a camera upload 8k x 8k) - and then using the existing option to use sharpening when creating transforms as well would actually produce better quality images than just uploading a huge file (like it is now) and only sharpening once on transform creation.

Going even further, there could be conditional code that does multiple sharpening-downsizing passes if the image is really large, until reaching a specified desired original size (still bigger than any transforms obviously).

Having the option to create transforms in the image-optimize.php config file would be a complimentary alternative to the current, matrix-style field config. This could be done by following the syntax of defaultVariants in a new array of transform options.

This would require a way to select a transform from the config file when you create the field on your asset source, so maybe a new field type could be used to select from the config file. Making the connect to the config file would allow for quick updates via the config file and it would allow for version control of these settings.

If someone deletes a transform from the array, it could fall back to the defaultVariants transform so the site doesn't break.

It would be nice to separate the image sizes from the other settings.
We use Content builder a lot and give the user the option to say which ratio the image can be for example a slide use rather landscape and for a grid with a lot images a 1:1 ratio fit better.

In Imager we do it so:

{% set defaults = {
  cn: 'a-image',
  modifiers: [],
  data: {},
  js: null,
  waypoint: null,
  waypointAni: null,
  image: null,
  sizes: [
    { width: 1600 },
    { width: 1000 },
    { width: 500 },
    { width: 250 },
    { width: 125 }
  ],
  mode: 'crop',
  position: null,
  ratio: null
} %}

{% set images = craft.imager.transformImage(opt.image, opt.sizes, imageSettings) %}

In short. Global Image Settings would be nice and overwrites like this:

  sizes: [
    { width: 1600, 'aspectRatioX': 16.0, 'aspectRatioY': 10.0, },
    { width: 1000, 'aspectRatioX': 1.0, 'aspectRatioY': 1.0, },
    { width: 500 },
    { width: 250 },
    { width: 125 }
  ],

would be a good option.

ImageOptim is a well known mac and web based image optimizer built by @pornel . As far as I can tell, the craft-imageoptim plugin is not affiliated with @pornel or his products.

I recommend changing the name (to craft3-imageoptimizer?) to avoid confusion and be a good open-source citizen.

Probably a stupid question but I noticed the addition of 'Imgix API Key' question in the Imageoptimize settings when choosing for 'transform method imgix'.

From where do I get the API key? The source details in my IMGIX dashboard don't show such an API key.