Scale images button like on Meta

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.

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

Just upgrade to tests-passed

6개의 좋아요

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.

1개의 좋아요

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?

1개의 좋아요

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.

1개의 좋아요

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

4개의 좋아요

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

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

^^^ 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 :blush:

4개의 좋아요

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

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.

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).

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

5개의 좋아요

위 언급과 관련하여, 현재 의도된 동작임은 분명하지만 약간 어색하게 느껴지는 현상을 경험하고 있습니다.

해당 시나리오는 다음과 같습니다:

  • 레티나 화면에서 너비가 약 500px인 스크린샷을 캡처합니다.
    • 결과 이미지의 너비는 1000px가 됩니다.
  • Discourse에 업로드합니다.
  • 이미지는 690px로 리사이즈되어, 원래 이미지보다 더 크게 보입니다.

위 상황을 고려할 때, 현재 제공되는 100% / 75% / 50% 버튼 외에 “2x” 또는 “3x” 옵션이 제공되는 것이 적절해 보입니다. 이렇게 하면 리사이즈 우선순위가 변경되어, 가능하면 실제 크기에 가장 가깝게 이미지를 표시하도록 우선시하게 됩니다.

위 시나리오에서 “@2x” 옵션을 선택할 수 있다면, 이미지는 500px로 표시되어 실제 크기에 맞게 보일 것이며, 690px로 보이는 것과는 대조적입니다.

이는 라이트박스(Lightbox) 이미지 자체에도 해당됩니다. 라이트박스 이미지도 @2x 또는 @3x 레티나 상태로 열리기를 훨씬 선호합니다.