Christian Kruse: Geändertes Handling der Bilder

8 41

Geändertes Handling der Bilder

Christian Kruse
  • ux
  • zu diesem forum
  • zur info
  1. 0
    Felix Riesterer
  2. 0
    Gunnar Bittersmann
    1. 0
      Christian Kruse
      1. 0
        Christian Kruse
        1. 0
          Matthias Apsel
          1. 0
            Christian Kruse
            1. 0
              Tabellenkalk
              1. 0
                Christian Kruse
                1. 0
                  Matthias Apsel
                  1. 0
                    Christian Kruse
                    1. 0
                      JürgenB
                      1. 0
                        Christian Kruse
                        1. 0
                          JürgenB
                          1. 0
                            Christian Kruse
                            1. 1
                              JürgenB
                              1. 0
                                Matthias Apsel
                              2. 1
                                Gunnar Bittersmann
                                1. 0
                                  JürgenB
                                  1. 0
                                    Christian Kruse
                                    1. 0
                                      Matthias Apsel
                                      1. 0
                                        Christian Kruse
                                        1. 0
                                          Matthias Apsel
                                          1. 0
                                            Christian Kruse
                                            1. 1
                                              Matthias Apsel
                                              • css
                                              • zu diesem forum
                                              1. 1
                                                Matthias Apsel
                                                1. 0
                                                  Christian Kruse
                                                  1. 0
                                                    Matthias Apsel
                                        2. 0
                                          at
                                      2. 0
                                        Christian Kruse
                                2. 0
                                  Matthias Apsel
                      2. 0
                        Gunnar Bittersmann
          2. 0
            Christian Kruse
      2. 0
        Gunnar Bittersmann
        1. 0
          Matthias Apsel
          1. 0
            Gunnar Bittersmann
            1. 0
              Matthias Apsel
              1. 0
                Gunnar Bittersmann
                1. 0
                  Felix Riesterer
                  • meinung
                  • ux
                  • zu diesem forum
                2. 0
                  Matthias Apsel
                  1. 0
                    Gunnar Bittersmann

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

[![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

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

  2. @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. 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

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

        1. Hallo Christian Kruse,

          Alternativ-Text

          Mein Handy tut das leider auch.Alternativ-Text

          Und zwar unabhängig davon, ob es horizontal gehalten wird oder nicht.

          Eine Möglichkeit, das Bild als Autor drehen zu können, wäre super.

          Bis demnächst
          Matthias

          --
          Rosen sind rot.
          1. 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

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

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

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

                  --
                  Rosen sind rot.
                  1. 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

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

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

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

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

                            1. 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:

                              • Der User zieht das Bild auf die Fläche "Bilder hierher ziehen …" oder öffnet das Bild über die File-Select-Box
                              • Der User sieht in der Vorschau, dass das Bild gedreht werden muss
                              • Der User drückt den entsprechenden Knopf und das Bild wird clientseitig gedreht
                              • Nach dem Abschicken des Postings wird das Bild entweder serverseitig gedreht, oder mit der entsprechenden CSS-Angabe versehen.

                              Gruß
                              Jürgen

                              1. Hallo JürgenB,

                                ich dachte mir das so:

                                Die Radiobuttons könnten unter dem Vorschaubild sein.

                                Bis demnächst
                                Matthias

                                --
                                Rosen sind rot.
                              2. @@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 🖖

                                --
                                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                                1. 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?

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

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

                                      --
                                      Rosen sind rot.
                                      1. 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

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

                                          --
                                          Rosen sind rot.
                                          1. 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

                                            1. Hallo Christian Kruse,

                                              Würde ich auch nie behaupten 😎

                                              Bau doch mal probeweise

                                              .thread-message { image-orientation: from-image; }
                                              

                                              ein

                                              Bis demnächst
                                              Matthias

                                              --
                                              Rosen sind rot.
                                              1. 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

                                                --
                                                Rosen sind rot.
                                                1. 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

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

                                                    --
                                                    Rosen sind rot.
                                        2. 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

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

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

                                  --
                                  Rosen sind rot.
                      2. @@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 🖖

                        --
                        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          2. Hallo Matthias,

            Alternativ-Text

            Mein Handy tut das leider auch.Alternativ-Text

            Fun fact: auf meinem iPhone sind die Bilder richtig 😜

            LG,
            CK

      2. @@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 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. 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

          --
          Rosen sind rot.
          1. @@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 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. 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

              --
              Rosen sind rot.
              1. @@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 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. Lieber Gunnar,

                  TL;DR: Es wird nicht zusätzlich gedreht.

                  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.

                2. 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.ä.

                  TL;DR: Es wird nicht zusätzlich gedreht.

                  In deinem IPhone. Vielleicht, weil es transform nicht ohne Präfix kann.

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                  1. @@Matthias Apsel

                    Kein Grund für Zynismus o.ä.

                    Für Satire sollte immer Platz sein.

                    TL;DR: Es wird nicht zusätzlich gedreht.

                    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 🖖

                    --
                    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory