Geändertes Handling der Bilder
Christian Kruse
- ux
- zu diesem forum
- zur info
Hallo zusammen,
ich habe das Handling der Bilder überarbeitet. Einerseits werden jetzt bis zu 10MB zugelassen; andererseits wird jetzt das Bild im Hintergrund herunter skaliert auf 800x600 bzw. die Auflösung, die am ehesten diesem Format entspricht aber die Seitenverhältnisse beibehält. Im Posting ist das Format auch verändert: dort wird jetzt auf das Bild ein Link auf das Original gelegt:
[![CK beim posten](/images/8323db1c-275c-4ef5-a224-20aec0067710.jpg?size=medium)](/images/8323db1c-275c-4ef5-a224-20aec0067710.jpg)
Das dürfte ein guter Kompromiss sein zwischen dem Wunsch, große Dateien hochladen zu wollen und der UX (keine unerwartet großen Inhalte).
LG,
CK
Lieber Christian,
ich habe das Handling der Bilder überarbeitet. Einerseits werden jetzt bis zu 10MB zugelassen; andererseits wird jetzt das Bild im Hintergrund herunter skaliert auf 800x600 bzw. die Auflösung, die am ehesten diesem Format entspricht aber die Seitenverhältnisse beibehält.
das finde ich sehr vernünftig. +1
Das dürfte ein guter Kompromiss sein zwischen dem Wunsch, große Dateien hochladen zu wollen und der UX (keine unerwartet großen Inhalte).
Eben deshalb.
Im Posting ist das Format auch verändert: dort wird jetzt auf das Bild ein Link auf das Original gelegt:
Wiki-style, yeah!
Liebe Grüße,
Felix Riesterer.
@@Christian Kruse
ich habe das Handling der Bilder überarbeitet.
Da ist ein Bug: Bilder sind gedreht und reagieren nicht auf {: style="transform: rotate(90deg)"}
Und sie scheinen auch nicht mehr auf {: width="400"}
zu reagieren. Ärgerlich.
LLAP 🖖
Hallo Gunnar,
Da ist ein Bug:
Denke ich nicht.
Bilder sind gedreht
Dann sind die Original-Bilder selber vermutlich auch schon gedreht. Ich hab aber wohl erst morgen wieder Zeit mir das genauer anzusehen.
und reagieren nicht auf
{: style="transform: rotate(90deg)"}
Da hatten wir einen Handel… hint, hint
LG,
CK
Hallo Gunnar,
Da ist ein Bug:
Denke ich nicht.
Weiterhin nicht. Die Originale sehen bei mir genau so aus wie die verkleinerten Varianten. Ich mache mit den Bildern auch nichts anderes als ein Resize, es würde mich also wundern, wenn ich so etwas verursachen würde.
LG,
CK
Hallo Matthias,
Und zwar unabhängig davon, ob es horizontal gehalten wird oder nicht.
Hm, interessant, hier kann ich das Problem nachvollziehen. Vielleicht mal automatisch nach EXIF-Angabe drehen lassen und die EXIF-Informationen entfernen.
Eine Möglichkeit, das Bild als Autor drehen zu können, wäre super.
Ich glaube nicht, dass das sinnvoll ist.
LG,
CK
Hallo,
Eine Möglichkeit, das Bild als Autor drehen zu können, wäre super.
Ich glaube nicht, dass das sinnvoll ist.
Exif weiß im besten Fall wie rum richtig ist, der Autor in fast jedem.
Gruß
Kalk
Hallo Tabellenkalk,
Eine Möglichkeit, das Bild als Autor drehen zu können, wäre super.
Ich glaube nicht, dass das sinnvoll ist.
Exif weiß im besten Fall wie rum richtig ist, der Autor in fast jedem.
Das mag sein, wobei ich sagen würde, wenn das EXIF nicht stimmt, dann hält mal die Kamera falsch. Aber schonmal drüber nachgedacht, wie eine UI dafür aussehen könnte? Und wie die technische Umsetzung dafür sein könnte? Ich schon.
LG,
CK
Hallo Christian Kruse,
Das mag sein, wobei ich sagen würde, wenn das EXIF nicht stimmt, dann hält mal die Kamera falsch.
Zumindest im Querformat gibt es bei Handys kein falsch.
Bis demnächst
Matthias
Hallo Matthias,
Das mag sein, wobei ich sagen würde, wenn das EXIF nicht stimmt, dann hält mal die Kamera falsch.
Zumindest im Querformat gibt es bei Handys kein falsch.
Bei Handys sind aufgrund der Sensorik die EXIF-Daten auch richtig.
LG,
CK
Hallo Christian,
Bei Handys sind aufgrund der Sensorik die EXIF-Daten auch richtig.
aber nur solange das Handy weiß, wo unten ist. Wenn ich senkrecht nach unten fotografiere, z.B. um eine Buchseite oder eine Skizze aufzunehmen, klappt das nicht mehr.
Gruß
Jürgen
Hallo JürgenB,
aber nur solange das Handy weiß, wo unten ist. Wenn ich senkrecht nach unten fotografiere, z.B. um eine Buchseite oder eine Skizze aufzunehmen, klappt das nicht mehr.
Im Regelfall funktioniert das trotzdem noch recht gut.
Aber ich will mich da auch nicht sperren. Ich bin für Vorschläge, wie sich das - mit möglichst wenig Aufwand - implementieren lässt, offen. Contributions welcome.
LG,
CK
Hallo Christian,
Ich bin für Vorschläge, wie sich das - mit möglichst wenig Aufwand - implementieren lässt, offen. Contributions welcome.
neben der Fläche "Bilder hierher ziehen ..." drei Radiobuttons mit 90°, 180°, 270° drehen. Das Drehen kann dann serverseitig oder auch clientseitig per CSS erfolgen. In der Vorschau sieht man dann das Ergebnis.
Gruß
Jürgen
Hallo JürgenB,
Ich bin für Vorschläge, wie sich das - mit möglichst wenig Aufwand - implementieren lässt, offen. Contributions welcome.
neben der Fläche "Bilder hierher ziehen ..." drei Radiobuttons mit 90°, 180°, 270° drehen. Das Drehen kann dann serverseitig oder auch clientseitig per CSS erfolgen. In der Vorschau sieht man dann das Ergebnis.
Dazu muss der User erstens wissen, dass das Bild auf Kopf sein wird und zweitens vorher daran denken, dass er den Button vorher betätigen muss. Halte ich für unrealistisch.
LG,
CK
Hallo Christian,
neben der Fläche "Bilder hierher ziehen ..." drei Radiobuttons mit 90°, 180°, 270° drehen. Das Drehen kann dann serverseitig oder auch clientseitig per CSS erfolgen. In der Vorschau sieht man dann das Ergebnis.
Dazu muss der User erstens wissen, dass das Bild auf Kopf sein wird und zweitens vorher daran denken, dass er den Button vorher betätigen muss. Halte ich für unrealistisch.
ich dachte mir das so:
Gruß
Jürgen
Hallo JürgenB,
ich dachte mir das so:
Die Radiobuttons könnten unter dem Vorschaubild sein.
Bis demnächst
Matthias
@@JürgenB
Dazu muss der User erstens wissen, dass das Bild auf Kopf sein wird und zweitens vorher daran denken, dass er den Button vorher betätigen muss. Halte ich für unrealistisch.
+1. Das scheitert schon an erstens, denn …
- Der User sieht in der Vorschau, dass das Bild gedreht werden muss
… er sieht es nicht. Auf meinem iPhone waren die Bilder ja richtig orientiert. Auch im fertiggestellten Posting.
Die falsche Orientierung sieht der Nutzer ja nur, wenn er sich sein Posting auf einem anderen Gerät (MacBook) ansieht. Die Verwendung von mehreren Geräten ist nicht von jedem Nutzer zu erwarten.
LLAP 🖖
Hallo Gunnar,
… er sieht es nicht. Auf meinem iPhone waren die Bilder ja richtig orientiert. Auch im fertiggestellten Posting.
Die falsche Orientierung sieht der Nutzer ja nur, wenn er sich sein Posting auf einem anderen Gerät (MacBook) ansieht. Die Verwendung von mehreren Geräten ist nicht von jedem Nutzer zu erwarten.
dann hat aber eines deiner Geräte Probleme mit der Orientierung. Wie soll denn hier die Forensoftware helfen, wenn verschiedene Geräte die Bilder unterschiedlich anzeigen?
Gruß
Jürgen
PS Um welche Bilder geht es denn?
Hallo JürgenB,
… er sieht es nicht. Auf meinem iPhone waren die Bilder ja richtig orientiert. Auch im fertiggestellten Posting.
Die falsche Orientierung sieht der Nutzer ja nur, wenn er sich sein Posting auf einem anderen Gerät (MacBook) ansieht. Die Verwendung von mehreren Geräten ist nicht von jedem Nutzer zu erwarten.
dann hat aber eines deiner Geräte Probleme mit der Orientierung.
Die Unterschiedlichen Browser haben unterschiedliche Unterstützung für EXIF. Deshalb sagte ich ja: so rotieren, wie es EXIF vorsieht und ansonsten EXIF entfernen halte ich für die sinnvollste Möglichkeit.
Wie soll denn hier die Forensoftware helfen, wenn verschiedene Geräte die Bilder unterschiedlich anzeigen?
Na so, wie ich es vorgeschlagen hatte ;)
LG,
CK
Hallo Christian Kruse,
Na so, wie ich es vorgeschlagen hatte ;)
Und auf wwwtech funktioniert es offensichtlich.
Allerdings: Bei meinen Bildern steht eine Orientierung von 90°. Es muss aber zurückgedreht werden.
Bis demnächst
Matthias
Hallo Matthias,
Na so, wie ich es vorgeschlagen hatte ;)
Und auf wwwtech funktioniert es offensichtlich.
Ja, ziemlich gut.
Allerdings: Bei meinen Bildern steht eine Orientierung von 90°. Es muss aber zurückgedreht werden.
Naja, jain. Die Bilder liegen auf der Seite, aber EXIF sagt, dass sie gedreht werden müssen (Orientation: Rotate 90 CW
, CW steht für Center-West, also um das Zentrum gedreht Richtung Westen). Warum die Desktop-Browser das nicht machen, wenn das Bild im Dokument ist es aber tun, wenn das Bild nicht im Dokument ist, ist ein Rätsel, das ich noch nicht gelöst habe 😀
LG,
CK
Hallo Christian Kruse,
Warum die Desktop-Browser das nicht machen, wenn das Bild im Dokument ist es aber tun, wenn das Bild nicht im Dokument ist, ist ein Rätsel, das ich noch nicht gelöst habe 😀
Siehste, das ist mir noch gar nicht aufgefallen.
Ich würde da zunächst einmal ein HTML-Dokument erstellen, dass nur das Bild enthält und mal schauen, wie das denn aussieht.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="https://forum.selfhtml.org/images/f74a4696-ab17-4ccb-b22d-6215a8bb41bd.jpg?size=medium">
</body>
</html>
Und auch da ist es gedreht. Ergo liegt es nicht am Forum.
Bis demnächst
Matthias
Hallo Matthias,
Ergo liegt es nicht am Forum.
Würde ich auch nie behaupten 😎 Ich hatte damit auf WWWTech auch Probleme, bis ich die Bilder dann auf dem Server gedreht habe und EXIF-Angaben entfernt habe.
LG,
CK
Hallo Christian Kruse,
Würde ich auch nie behaupten 😎
Bau doch mal probeweise
.thread-message { image-orientation: from-image; }
ein
Bis demnächst
Matthias
Hallo Matthias Apsel,
Bau doch mal probeweise
.thread-message { image-orientation: from-image; }
Und für die mit CSS gedrehten Bilder
.thread-message img[style*="rotate"] { image-orientation: initial; }
Bis demnächst
Matthias
Hallo Matthias,
Bau doch mal probeweise
.thread-message { image-orientation: from-image; }
Und für die mit CSS gedrehten Bilder
.thread-message img[style*="rotate"] { image-orientation: initial; }
Das hatte ich damals auch schon probiert, die Browser-Unterstützung dafür ist aber dürftig. Chrome etwa unterstützt das nicht. Beim Firefox ändert es etwas.
Ich hab deinen Pull Request vor 30 Sekunden online gestellt, dann kannst du selbst testen 😉
LG,
CK
Hallo Christian Kruse,
Das hatte ich damals auch schon probiert, die Browser-Unterstützung dafür ist aber dürftig. Chrome etwa unterstützt das nicht. Beim Firefox ändert es etwas.
Ja, leider.
Ich hab deinen Pull Request vor 30 Sekunden online gestellt, dann kannst du selbst testen 😉
Danke. Es schadet ja aber auch nicht.
Bis demnächst
Matthias
Hallo Christian.
Orientation: Rotate 90 CW
, CW steht für Center-West, also um das Zentrum gedreht Richtung Westen
Ja, so ähnlich hätte ich CW auch übersetzt.
MfG, at
Hallo Matthias,
Na so, wie ich es vorgeschlagen hatte ;)
Und auf wwwtech funktioniert es offensichtlich.
Und hier hab ich das jetzt auch mal so eingebaut 😀
LG,
CK
Hallo Gunnar Bittersmann,
- Der User sieht in der Vorschau, dass das Bild gedreht werden muss
… er sieht es nicht. Auf meinem iPhone waren die Bilder ja richtig orientiert. Auch im fertiggestellten Posting.
In meinem Fall (S6 Edge, Chrome) habe ich schon in der Vorschau sehen können, dass die Bilder falsch orientiert waren.
Bis demnächst
Matthias
@@JürgenB
Bei Handys sind aufgrund der Sensorik die EXIF-Daten auch richtig.
aber nur solange das Handy weiß, wo unten ist. Wenn ich senkrecht nach unten fotografiere, z.B. um eine Buchseite oder eine Skizze aufzunehmen, klappt das nicht mehr.
So hatte ich die Bilder gestern Abend auch aufgenommen.
Da ich in den Zeichnungen die Beschriftung der Höhen vergessen hatte, hab ich die Bilder heute Mittag nochmal aufgenommen, wobei die fast senkrecht standen und das iPhone sehr gut wusste, wo oben und unten ist. Ergebnis: Dasselbe in grün – die Bilder waren auf dem iPhone korrekt, auf dem Mac gedreht.
Da die Bilder aber recht blaustichig waren, hab ich sie auf dem iPhone bearbeitet (durch den S/W-hell-Filter gejagt) und nochmals im Posting ausgetauscht. Ergebnis: Jetzt sind sie auch auf dem Mac richtig.
Was tut das iPhone da mit den Bildern, wenn es doch eigentlich nur Farbinformationen bearbeiten soll?
LLAP 🖖
Hallo Matthias,
Fun fact: auf meinem iPhone sind die Bilder richtig 😜
LG,
CK
@@Christian Kruse
Da ist ein Bug:
Denke ich nicht.
Bug im Sinne von: UX-Bugs sind auch Bugs.
Dann sind die Original-Bilder selber vermutlich auch schon gedreht. Ich hab aber wohl erst morgen wieder Zeit mir das genauer anzusehen.
Dann sieh dir vorher auch https://forum.selfhtml.org/self/2016/dec/4/html5-punkt-1-label/1682218#m1682218 ff. an. ;-)
und reagieren nicht auf
{: style="transform: rotate(90deg)"}
Da hatten wir einen Handel… hint, hint
Hm, stimmt. Und du erwartest, dass ich zuerst meinen Teil einlöse, bevor du das Forum reparierst.
LLAP 🖖
Hallo Gunnar Bittersmann,
Bug im Sinne von: UX-Bugs sind auch Bugs.
Wie kommst du denn darauf, dass es ein UX-Bug ist?
bevor du das Forum reparierst.
Reparieren ist das falsche Wort, imho. Es wäre ein Reagieren auf Browsereigenheiten.
Bis demnächst
Matthias
@@Matthias Apsel
Bug im Sinne von: UX-Bugs sind auch Bugs.
Wie kommst du denn darauf, dass es ein UX-Bug ist?
Falsch orientierte Bilder sind ein UX-Bug.
bevor du das Forum reparierst.
Reparieren ist das falsche Wort, imho. Es wäre ein Reagieren auf Browsereigenheiten.
Mit reparieren ist gemeint: Wiederzulassen von Autoren-Inline-Styles (d.h. von {: style="…"}
), die eben doch hin und wieder nützlich oder gar nötig sind.
LLAP 🖖
Hallo Gunnar Bittersmann,
Mit reparieren ist gemeint: Wiederzulassen von Autoren-Inline-Styles (d.h. von
{: style="…"}
), die eben doch hin und wieder nützlich oder gar nötig sind.
Damit würdest du das für einige Browser richtig und für andere aber zusätzlich drehen.
Bis demnächst
Matthias
@@Matthias Apsel
Mit reparieren ist gemeint: Wiederzulassen von Autoren-Inline-Styles (d.h. von
{: style="…"}
), die eben doch hin und wieder nützlich oder gar nötig sind.Damit würdest du das für einige Browser richtig und für andere aber zusätzlich drehen.
Ich hätte auf https://forum.selfhtml.org/self/2016/dec/4/html5-punkt-1-label/1682218#m1682218 ff. verweisen sollen. Oh, wait!
Ich hätte ff. fett schreiben sollen‽ Und kursiv‽ Und rot‽ Und doppelte Größe‽
Ach so, geht ja (gerade) nicht.
TL;DR: Es wird nicht zusätzlich gedreht.
LLAP 🖖
Lieber Gunnar,
da finde ich CKs Idee mit dem serverseitigen Drehen und mit dem anschließenden Entfernen der zugehörigen EXIF-Einträge aber wesentlich besser, weil richtig. Dann solltest Du im Anschluss bei Deinem Posting damit machen können, was Du willst - auch das finde ich richtig.
Liebe Grüße,
Felix Riesterer.
Hallo Gunnar Bittersmann,
Ich hätte ff. fett schreiben sollen‽ Und kursiv‽ Und rot‽ Und doppelte Größe‽
Nein, ich hab das wohl gelesen.
Ach so, geht ja (gerade) nicht.
Kein Grund für Zynismus o.ä.
In deinem IPhone. Vielleicht, weil es transform nicht ohne Präfix kann.
Bis demnächst
Matthias
@@Matthias Apsel
Kein Grund für Zynismus o.ä.
Für Satire sollte immer Platz sein.
In deinem IPhone. Vielleicht, weil es transform nicht ohne Präfix kann.
Good catch. Aber ich hatte doch schon auf iOS 9 geupgradet (upgegradet?). Daran liegt’s nicht.
LLAP 🖖