Jump to content
eelkenet

Image variations keep being (re-)generated

Recommended Posts

Posted (edited)

Hey everyone, I have a weird one. Somehow my image variations keep being regenerated, instead of served directly.
The variations that are requested are in fact already present, but still get overwritten by (identical!) files upon page load, making everything rather tedious and slow.

Permissions from config.php are set to default:

<?php 
	$config->chmodDir = '0755'; // permission for directories created by ProcessWire
	$config->chmodFile = '0644'; // permission for files created by ProcessWire
?>

Files before loading the page, notice the time of the requested variations is 14:14:

1274582071_Schermafbeelding2020-05-28om14_23_57.thumb.png.dcc09a9f09c98739469650100ce5bfd4.png

Same folder after loading the page just now (14:24): 

350485735_Schermafbeelding2020-05-28om14_24_12.thumb.png.ea7e332f91281d59a788849207e46f1c.png

Some background: I'm currently implementing my standard technique (using the RestApi module to output json) on an older but updated site (3.0.148), running on PHP 7.2.22 (MAMP Pro), while still in (local) development. 

My image parser function is pretty basic:

<?php
	
	public static function parseImage(PageImage $image)
    {
        $settings = [
            'sharpening' => 'medium',
            'cropping' => false,
            "quality" => 95
        ];

        $sizes = [
            "L" => [
                "width" => 1500,
                "height" => 1500,
                "settings" =>  $settings,
            ],
            "M" => [
                "width" => 750,
                "height" => 750,
                "settings" =>  $settings,
            ],
            "S" => [
                "width" => 320,
                "height" => 320,
                "settings" =>  $settings,
            ],
        ];

        // get orientation
        if ($image->width > $image->height) {
            $orientation = 'landscape';
        } else {
            $orientation = 'portrait';
        }

        $resulting_image =
            [
                'name' => $image->name,
                'description' => self::parseLanguageField($image->description),
                "focus" => "{$image->focus()["left"]}% {$image->focus()["top"]}%",
                'original' => [
                    'src' => $image->url,
                    'width' => $image->width,
                    'height' => $image->height,
                    'orientation' => $orientation,
                ],
            ];

        foreach ($sizes as $sizeName => $size) {
            $img = $image->size($size["width"], $size["height"], $size["settings"]);
            $resulting_image[$sizeName] = $img->url;
        }

        return $resulting_image;
    }
?>

With (for the image above) the following output once rendered as JSON:

"image": {
	"name": "cirkels_oo.jpg",
	"description": [],
	"focus": "50% 50%",
	"original": {
		"src": "/site/assets/files/2823/cirkels_oo.jpg",
		"width": 300,
		"height": 240,
		"orientation": "landscape"
	},
	"L": "/site/assets/files/2823/cirkels_oo.1500x1500.jpg",
	"M": "/site/assets/files/2823/cirkels_oo.750x750.jpg",
	"S": "/site/assets/files/2823/cirkels_oo.320x320.jpg"
},

Any ideas on what might be going on? Probably missing something very obvious here..

EDIT: I tried explicitly including 'forceNew' => false in the settings, but that gave the same result

Edited by eelkenet
Tried forceNew

Share this post


Link to post
Share on other sites

Bump.  ALL suggestions are welcome here!

Share this post


Link to post
Share on other sites

@horst, if you have a chance, please look at the above? Sorry for pinging you like this....  🙂 

  • Like 1

Share this post


Link to post
Share on other sites
On 5/28/2020 at 2:30 PM, eelkenet said:

$img = $image->size($size["width"], $size["height"], $size["settings"]);

What exactly is the resulting settings or options here with the size call?

Have a look at it with: https://processwire.com/api/ref/pageimage/get-debug-info/

// instead of
// $img = $image->size($size["width"], $size["height"], $size["settings"]);
// call
$debuginfo = $pageimage->getDebugInfo($size["settings"], 'string');  // 'string' | 'array' | 'object'
// and inspect the $debuginfo with Tracy or a var_dump()

 

  • Like 3

Share this post


Link to post
Share on other sites

Thanks for your replies guys! Here is the output when outputting all the debugInfo inside the JSON.
What seems interesting to me is that every variation seems to refer to itself as the original? That could be something maybe?

 The weird thing is, I use this exact same technique on a lot of sites and never had this issue. So I would guess it's some configuration setting somewhere that might be off. 

 

Spoiler

{
    "image": {
        "name": "cirkels_oo.jpg",
        "description": [],
        "focus": "50% 50%",
        "original": {
            "src": "/site/assets/files/2823/cirkels_oo.jpg",
            "width": 300,
            "height": 240,
            "orientation": "landscape"
        },
        "debug": {
            "L": {
                "thumb": "<img src='/site/assets/files/2823/cirkels_oo.jpg' style='max-width:120px; max-height:120px;width:100px; height:auto;' alt='' />",
                "files": {
                    "original": "{SELF}",
                    "basename": "cirkels_oo.jpg",
                    "url": "/site/assets/files/2823/cirkels_oo.jpg",
                    "filename": "/Users/eelke/Documents/Werk/Server/janvaneyck/site/assets/files/2823/cirkels_oo.jpg",
                    "created": "2020-03-12 17:08:20",
                    "modified": "2020-03-12 17:08:20",
                    "filemtime": "2020-04-29 12:34:22",
                    "suffix": "",
                    "extension": "jpg",
                    "filesize": 55446
                },
                "variations": [
                    "cirkels_oo.400x0.jpg",
                    "cirkels_oo.1500x1500.jpg",
                    "cirkels_oo.320x320.jpg",
                    "cirkels_oo.750x750.jpg"
                ],
                "imageinfo": {
                    "imageType": 2,
                    "mime": "image/jpeg",
                    "width": 300,
                    "height": 240,
                    "focus": null,
                    "description": "",
                    "tags": "",
                    "orientation": 0,
                    "rotate": 0,
                    "flip": 0,
                    "channels": 3,
                    "bits": 8,
                    "appmarker": {
                        "APP0": "JFIF",
                        "APP13": "Photoshop 3.0",
                        "APP2": "ICC_PROFILE",
                        "APP14": "Adobe"
                    },
                    "iptcRaw": null
                },
                "webp_copy": {
                    "hasWebp": false,
                    "webpUrl": null,
                    "webpQuality": 90,
                    "filesize": 0,
                    "savings": 0,
                    "savings_percent": 0
                },
                "engines": {
                    "neededEngineSupport": "JPG",
                    "installedEngines": {
                        "ImageSizerEngineIMagick": "priority 0",
                        "ImageSizerEngineAnimatedGif": "priority 0",
                        "ImageSizerEngineGD": "priority 0"
                    },
                    "selectedEngine": "ImageSizerEngineIMagick",
                    "engineWebpSupport": false
                },
                "options_hierarchy": {
                    "imageSizerOptions": {
                        "upscaling": true,
                        "cropping": true,
                        "autoRotation": true,
                        "interlace": false,
                        "sharpening": "medium",
                        "quality": 90,
                        "hidpiQuality": 60,
                        "defaultGamma": -1,
                        "webpAdd": true
                    },
                    "individualOptions": {
                        "sharpening": "medium",
                        "cropping": false,
                        "quality": 95,
                        "forceNew": false
                    },
                    "finalOptions": {
                        "hidpiQuality": 60,
                        "forceNew": false,
                        "quality": 95,
                        "webpQuality": 90,
                        "webpAdd": true,
                        "webpOnly": false,
                        "cropping": false,
                        "upscaling": true,
                        "interlace": false,
                        "autoRotation": true,
                        "sharpening": "medium",
                        "defaultGamma": -1,
                        "cropExtra": null,
                        "scale": 1,
                        "useUSM": false
                    }
                }
            },
            "M": {
                "thumb": "<img src='/site/assets/files/2823/cirkels_oo.jpg' style='max-width:120px; max-height:120px;width:100px; height:auto;' alt='' />",
                "files": {
                    "original": "{SELF}",
                    "basename": "cirkels_oo.jpg",
                    "url": "/site/assets/files/2823/cirkels_oo.jpg",
                    "filename": "/Users/eelke/Documents/Werk/Server/janvaneyck/site/assets/files/2823/cirkels_oo.jpg",
                    "created": "2020-03-12 17:08:20",
                    "modified": "2020-03-12 17:08:20",
                    "filemtime": "2020-04-29 12:34:22",
                    "suffix": "",
                    "extension": "jpg",
                    "filesize": 55446
                },
                "variations": [
                    "cirkels_oo.400x0.jpg",
                    "cirkels_oo.1500x1500.jpg",
                    "cirkels_oo.320x320.jpg",
                    "cirkels_oo.750x750.jpg"
                ],
                "imageinfo": {
                    "imageType": 2,
                    "mime": "image/jpeg",
                    "width": 300,
                    "height": 240,
                    "focus": null,
                    "description": "",
                    "tags": "",
                    "orientation": 0,
                    "rotate": 0,
                    "flip": 0,
                    "channels": 3,
                    "bits": 8,
                    "appmarker": {
                        "APP0": "JFIF",
                        "APP13": "Photoshop 3.0",
                        "APP2": "ICC_PROFILE",
                        "APP14": "Adobe"
                    },
                    "iptcRaw": null
                },
                "webp_copy": {
                    "hasWebp": false,
                    "webpUrl": null,
                    "webpQuality": 90,
                    "filesize": 0,
                    "savings": 0,
                    "savings_percent": 0
                },
                "engines": {
                    "neededEngineSupport": "JPG",
                    "installedEngines": {
                        "ImageSizerEngineIMagick": "priority 0",
                        "ImageSizerEngineAnimatedGif": "priority 0",
                        "ImageSizerEngineGD": "priority 0"
                    },
                    "selectedEngine": "ImageSizerEngineIMagick",
                    "engineWebpSupport": false
                },
                "options_hierarchy": {
                    "imageSizerOptions": {
                        "upscaling": true,
                        "cropping": true,
                        "autoRotation": true,
                        "interlace": false,
                        "sharpening": "medium",
                        "quality": 90,
                        "hidpiQuality": 60,
                        "defaultGamma": -1,
                        "webpAdd": true
                    },
                    "individualOptions": {
                        "sharpening": "medium",
                        "cropping": false,
                        "quality": 95,
                        "forceNew": false
                    },
                    "finalOptions": {
                        "hidpiQuality": 60,
                        "forceNew": false,
                        "quality": 95,
                        "webpQuality": 90,
                        "webpAdd": true,
                        "webpOnly": false,
                        "cropping": false,
                        "upscaling": true,
                        "interlace": false,
                        "autoRotation": true,
                        "sharpening": "medium",
                        "defaultGamma": -1,
                        "cropExtra": null,
                        "scale": 1,
                        "useUSM": false
                    }
                }
            },
            "S": {
                "thumb": "<img src='/site/assets/files/2823/cirkels_oo.jpg' style='max-width:120px; max-height:120px;width:100px; height:auto;' alt='' />",
                "files": {
                    "original": "{SELF}",
                    "basename": "cirkels_oo.jpg",
                    "url": "/site/assets/files/2823/cirkels_oo.jpg",
                    "filename": "/Users/eelke/Documents/Werk/Server/janvaneyck/site/assets/files/2823/cirkels_oo.jpg",
                    "created": "2020-03-12 17:08:20",
                    "modified": "2020-03-12 17:08:20",
                    "filemtime": "2020-04-29 12:34:22",
                    "suffix": "",
                    "extension": "jpg",
                    "filesize": 55446
                },
                "variations": [
                    "cirkels_oo.400x0.jpg",
                    "cirkels_oo.1500x1500.jpg",
                    "cirkels_oo.320x320.jpg",
                    "cirkels_oo.750x750.jpg"
                ],
                "imageinfo": {
                    "imageType": 2,
                    "mime": "image/jpeg",
                    "width": 300,
                    "height": 240,
                    "focus": null,
                    "description": "",
                    "tags": "",
                    "orientation": 0,
                    "rotate": 0,
                    "flip": 0,
                    "channels": 3,
                    "bits": 8,
                    "appmarker": {
                        "APP0": "JFIF",
                        "APP13": "Photoshop 3.0",
                        "APP2": "ICC_PROFILE",
                        "APP14": "Adobe"
                    },
                    "iptcRaw": null
                },
                "webp_copy": {
                    "hasWebp": false,
                    "webpUrl": null,
                    "webpQuality": 90,
                    "filesize": 0,
                    "savings": 0,
                    "savings_percent": 0
                },
                "engines": {
                    "neededEngineSupport": "JPG",
                    "installedEngines": {
                        "ImageSizerEngineIMagick": "priority 0",
                        "ImageSizerEngineAnimatedGif": "priority 0",
                        "ImageSizerEngineGD": "priority 0"
                    },
                    "selectedEngine": "ImageSizerEngineIMagick",
                    "engineWebpSupport": false
                },
                "options_hierarchy": {
                    "imageSizerOptions": {
                        "upscaling": true,
                        "cropping": true,
                        "autoRotation": true,
                        "interlace": false,
                        "sharpening": "medium",
                        "quality": 90,
                        "hidpiQuality": 60,
                        "defaultGamma": -1,
                        "webpAdd": true
                    },
                    "individualOptions": {
                        "sharpening": "medium",
                        "cropping": false,
                        "quality": 95,
                        "forceNew": false
                    },
                    "finalOptions": {
                        "hidpiQuality": 60,
                        "forceNew": false,
                        "quality": 95,
                        "webpQuality": 90,
                        "webpAdd": true,
                        "webpOnly": false,
                        "cropping": false,
                        "upscaling": true,
                        "interlace": false,
                        "autoRotation": true,
                        "sharpening": "medium",
                        "defaultGamma": -1,
                        "cropExtra": null,
                        "scale": 1,
                        "useUSM": false
                    }
                }
            }
        },
        "L": "/site/assets/files/2823/cirkels_oo.1500x1500.jpg",
        "M": "/site/assets/files/2823/cirkels_oo.750x750.jpg",
        "S": "/site/assets/files/2823/cirkels_oo.320x320.jpg"
    }
}

 

 

Share this post


Link to post
Share on other sites

Removing $config->imageSizerOptions from config.php solved the issue, which lead me to test its settings. 
Turns out specifically setting webpAdd to false fixed it! 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...