Image transforms are resulting in black bars for some image crops.

[jsun]

We're running into an issue on one of our client's sites where certain image crops will be rendered incorrectly, showing black bars over some of the image content. Re-uploading the image to trigger new transforms often times fixes this.

Here's an example of one of the bug: https://filmstreams-production.s3.amazo ... 1129101448

We're using Craft CMS on ServerPilot with Imagick 3.4.3.

I've gone through the logs and am not seeing any errors that stand out. Any help on this matter would be greatly appreciated.

[snibgo]

It's hard to guess where the black bar has come from. If you tell us the version of ImageMagick, and link to all the input images that made this output, and paste the code that did the work, we might be able to advise. (However, I don't use IMagick.)

[jsun]

imagick module version: 3.4.3
Imagick compiled with ImageMagick version: ImageMagick 6.8.9-9 Q16 x86_64 2017-07-31 http://www.imagemagick.org
Imagick using ImageMagick library version: ImageMagick 6.8.9-9 Q16 x86_64 2017-07-31 http://www.imagemagick.org

Here's the original file upload: https://filmstreams-production.s3.amazo ... -Jane1.jpg

As far as the code goes, it's just following the basic image transform documentation. https://craftcms.com/docs/image-transfo ... -templates

The closest thing I found to my issue is this: http://www.wizards-toolkit.org/discours ... hp?t=22506
Though it does not solve my problem.

[snibgo]

The transformation has done more than create a black bar. It has also shifted the bottom part of the image to the left, and slightly resized. What should the result look like?

You have Craft CMS code, that calls IMagick, that calls ImageMagick. I don't know if there is a bug in your CMS code, or one or more of those products.

[Bonzo]

I see on the web CraftCMS has had other Imagick problems reported.

I suggest you:
contact craftCMS
See if you can find the Imagick code in their code
Try your image directly with Imagick and or Imagemagick

Are you only uploading one image at a time when this happens or bulk images

Black sections of the image can mean the file conversion was interrupted before completion but they are usually at the bottom of the image.

[jsun]

@snibgo You're right about the shift. Didn't really notice at first as the bar was the most apparent issue.

Here's the re-uploaded image's transform. No changes at all to the code. This is how it should look. It's a simple crop + quality update. https://filmstreams-production.s3.amazo ... 1206115016

This image is being used as a background image on the hero of the site.

Code: Select all

{% set desktop2x = {mode: "crop", width: 2880, height: 1170, quality: 50, position: "center-center", format: "jpg"} %}
{% set desktop = {mode: "crop", width: 1440, height: 585, quality: 75, position: "center-center", format: "jpg"} %}
{% set tablet2x = {mode: "crop", width: 2160, height: 880, quality: 50, position: "center-right", format: "jpg"} %}
{% set tablet = {mode: "crop", width: 1080, height: 440, quality: 75, position: "center-right", format: "jpg"} %}
{% set mobile2x = {mode: "crop", width: 1240, height: 660, quality: 50, position: "center-right", format: "jpg"} %}
{% set mobile = {mode: "crop", width: 620, height: 330, quality: 75, position: "center-right", format: "jpg"} %}
{% set image = entry.bannerImage.find({
  withTransforms: [
    desktop2x,
    desktop,
    tablet2x,
    tablet,
    mobile2x,
    mobile,
  ]
}) %}
{% set image = image[0] ?? null %}
{% if image %}
  <style>
    .banner--desktop {
      background-image: url('{{ image.getUrl(desktop) }}');
    }
    {% if image.getWidth > 2000 %}
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .banner--desktop { background-image: url('{{ image.getUrl(desktop2x) }}'); }
      }
    {% endif %}
    @media only screen and (max-width: 1080px) {
      .banner--mobile { background-image: url('{{ image.getUrl(tablet) }}'); }
    }
    @media only screen and (max-width: 1080px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (max-width: 1080px) and (min-resolution: 192dpi) {
      .banner--mobile { background-image: url('{{ image.getUrl(tablet2x) }}'); }
    }
    @media only screen and (max-width: 620px) {
      .banner--mobile { background-image: url('{{ image.getUrl(mobile) }}'); }
    }
    @media only screen and (max-width: 620px) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (max-width: 620px) and (min-resolution: 192dpi) {
      .banner--mobile { background-image: url('{{ image.getUrl(mobile2x) }}'); }
    }
  </style>
{% endif %}

[Bonzo]

Sorry I did not see the center-center Is that the geometry setting?
Would still be a good idea to post the actual Imagick code and try it with that. Nobody here is going to install Craftcms to try it or fight with a load of code variables.

My original post
Crop needs an offset otherwise it cuts images into tiles:

If the x and y offsets are omitted, a set of tiles of the specified geometry, covering the entire input image, is generated. The rightmost tiles and the bottom tiles are smaller if the specified geometry extends beyond the dimensions of the input image.

See: https://www.imagemagick.org/script/comm ... s.php#crop

[jsun]

Sorry, all of that Imagick stuff is happening behind the scenes. Not really sure what's running and I'm not super familiar with Imagick itself, so it's hard for me to troubleshoot.

I've switched my server from PHP 7.1 to 7.0 to see if it changes anything. I'll keep an eye on it and see if the issue comes up again.

[Bonzo]

This is part of the problem we have; if we do not know what code the CMS is using we can't test it. It is also difficult if there are lots of variables as well.