# Scale images button like on Meta

**URL:** https://meta.discourse.org/t/scale-images-button-like-on-meta/110787
**Category:** Feature
**Created:** [March 5, 2019, 11:15pm UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787 "2019-03-05T23:15:54Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![zsero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zsero/32/64016_2.png) [@zsero](https://meta.discourse.org/u/zsero)
#### Post date: [March 5, 2019, 11:15pm UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/1 "2019-03-05T23:15:55Z")

</div>

I’d like to have the same “scale-btn” functionality on my Discourse install as is here on Meta.

What exactly is that, a plugin? If so, does it have a name? Or it’s an unreleased version of Discourse?

I guess it’d doesn’t resample the images, just makes the browser display them at lower ratio, which is exactly what I’m looking for in all my Retina macOS screenshots. Inserting a 2x screenshot has always been a pain in Discourse, and this is exactly the perfect solution for it.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 5, 2019, 11:27pm UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/2 "2019-03-05T23:27:49Z")

</div>

Not a plugin or theme component, an awesome new core feature @maja added 🎊

Just upgrade to tests-passed

---

<div class="post-metadata">

### Author: ![zsero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zsero/32/64016_2.png) [@zsero](https://meta.discourse.org/u/zsero)
#### Post date: [March 6, 2019, 12:00am UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/3 "2019-03-06T00:00:05Z")

</div>

Cool, it’s working now. One issue though is that now Retina images are used and encouraged, the built-in resizing should also take care of that.

What I mean by that is that I have a screenshot, which is 1206x514 in 2x size or 603x257 in 1x size. If I upload it to my forum (or here) it automatically gets resized to 689x294, which is a very odd size. Odd, because it’s bigger than 1x size would be and also because it’s not an integer resize, so it’s blurry.

Once it’s in this size, I cannot use the 50% button as it’d be super tiny / unreadable, so I need to use the blurry/oversized 689 size.

---

<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: [March 6, 2019, 1:27am UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/4 "2019-03-06T01:27:59Z")

</div>

> [@zsero](#):
>
> it automatically gets resized to 689x294, which is a very odd size.

That’s the max allowed width of images in posts. Change it via your site settings.

Images will always be resized (thumbnailed) to max width allowed in posts, which is only logical … how can you have a 3000px wide image in a post?

---

<div class="post-metadata">

### Author: ![zsero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zsero/32/64016_2.png) [@zsero](https://meta.discourse.org/u/zsero)
#### Post date: [March 6, 2019, 2:02am UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/5 "2019-03-06T02:02:04Z")

</div>

OK, I’ve changed that setting to 1380. There are two bugs related to that:

- (minor) Already uploaded images cannot be reuploaded again, it remembers them (from hash I guess) and only offers the 689 size.
- The new scale buttons’s CSS go outside the view when this setting is used to allow wider images. Also the aspect ratio is wrong unless on 50% settings.

 ![ScreenFlow](https://global.discourse-cdn.com/meta/original/3X/f/c/fc92ceb40fa20b6b86c83a4f88bd8b304bd6fcdd.gif)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 6, 2019, 2:10am UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/9 "2019-03-06T02:10:46Z")

</div>

> [@zsero](#):
>
> The new scale buttons’s CSS go outside the view when this setting is used to allow wider images.

I introduced this issue yesterday (I didn’t test it with really tiny images). This will be fixed shortly.

---

<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: [March 6, 2019, 2:13am UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/10 "2019-03-06T02:13:27Z")

</div>

Nah, the better solution is not to show resizing options for tiny images. Having it inside the image is better.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [March 6, 2019, 2:18am UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/11 "2019-03-06T02:18:47Z")

</div>

Its more annoying to change that cause we can not do that in CSS afaik, we would need more code to add a bypass here for short images.

This is such an edge case though not sure it is even worth thinking about…

![image](https://global.discourse-cdn.com/meta/original/3X/f/5/f5cb158a6002c8c5b888cb1013366a43a415635a.png)

^^^ works just fine … and is sort of useful cause I get retina.

You need.

1. Ultra short image

2. First thing in the post

For this to happen, its almost like one is trying to break the system to prove it is broken 😊

---

<div class="post-metadata">

### Author: ![zsero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zsero/32/64016_2.png) [@zsero](https://meta.discourse.org/u/zsero)
#### Post date: [March 6, 2019, 12:24pm UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/12 "2019-03-06T12:24:02Z")

</div>

But this is actually a huge image, just tiny horizontally. How would I click 50% otherwise?

---

<div class="post-metadata">

### Author: ![zsero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zsero/32/64016_2.png) [@zsero](https://meta.discourse.org/u/zsero)
#### Post date: [March 6, 2019, 12:29pm UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/13 "2019-03-06T12:29:52Z")

</div>

OK, I just checked and a single line of text before indeed solves it.  
Also I cannot replicate the aspect ratio bug today, even though I’m trying with the very same image and I haven’t done anything with the site.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 6, 2019, 5:00pm UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/14 "2019-03-06T17:00:53Z")

</div>

The thought was that you wouldn’t really ever want to do that on images that are also very short.

Regardless, I’ve changed the implementation to move the controls _under_ the image (which in retrospect is a smarter way to do it).

 ![59%20AM](https://global.discourse-cdn.com/meta/original/3X/8/d/8d6376728c6e7a1241df1628505195de2f2d3b1e.png)

So if you update your instance again the problem will go away

---

<div class="post-metadata">

### Author: ![galligan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/galligan/32/224839_2.png) [@galligan](https://meta.discourse.org/u/galligan)
#### Post date: [August 2, 2020, 2:28pm UTC](https://meta.discourse.org/t/scale-images-button-like-on-meta/110787/19 "2020-08-02T14:28:26Z")

</div>

> [@codinghorror](#):
>
> Images will always be resized (thumbnailed) to max width allowed in posts, which is only logical

Have been experiencing some behavior, which is certainly the way it’s intended right now, but feels a little bit …off, related to the above comment.

The scenario goes:

- Take a screenshot that’s roughly 500px wide, on a retina screen
  - Resulting image is 1000px wide

- Upload to Discourse
- Image gets resized to 690px and now appears to be larger than original

Given the above, it feels appropriate that in addition to the 100% / 75% / 50% buttons available now, a “2x” or “3x” option be presented. This would change the priority of resizing to always try for presenting an image at as-close-to-reality as possible first.

With the above scenario, if given the option to select an “@2x”, the image would be shown as 500px and appear true-to-size, as opposed to 690px.

This also is true with the Lightbox images themselves. I would much prefer them to open up in an @2x or @3x retina state.
