# Mach deutlich sichtbarer, dass ein Bild beim Hochladen beliebig skalierbar ist

**URL:** https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030
**Category:** UX
**Created:** [28. Oktober 2019 um 06:35 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030 "2019-10-28T06:35:35Z")
**Posts on this page:** 11
**Page:** 1

<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: [28. Oktober 2019 um 06:35 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/1 "2019-10-28T06:35:36Z")

</div>

Das bringt mich fast täglich zur Verzweiflung.

- Ich lade einen Retina-Screenshot hoch
- Bewege sofort die Maus über den Vorschaubereich, um die „Größenanpassungssteuerelemente

---

<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: [28. Oktober 2019 um 06:51 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/2 "2019-10-28T06:51:55Z")

</div>

Ich sehe das nicht. Liegt das an der Latenz?

---

<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: [28. Oktober 2019 um 06:52 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/3 "2019-10-28T06:52:45Z")

</div>

Äußerst wahrscheinlich, zu 100 % in Firefox in Australien gegen Meta reproduzierbar.

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [28. Oktober 2019 um 08:02 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/4 "2019-10-28T08:02:46Z")

</div>

Also ist die Lösung ein Umzug? 😆

---

<div class="post-metadata">

### Author: ![danekhollas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danekhollas/32/79637_2.png) [@danekhollas](https://meta.discourse.org/u/danekhollas)
#### Post date: [28. Oktober 2019 um 09:08 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/5 "2019-10-28T09:08:38Z")

</div>

Ich stimme für Option 2. Das ist eine extrem nützliche Funktion, aber ich finde, man übersieht sie leicht, wenn man nichts davon weiß.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [28. Oktober 2019 um 10:41 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/6 "2019-10-28T10:41:45Z")

</div>

Ich sehe keinen Schaden darin, die Größenänderungssteuerelemente in der Vorschau bedingungslos aus folgenden drei Gründen anzuzeigen:

Erstens werden sie nur mit einer Deckkraft „ausgeblendet"

> <https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/common/d-editor.scss#L198>

Das bedeutet, dass sie auch dann noch Platz einnehmen, wenn sie unsichtbar sind. Der Wrapper ist absolut positioniert, aber wir fügen dem `.image-wrapper` etwas Padding hinzu.

Zweitens würde die Funktion dann auch auf Mobilgeräten funktionieren, was sie derzeit bei mir nicht tut, obwohl sie es tun sollte.

> <https://github.com/discourse/discourse/blob/a8a76198b146d06ce6793d0e0514a8ca93bc993c/app/assets/javascripts/discourse/components/composer-editor.js.es6#L1081-L1083>

Drittens würde dies die Auffindbarkeit der Funktion erhöhen.

Als Alternative könnten wir sicherstellen, dass die Steuerelemente für alle Bilder sichtbar sind, wenn man über das Vorschaufenster fährt, und nicht nur für einzelne Bilder. Außerdem könnten wir das Problem auf Mobilgeräten beheben (was möglicherweise nur auf meine Geräte beschränkt ist).

Wenn wir die Steuerelemente bedingungslos sichtbar machen, können wir uns auch etwas Zeit nehmen, um ihr Aussehen zu verbessern.

---

<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: [28. Oktober 2019 um 14:08 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/7 "2019-10-28T14:08:13Z")

</div>

Ja, ich würde es vorziehen, dass diese immer sichtbar sind und als Overlay über dem Bild liegen, damit der Abstand im Editor nicht größer wirkt als im eigentlichen Beitrag.

Ein Grund, warum wir das ursprünglich nicht so gemacht haben, ist, dass die Steuerelemente beim Tippen fürchterlich flackern würden. Ich glaube, es wurden einige Änderungen vorgenommen, die das Flackern reduziert haben, aber die Steuerelemente werden weiterhin vollständig aus dem DOM entfernt, sobald man zu tippen beginnt. Sobald das geklärt ist, kannst du sie @johani gerne so umgestalten, dass sie immer angezeigt werden!

---

<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: [29. Oktober 2019 um 04:55 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/8 "2019-10-29T04:55:25Z")

</div>

Ich sehe kein Flackern mehr, wenn ich die Deckkraft entferne. Haben wir das Problem also behoben?

Ich habe (1) wie folgt behoben:

> <https://github.com/discourse/discourse/commit/001c593155e8e6a53715cd9485c7c594e4999a23>
>
> Defer placing scale buttons causes "scale image" buttons to be missing if
> you ma…nage to scroll mouse to the area where the image is prior to image
> rendering.
> 
> This fix ensures scale buttons are always rendered leaving all the hiding
> and styling entirely to CSS.
> 
> This also corrects a bug where scaling toolbar was missing on mobile

Aber ich habe immer noch das Gefühl, dass das eigentliche Problem darin besteht, dass es nicht richtig auffindbar ist und von einem Hover-Effekt abhängt.

@Johani, könntest du vielleicht jetzt eine Theme-Komponente für das Styling erstellen (da du mit reinem CSS alles Mögliche umsetzen kannst)? Teste das unbedingt an einem sehr, sehr kurzen Bild. Installiere die Komponente dann auf dev und meta, damit wir sie eine Weile ausprobieren können und entscheiden können, ob wir sie bevorzugen oder nicht?

---

<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: [29. Oktober 2019 um 14:03 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/9 "2019-10-29T14:03:05Z")

</div>

> [@sam](#):
>
> Ich sehe kein Flackern mehr, wenn ich die Deckkraft entferne. Ich nehme an, wir haben das Problem damit gelöst?

Ja, ich glaube, irgendwann wurde eine Debounce-Funktion hinzugefügt? Jetzt, wo du das erste Problem behoben hast, sieht alles in Ordnung aus.

---

<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: [14. Juni 2024 um 22:09 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/10 "2024-06-14T22:09:47Z")

</div>

Wow, ich kann nicht glauben, dass 2019 ein ganzes Jahr her ist :lolsob:

> <https://github.com/discourse/discourse/pull/27489>
>
> This makes it so the image resize/alt-text controls in the composer editor are a…lways visible on desktop, instead of relying on hover (they're already always visible in the mobile preview).
> 
> This makes the controls more discoverable, and if we position them over the image, it means we end up with a preview that has spacing much closer to the cooked result. 
> 
> We planned on doing this long ago, but lost sight of it: https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030
> 
> 
> Before:
> !\[image\](https://github.com/discourse/discourse/assets/1681963/55d2f806-0319-48f2-8133-62ae37524c76)
> 
> After:
> !\[image\](https://github.com/discourse/discourse/assets/1681963/2c6c1668-8aaf-406d-a20d-58fbd7bcf3e5)
> 
> and cooked spacing...
> 
> Preview before:
> !\[image\](https://github.com/discourse/discourse/assets/1681963/19e45680-5909-4e93-a902-aaf9f4436378)
> 
> Preview after:
> !\[image\](https://github.com/discourse/discourse/assets/1681963/926bf2dd-9419-4134-a580-86bcdb4bc436)
> 
> 
> Actual spacing in cooked post: 
> !\[image\](https://github.com/discourse/discourse/assets/1681963/18c2e275-7c3d-4e92-860c-f7d67c0c8f9a)
> 
> 
> For tiny images... more of the image is obscured this way, but there's a slight transparency so it's still somewhat visible: 
> 
> 
> Before:
> !\[image\](https://github.com/discourse/discourse/assets/1681963/97d4723f-26ec-4736-8dbd-f348e056bcd0)
> 
> 
> After:
> !\[image\](https://github.com/discourse/discourse/assets/1681963/f5622c13-cee9-49f3-b7f3-f5aa582e30a6)
> 
> 
> Other states like grid and editing:
> 
> !\[image\](https://github.com/discourse/discourse/assets/1681963/3d81156c-72ad-4944-bfd9-cf41d987b8aa)
> 
> !\[image\](https://github.com/discourse/discourse/assets/1681963/f1ecc606-eee8-42af-a192-0e1cd19040ad)

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [7. Oktober 2024 um 05:51 UTC](https://meta.discourse.org/t/make-it-more-obvious-an-image-is-resizable-when-uploading-an-image/132030/11 "2024-10-07T05:51:16Z")

</div>

Ich bin persönlich überhaupt kein Befürworter dieser Änderung. Sie macht es viel geschäftiger. Gab es tatsächlich ein Problem mit der Auffindbarkeit der Größenänderung?
