# Option to turn off tall image cropping

**URL:** https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011
**Category:** Feature
**Created:** [2 ביוני,‏ 2018,‏ 6:47pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011 "2018-06-02T18:47:08Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2 ביוני,‏ 2018,‏ 6:47pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/1 "2018-06-02T18:47:08Z")

</div>

Going back to this feature request

> [@Feature Request: Tall and Thin Image Handling](https://meta.discourse.org/t/feature-request-tall-and-thin-image-handling/43573):
>
> I think this is a feature request. We have users putting images in posts, and sometimes those images are quite tall, i.e. height much greater than the width. Discourse provides an image preview in the post, but uses the image height within the post height to determine the aspect ratio. An example image looks like this: Ideally we’d like to present this image so that the image width takes the full post width, but perhaps shows a ‘More…’ link at the bottom. The ‘image viewer overlay’ (n…

I would like to have the option to turn this off, our forum is centered around photography and we do not want images to be cropped, I’ve already ran into some instances where an image with an unusual ratio was cropped even though it wasn’t that tall. I’d rather have no cropping so we always see the full image.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2 ביוני,‏ 2018,‏ 7:33pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/2 "2018-06-02T19:33:00Z")

</div>

So you’re saying you would rather they be resized to fit in a post? You don’t anticipate any possible problem with there being small-width images?

---

<div class="post-metadata">

### Author: ![BlackKnob](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blackknob/32/93549_2.png) [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [2 ביוני,‏ 2018,‏ 7:59pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/3 "2018-06-02T19:59:17Z")

</div>

Yes, it’s a big problem if you have a lot of tall images. Some of them will be cropped some not. Quite unpredictable and annoying. It’s a part of the problem with how lightboxing works.

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2 ביוני,‏ 2018,‏ 8:02pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/4 "2018-06-02T20:02:30Z")

</div>

Not in my particular forum, no. Photographs are fairly standard sizes except for some panoramas which are usually wide and not tall. I don’t foresee any tall screenshots being posted, just photographs. Retaining the entire image in the thumbnail is my top priority.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2 ביוני,‏ 2018,‏ 8:46pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/5 "2018-06-02T20:46:36Z")

</div>

I have a feeling this wouldn’t be so easy.

Background images can have an object-fit property of contain

> **[object-fit CSS property - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit)**
>
> The object-fit CSS property sets how the content of a replaced element, such as an or , should be resized to fit its container.

> `contain`
> 
> The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be [“letterboxed”](https://en.wikipedia.org/wiki/Letterboxing_(filming)) if its aspect ratio does not match the aspect ratio of the box.

But that isn’t for non-replaced images.

Although the raison d’être of Discourse is discussion and not an image gallery, I think this has come up often enough that a good Pull Request has a good chance of being considered. If not that, a plugin for those that wanted the option to either crop or resize images would get a few takers.

Have you been trying anything that has potential that you’re willing to share?

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [3 ביוני,‏ 2018,‏ 3:15pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/6 "2018-06-03T15:15:26Z")

</div>

I’m not trying to make an image gallery, but create discussions around photographs (critiques, etc.), having images display in their entirety is absolutely critical to foster the discussion.

I am not a programmer so I have no input, just providing the ideas to improve the forums for certain users.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [3 ביוני,‏ 2018,‏ 6:55pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/7 "2018-06-03T18:55:49Z")

</div>

That’s a shame. When the person wanting a feature is the one writing the code there is no problem understanding what the desired specifications are. When different, the specifications most often need to be “teased out” and all too often the goal post keeps moving.

Are you experienced with making mock-ups? They can go a long way in making it clear what end result is desired.

Even if you don’t know what programming might be needed, it would be best for you to make a list of details that is as complete as you can muster.

Because images are important to you, I’m assuming you’re more knowledgeable than I about what properties you want to preserve and which you’re willing to compromise. My take of “turn off cropping for tall images” is that you would like to have either a site-wide, or likely preferable per-post, setting. And that this setting would give the choice for the initial display (initial because they can be click-through to larger size better quality images) to either display in the container element preserving pixel quality at the expense of losing aspect ratio (cropped) or to preserve aspect ratio at the expense of losing pixel quality (resize).

Though not easy, I think the easier approach would be to have site-wide settings unless users lean towards being “techy”. In any case, I think there would need to be a list of “when this, then this” scenarios for programmers to work from. eg.

- when both the height and width are less or equal to the display area, display the original image
- when the height is \<= display area but the width is greater crop or resize and letterbox
- same for when the width is \<= but the height is greater
- when the image is both taller and wider than the display area … ?
- is the post-upload processing the same regardless of aspect ratio, any range of lengths, image type?
- when cropped, what area is to be used. top left, center?
- etc. etc.

The more detailed you can be about the specifications the more likely the code will be able to be worked up. Then it’s only a matter of a programmer being sufficiently motivated to write the code. eg. similar interest, financial compensation,

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [3 ביוני,‏ 2018,‏ 7:35pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/8 "2018-06-03T19:35:42Z")

</div>

Maybe I am thinking this is too simplistic, but in the original request to have this turned on @zogstrip said:

> [@Feature Request: Tall and Thin Image Handling](https://meta.discourse.org/t/feature-request-tall-and-thin-image-handling/43573/6):
>
> There’s now a new site setting: `crop_tall_images` which is enabled by default and will generate a crop of tall images instead of generating a thin thumbnail.

But @codinghorror put the kibosh on having the option.

> [@Feature Request: Tall and Thin Image Handling](https://meta.discourse.org/t/feature-request-tall-and-thin-image-handling/43573/7):
>
> Why ever disable this? Does it really need a site setting? It seems like such a net positive that I can’t imagine it ever needing it to be disabled?

Mad respect for Jeff, but I want it turned off 🙂

I simply want the option of turning the cropping off sitewide as it was before that change. The image would still respect the max image height and width settings. I do not see our user base ever posting super long images like screenshots so we simply do not want this.

An example of how it works now with cropping:

 ![cropped](https://global.discourse-cdn.com/meta/original/3X/5/d/5d139e33f1473f6ed7052e8953678f2e217adcb6.jpg)

And how I would like it to look:

 ![uncropped](https://global.discourse-cdn.com/meta/original/3X/1/b/1bb0be4868cd14aa69acd98701eb50eef75cc900.jpg)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [3 ביוני,‏ 2018,‏ 7:48pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/9 "2018-06-03T19:48:32Z")

</div>

Is this ratio configurable via a site setting @zogstrip?

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [3 ביוני,‏ 2018,‏ 9:03pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/10 "2018-06-03T21:03:44Z")

</div>

Thanks for the screen captures, that helps a lot.

Using a mini version to demonstrate original, cropped, resized  
 ![eiffel-full](https://global.discourse-cdn.com/meta/original/3X/a/e/ae35242bf0a7513030a57e60f293865a87e07a57.png) . ![eiffel-crop](https://global.discourse-cdn.com/meta/original/3X/e/6/e6b6ff3121b93788bcfdbe4a8fe55ccd644b332b.png) . ![eiffel-resize](https://global.discourse-cdn.com/meta/original/3X/0/e/0e991594809e267deebeb84908c31e0a3848b986.png)

What you mean by “don’t crop an image so it fits in the display area” is _not_ “resize an image so it fits in the display area” but “increase the display area to hold larger images”

Without some limits in place, this would introduce a risk of needing scroll, especially problematic for wide images needing horizontal scroll, but also potentially with vertical scroll as well.

Speaking of scroll, how would putting overflow scroll on the image container and not the page work for you?

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [4 ביוני,‏ 2018,‏ 1:37am UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/11 "2018-06-04T01:37:32Z")

</div>

The image would be resized as it is now but simply not cropped. As I stated the image would still follow the max image height/width rules in settings. So, for example, this image I intentionally cropped to be very narrow, it’s almost 5000px tall, I’d like it to be resized to be only 500px tall in the thumbnail as per max\_image\_height setting so the whole image is shown with no scrolling necessary. I don’t care if it’s super narrow because we never have images like this, just an extreme example to get the point across.

 ![Narrow](https://global.discourse-cdn.com/meta/original/3X/d/7/d74613b1da02d557e9e2aacb91467b06ba736af9.jpg)

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [4 ביוני,‏ 2018,‏ 1:38am UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/12 "2018-06-04T01:38:35Z")

</div>

I don’t want that, I want to see this (I resized to 500px high)  
 ![image](https://global.discourse-cdn.com/meta/original/3X/d/2/d2b8a98512b26cf61a32a210a4887e3b20f0bd46.jpg)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [4 ביוני,‏ 2018,‏ 1:53am UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/13 "2018-06-04T01:53:56Z")

</div>

To clarify this should be on by default but I do not oppose a site setting to define the ratio of height to width where it is triggered @zogstrip

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [5 ביוני,‏ 2018,‏ 3:13pm UTC](https://meta.discourse.org/t/option-to-turn-off-tall-image-cropping/89011/14 "2018-06-05T15:13:54Z")

</div>

It’s now a site setting 🎉

[https://github.com/discourse/discourse/commit/dc61eaad37898212829723a453129acdca9d6ee2](https://github.com/discourse/discourse/commit/dc61eaad37898212829723a453129acdca9d6ee2)

@davidkingham wait for the build to pass, update to latest and set “`min ratio to crop`” to **0** 😉
