Ignore_cropper: no effect?

Developing with LiveWhale
1

I have a widget that displays a single news story with these relevant arguments:

<arg id="thumb_width">950</arg>
<arg id="thumb_height">850</arg>
<arg id="ignore_cropper">true</arg>

The format includes this:

<div class="magazine-homepage-hero-left" style="background-image: url({image_src})"></div>

I’ve been playing with the options, and it appears ignore_cropper isn’t doing anything, at least in this context (v2.14.0 story widget):

  1. Original Image: https://www.beloit.edu/live/image/gid/94/13856_wrw-Susan_Vogt_with_Jackson.jpg

  2. URL with ignore_cropper = true: https://www.beloit.edu/live/image/gid/94/width/950/height/850/crop/1/src_region/0,0,2595,1363/ignore_cropper/1/13856_wrw-Susan_Vogt_with_Jackson.jpg

  3. URL with ignore_cropper = false:
    https://www.beloit.edu/live/image/gid/94/width/950/height/850/crop/1/src_region/0,0,2595,1363/ignore_cropper/0/13856_wrw-Susan_Vogt_with_Jackson.jpg

  4. URL with no ignore_cropper parameter:
    https://www.beloit.edu/live/image/gid/94/width/950/height/850/crop/1/src_region/0,0,2595,1363/13856_wrw-Susan_Vogt_with_Jackson.jpg

  5. URL with no crop/region (presumed intended result):
    https://www.beloit.edu/live/image/gid/94/width/950/height/850/13856_wrw-Susan_Vogt_with_Jackson.jpg

#2, #3, #4 are identical, thus ignore_cropper isn’t doing what I assume it should do.

Looking on our dev site (2.19.0, same widget), ignore_cropper does seem to do something, but not what I’m expecting.

All three are different, where I’d assume ignore_cropper would be the same as having no crop parameter.

Questions:

  • What is ignore_cropper intended to do?
  • Was there a bug here that was fixed?
  • Anything else informative, given the above?
2

Ignore Cropper only has an effect if the story image was cropped in the story. If the story image was left alone, that arg won’t do anything.

As you know, content image crops can only have a square aspect ratio. So, imagine a case where you cropped a story image for use in a particular widget that wants a square image. The default, ignore_cropper = false, will respect that crop and give you the square image you set in the story.

Now imagine you want a different widget for the same story that needs a rectangle image. Without that arg, the rectangle image would be generated by cropping within the square that was set in the story image (a crop within a crop). ignore_cropper = true says to ignore the story image’s crop and generate the rectangle from the whole image.

I don’t think ignore_cropper works as a parameter in an image URL. I see in your 2.19 examples that it does do something. I’m not sure why the difference there.

Fun fact, I am fairly certain that the ignore_cropper arg came about nearly 15 years ago at my request because of exactly the scenario I described above.

3

Ah, its for the ignoring the thumbnail crop defined in a story (or whatever) by the editor.

I checked the two images, and the production image has no thumbnail crop, and the dev story has one. That would explain the different behavior.

I was thinking, just from the context of a URL:

https://www.beloit.edu/live/image/gid/94/width/950/height/850/crop/1/src_region/0,0,2595,1363/ignore_cropper/1/13856_wrw-Susan_Vogt_with_Jackson.jpg

…that it might ignore the /crop/1/src_region/W,X,Y,Z/ parameters that are appearing automatically in the image’s src in this widget context. It is this that I’m hoping to have the option to negate.

4

If I’m understanding correctly, I think you should be able to negate that by combining these two args:

<arg id="thumb_crop">false</arg>
<arg id="ignore_cropper">true</arg>

That tells the widget to not crop the thumbnail in the widget and ignore any crop set in the piece of content.

5

Perfect! With <arg id="thumb_crop">false</arg>, our magazine issue featured story and featured story page hero images are much more consistent in their presentation. Thank you Jon.

(Now, someone help my too-busy, scrambled, tunnel visioning brain. <_<)

For general context– should anyone come searching– these images are set as an element’s background with the following styles:

background-size: cover;
background-repeat: no-repeat;
background-position: center;

In this case, we want the full image available for the CSS to crop around the center as needed.

1 Like