Cropped images are distorted

  • The images that are cropped with the cropped-thumbnails plugin are stretched out of proportion. See example screenshots.

    When I make a crop in the vertical center, it does not select the chosen crop.

    When I crop from the bottom of the image, it stretches the image upwards, causing it to distort.

    When I crop from the top of the image, it pushes the image inwards.

    This happens with multiple crop sizes. The original image is large enough. The version of the plugin where this occurs is 1.9.4 and 1.9.5.

    I see this on all the sites I manage. Some sites are running on PHP 7.4, while others are on PHP 8+.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Volkmar Kantor

    (@volkmar-kantor)

    • Is this the case for all images and image-sizes?
    • Is this the case for horizontal and vertical image orientation?
    • can you please run the plugin self test in settings > crop thumbnails and paste the log
    Thread Starter mluzvdb

    (@mluzvdb)

    Hi Volkmar,

    1. yes it happens to all images and sizes

    2. both vertical as portrait (and square)

    3. log: 

    SUCCESS Temporary directory exists
    SUCCESS Copy testfile to temporary directory
    SUCCESS Testfile was successfully added to media-library. (ID:2515)
    SUCCESS Cropping the file
    SUCCESS Cropped image dimensions are correct.
    SUCCESS Test-attachement successfull deleted (ID:2515)
    SUCCESS Remove testfile from temporary directory
    INFO Tests complete
    INFO ----- System -----
    INFO Crop-Thumbnails 1.9.5
    INFO PHP 8.1.28
    INFO PHP memory limit 2048M
    INFO Server Apache/2
    INFO WP_Image_Editor_GD (choosed WordPress imageeditor class for jpg)
    INFO ----- Active Plugins -----
    INFO - worker/init.php
    INFO - acf-content-analysis-for-yoast-seo/yoast-acf-analysis.php
    INFO - adminimize/adminimize.php
    INFO - advanced-custom-fields-pro/acf.php
    INFO - all-in-one-wp-security-and-firewall/wp-security.php
    INFO - cleantalk-spam-protect/cleantalk.php
    INFO - contact-form-7/wp-contact-form-7.php
    INFO - crop-thumbnails/crop-thumbnails.php
    INFO - disable-comments/disable-comments.php
    INFO - duplicate-page/duplicatepage.php
    INFO - edit-author-slug/edit-author-slug.php
    INFO - ga-google-analytics/ga-google-analytics.php
    INFO - pods/init.php
    INFO - redirection/redirection.php
    INFO - view-admin-as/view-admin-as.php
    INFO - wordpress-seo/wp-seo.php
    INFO - wp-accessibility-helper/wp-accessibility-helper.php
    INFO - wp-fastest-cache/wpFastestCache.php
    INFO - wp-mail-logging/wp-mail-logging.php
    INFO - wp-migrate-db/wp-migrate-db.php
    INFO ----- Image Sizes -----
    INFO {"width":600,"height":600,"crop":true,"name":"thumbnail","id":"thumbnail"}
    INFO {"width":300,"height":300,"crop":false,"name":"medium","id":"medium"}
    INFO {"width":1024,"height":1024,"crop":false,"name":"large","id":"large"}
    INFO {"width":900,"height":900,"crop":true,"name":"post-thumbnail","id":"post-thumbnail"}
    INFO {"width":1800,"height":700,"crop":true,"name":"header-image-lg","id":"header-image-lg"}
    INFO {"width":800,"height":400,"crop":true,"name":"landscape-image-sm","id":"landscape-image-sm"}
    INFO {"width":1800,"height":900,"crop":true,"name":"landscape-image-lg","id":"landscape-image-lg"}
    INFO {"width":900,"height":600,"crop":true,"name":"photo-image-sm","id":"photo-image-sm"}
    INFO {"width":1800,"height":1200,"crop":true,"name":"photo-image-lg","id":"photo-image-lg"}
    INFO {"width":440,"height":640,"crop":true,"name":"portrait-image-sm","id":"portrait-image-sm"}
    INFO {"width":880,"height":1280,"crop":true,"name":"portrait-image-lg","id":"portrait-image-lg"}
    Plugin Author Volkmar Kantor

    (@volkmar-kantor)

    Hmm, this is very strange.

    First i assumed it has to do with the Image-Editor WordPress has choosed (WP_Image_Editor_GD) as for most of my sites its “imagic”. But after i tested on multiple other servers with that setting i cant reproduce the error.

    If Imagic is installed on your server you may try to manually select these image-editor with the following code (add for example in your themes functions.php):

    add_filter('wp_image_editors', function($editors) {
    	$editors = [
    		'WP_Image_Editor_Imagick',
    		'WP_Image_Editor_GD',
    	];
    	return $editors;
    },999999);

    If you run the plugin-test again – you should have an ‘WP_Image_Editor_Imagick’ in the system-info. If its working, try to crop an image.

    The next thing you might want to test is a search for incompatibility issues:

    1. deactivate all Plugins except for crop thumbnails
    2. activate a wordpress standard theme like “Twenty Twenty-Five”
    3. Check if cropping in the media library work without bugs
    4. (reactivate you previous setup)

    Your setup (the plugins you are using) look quit clean – congrats to that. I would wonder if these test will fix the problem, but if you have any incompatibility issues let me know.

    The last thing you might want to check if the plugin worked in Version 1.8 – you can download the old version on github: https://github.com/vollyimnetz/crop-thumbnails/tags

    Other than that, i currently have no clue what causes the issue for you.

    Thread Starter mluzvdb

    (@mluzvdb)

    Hi Volkmar,

    Thank you for your reply.

    1. I’ve activated imagic. but it made no difference.

      2. The test for incompatibility?issues:
      With only the image crop plugin and all others deactivated: No difference
      With only the image crop plugin and in default theme: No difference

      3. Installing version 1.8 of the image crop plugin does make a difference! The images are cropped perfectly. So that is what I’ll use as a temporary fix for now.

      I am curius what changes where made that could cause this problem.

      Kind regards,

      Marloes

      Plugin Author Volkmar Kantor

      (@volkmar-kantor)

      @mluzvdb glad you have an temporary solution. The problem is, i have done multiple complex changes. i.e. the way the target image size is computed is done in the frontend – which should be more reliable. But in the end there are multiple persons reporting that they had no problems with version 1.8 but did have with 1.9.x

      Maybe you could help me by doing one more thing:

      1. reactivate the latest version
      2. go to settings > crop thumbnails > developer settings
      3. activate “JS-Debug” and “Data-Debug”
      4. go to mediathek and open a crop thumbnails dialog
      5. click on “show JS-Debug” (below crop region)
        copy and paste the data here – you may want to anonymize url and file-pathes
      6. crop one image
      7. click on “show Data-Debug” (below crop region)
        copy and paste the data here – you may want to anonymize url and file-pathes

      This would help me get the problem in more detail.

      Thread Starter mluzvdb

      (@mluzvdb)

      Hi Volkmar,

      JS-debug:

      {
      "options": {
      "debug_js": 1,
      "debug_data": 1
      },
      "sourceImageId": 2502,
      "sourceImage": {
      "original_image": {
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo.jpg",
      "width": 1579,
      "height": 2066,
      "gcd": 1,
      "ratio": 0.7642787996127783,
      "printRatio": "1579:2066",
      "image_size": "original_image"
      },
      "full": {
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo.jpg",
      "width": 1579,
      "height": 2066,
      "gcd": 1,
      "ratio": 0.7642787996127783,
      "printRatio": "1579:2066",
      "image_size": "full"
      },
      "large": {
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo.jpg",
      "width": 783,
      "height": 1024,
      "gcd": 1,
      "ratio": 0.7646484375,
      "printRatio": "783:1024",
      "image_size": "large"
      },
      "medium_large": {
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo.jpg",
      "width": 768,
      "height": 1005,
      "gcd": 3,
      "ratio": 0.764179104477612,
      "printRatio": "256:335",
      "image_size": "medium_large"
      }
      },
      "cropBaseSize": "large",
      "sourceImageMeta": {
      "aperture": "0",
      "credit": "",
      "camera": "",
      "caption": "",
      "created_timestamp": "1683712950",
      "copyright": "",
      "focal_length": "0",
      "iso": "0",
      "shutter_speed": "0",
      "title": "",
      "orientation": "0",
      "keywords": []
      },
      "postTypeFilter": null,
      "imageSizes": [
      {
      "name": "thumbnail",
      "nameLabel": "thumbnail",
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo-600x600.jpg",
      "width": 600,
      "height": 600,
      "gcd": 600,
      "ratio": 1,
      "printRatio": "1:1",
      "hideByPostType": false,
      "crop": true,
      "active": true,
      "lowResWarning": false,
      "cacheBreak": 1733844731623,
      "notYetCropped": false
      },
      {
      "name": "post-thumbnail",
      "nameLabel": "post-thumbnail",
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo-900x900.jpg",
      "width": 900,
      "height": 900,
      "gcd": 900,
      "ratio": 1,
      "printRatio": "1:1",
      "hideByPostType": false,
      "crop": true,
      "active": true,
      "lowResWarning": false,
      "cacheBreak": 1733844731623,
      "notYetCropped": false
      },
      {
      "name": "header-image-lg",
      "nameLabel": "header-image-lg",
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo-1579x700.jpg",
      "width": 1800,
      "height": 700,
      "gcd": 100,
      "ratio": 2.5714285714285716,
      "printRatio": "18:7",
      "hideByPostType": false,
      "crop": true,
      "active": false,
      "lowResWarning": false,
      "cacheBreak": 1733844731623,
      "notYetCropped": false
      },
      {
      "name": "landscape-image-sm",
      "nameLabel": "landscape-image-sm",
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo-800x400.jpg",
      "width": 800,
      "height": 400,
      "gcd": 400,
      "ratio": 2,
      "printRatio": "2:1",
      "hideByPostType": false,
      "crop": true,
      "active": false,
      "lowResWarning": false,
      "cacheBreak": 1733844731623,
      "notYetCropped": false
      },
      {
      "name": "landscape-image-lg",
      "nameLabel": "landscape-image-lg",
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo-1579x900.jpg",
      "width": 1800,
      "height": 900,
      "gcd": 900,
      "ratio": 2,
      "printRatio": "2:1",
      "hideByPostType": false,
      "crop": true,
      "active": false,
      "lowResWarning": false,
      "cacheBreak": 1733844731623,
      "notYetCropped": false
      },
      {
      "name": "photo-image-sm",
      "nameLabel": "photo-image-sm",
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo-900x600.jpg",
      "width": 900,
      "height": 600,
      "gcd": 300,
      "ratio": 1.5,
      "printRatio": "3:2",
      "hideByPostType": false,
      "crop": true,
      "active": false,
      "lowResWarning": false,
      "cacheBreak": 1733844731623,
      "notYetCropped": false
      },
      {
      "name": "photo-image-lg",
      "nameLabel": "photo-image-lg",
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo-1579x1200.jpg",
      "width": 1800,
      "height": 1200,
      "gcd": 600,
      "ratio": 1.5,
      "printRatio": "3:2",
      "hideByPostType": false,
      "crop": true,
      "active": false,
      "lowResWarning": false,
      "cacheBreak": 1733844731623,
      "notYetCropped": false
      },
      {
      "name": "portrait-image-sm",
      "nameLabel": "portrait-image-sm",
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo-440x640.jpg",
      "width": 440,
      "height": 640,
      "gcd": 40,
      "ratio": 0.6875,
      "printRatio": "11:16",
      "hideByPostType": false,
      "crop": true,
      "active": false,
      "lowResWarning": false,
      "cacheBreak": 1733844731623,
      "notYetCropped": false
      },
      {
      "name": "portrait-image-lg",
      "nameLabel": "portrait-image-lg",
      "url": "https://domain.nl/wp-content/uploads/2024/12/photo-880x1280.jpg",
      "width": 880,
      "height": 1280,
      "gcd": 80,
      "ratio": 0.6875,
      "printRatio": "11:16",
      "hideByPostType": false,
      "crop": true,
      "active": false,
      "lowResWarning": false,
      "cacheBreak": 1733844731623,
      "notYetCropped": false
      }
      ],
      "lang": {
      "warningOriginalToSmall": "Waarschuwing: de originele afbeelding is te klein om met behoud van kwaliteit bijgesneden te kunnen worden tot deze grootte.",
      "cropDisabled": "Bijsnijden is uitgeschakeld voor dit berichttype.",
      "waiting": "Wacht tot de afbeeldingen zijn bijgesneden.",
      "rawImage": "Volledig",
      "pixel": "pixels",
      "instructions_overlay_text": "Kies een afbeeldingsgrootte.",
      "instructions_header": "Korte instructie",
      "instructions_step_1": "Stap 1: Kies een afbeeldinggrootte in de lijst.",
      "instructions_step_2": "Stap 2: Wijzig de selectie van de afbeelding hierboven.",
      "instructions_step_3": "Stap 3: Klik op \"bijgesneden afbeelding opslaan\".",
      "label_crop": "Bijsnijden opslaan",
      "label_same_ratio_mode": "Afbeeldingen met dezelfde verhouding",
      "label_same_ratio_mode_nothing": "Doe niets",
      "label_same_ratio_mode_select": "Samen selecteren",
      "label_same_ratio_mode_group": "Groepeer",
      "label_deselect_all": "Deselecteer alles",
      "label_large_handles": "gebruik grote besturingsvlakken",
      "dimensions": "Grootte:",
      "ratio": "Aspect-ratio:",
      "cropped": "Bijgesneden",
      "lowResWarning": "De originele afbeelding is te klein om met goede kwaliteit bij te snijden.",
      "notYetCropped": "Nog niet bijgesneden door WordPress",
      "message_image_orientation": "Deze afbeelding heeft een afbeelding ori?ntatie waarde in zijn exif meta gegevens. Houd er rekening mee dat dit kan resulteren in geroteerde of gespiegelde afbeeldingen op Safari iPad / iPhone.",
      "script_connection_error": "De plugin kan niet correct verbinden met de server",
      "noPermission": "Je hebt geen toestemming om de thumbnails bij te snijden",
      "unknownError": "An unknown error occured.",
      "infoNoImageSizesAvailable": "Geen afbeeldingen grootten beschikbaar om bij te snijden.",
      "headline_selected_image_sizes": "Geselecteerde afbeeldingsgroottes "
      },
      "hiddenOnPostType": false
      }

      Data-debug:

      [
      "validated input data",
      {
      "selection": {
      "x": 0,
      "y": 413,
      "x2": 1579,
      "y2": 2066,
      "w": 1579,
      "h": 2066
      },
      "sourceImageId": 2502,
      "activeImageSizes": [
      {
      "name": "thumbnail",
      "width": 600,
      "height": 600,
      "ratio": 1,
      "crop": 1
      },
      {
      "name": "post-thumbnail",
      "width": 900,
      "height": 900,
      "ratio": 1,
      "crop": 1
      }
      ]
      },
      "filename: /path-on-server/wp-content/uploads/2024/12/photo-600x600.jpg",
      "filename: /path-on-server/wp-content/uploads/2024/12/photo-900x900.jpg",
      "metadata updated:",
      {
      "width": 1579,
      "height": 2066,
      "file": "2024/12/photo.jpg",
      "filesize": 192865,
      "sizes": {
      "thumbnail": {
      "file": "photo-600x600.jpg",
      "width": 600,
      "height": 600,
      "mime-type": "image/jpeg",
      "filesize": 62407,
      "cpt_last_cropping_data": {
      "version": 2,
      "x": 0,
      "y": 413,
      "x2": 1579,
      "y2": 2066
      }
      },
      "post-thumbnail": {
      "file": "photo-900x900.jpg",
      "width": 900,
      "height": 900,
      "mime-type": "image/jpeg",
      "filesize": 118321,
      "cpt_last_cropping_data": {
      "version": 2,
      "x": 0,
      "y": 413,
      "x2": 1579,
      "y2": 2066
      }
      },
      "header-image-lg": {
      "file": "photo-1579x700.jpg",
      "width": 1579,
      "height": 700,
      "mime-type": "image/jpeg",
      "filesize": 120909
      },
      "landscape-image-sm": {
      "file": "photo-800x400.jpg",
      "width": 800,
      "height": 400,
      "mime-type": "image/jpeg",
      "filesize": 49477
      },
      "landscape-image-lg": {
      "file": "photo-1579x900.jpg",
      "width": 1579,
      "height": 900,
      "mime-type": "image/jpeg",
      "filesize": 152556
      },
      "photo-image-sm": {
      "file": "photo-900x600.jpg",
      "width": 900,
      "height": 600,
      "mime-type": "image/jpeg",
      "filesize": 78946,
      "cpt_last_cropping_data": {
      "version": 2,
      "x": 0,
      "y": 951,
      "x2": 1579,
      "y2": 2066
      }
      },
      "photo-image-lg": {
      "file": "photo-1579x1200.jpg",
      "width": 1579,
      "height": 1200,
      "mime-type": "image/jpeg",
      "filesize": 196172
      },
      "portrait-image-sm": {
      "file": "photo-440x640.jpg",
      "width": 440,
      "height": 640,
      "mime-type": "image/jpeg",
      "filesize": 50668
      },
      "portrait-image-lg": {
      "file": "photo-880x1280.jpg",
      "width": 880,
      "height": 1280,
      "mime-type": "image/jpeg",
      "filesize": 151266
      }
      },
      "image_meta": {
      "aperture": "0",
      "credit": "",
      "camera": "",
      "caption": "",
      "created_timestamp": "1683712950",
      "copyright": "",
      "focal_length": "0",
      "iso": "0",
      "shutter_speed": "0",
      "title": "",
      "orientation": "0",
      "keywords": []
      }
      }
      ]

      I also had this issue. Basically, the plugin won’t show the “Full Image Size” when selecting a crop size, instead it would just displayed the already cropped version to crop even more, and after cropping, the image would be deformed.

      I also fixed the issue reverting to version 1.8.0, it’s working without issues

      Thread Starter mluzvdb

      (@mluzvdb)

      @volkmar-kantor It is been over 2 months now, I am curious if a fix (besides keep on using the older version) is going to be implemented?

      Plugin Author Volkmar Kantor

      (@volkmar-kantor)

      @mluzvdb the problem is, i could not reproduce the problem. Can you provide me with ONE of the following testing environments:

      • a ddev environment which i could use locally to reproduce the problem
      • a docker environment which i could use locally to reproduce the problem
      • ftp/ssh and wordpress access to a server where i could investigate the problem
      Plugin Author Volkmar Kantor

      (@volkmar-kantor)

      You may message me via [email protected]

    Viewing 10 replies - 1 through 10 (of 10 total)
    • You must be logged in to reply to this topic.