Support » Themes » Ausgabe Galeriebilder IE und Firefox

  • Hallo in die Runde,

    ich suche eine Lösung, dass mir im IE die Galeriebilder passend skaliert werden. Wenn ich ein Bild einfüge (zB 1600x1000px) und in den Bildeinstellungen „vollständige Größe“ und „100%“ festlege, dann passt sich das Bild im Firefox der Breite des Absatzes an. Im IE wird das Bild dann wirklich in der tatsächlichen Größe ausgegeben und zerschießt das Layout.

    Auch werden Galeriebilder, wenn ich zB. Hoch- und Querformat mische, im Firefox alle gleich groß zugeschnitten und in einer Zeile mit der gleichen Größe ausgegeben. Im IE bekommen die Bilder zwar auch die gleiche Breite, sie werden aber nicht zugeschnitten, sondern auf die Breite skaliert. Dadurch sieht die Bildergalerie in der Ausgabe chaotisch aus, wenn Hoch- und Querformate gemischt werden.

    Gibt es einen Workaround, dass der IE die Bilder genau wie der Firefox ausgeben kann?

    Viele Grüße
    Mike

    • Dieses Thema wurde geändert vor 3 Jahre, 1 Monat von mike1964.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Für deinen ersten Punkt habe ich nichts gefunden, wo das Layout zerschossen wird ….? Ggf solltest du eine genaue Angabe machen wo das zu sehen ist!
    Die Galleriebilder sehen im Firefox bzw Chrome anders aus, als im MS-Edge!
    Offensichtlich verschluckt sich der Edge beim Berechnen der Breite für die 3er Darstellung.
    Bei Firefox im Entwicklertool sieht der CSS-Teil dafür so aus:

    *@media all and (min-width:600px) {
    .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item {
    	width: calc((100% - 32px)/3);
    	margin-right: 16px;
        }
    }

    beim Edge-Entwicklertool hingegen so:

    /*@media all and (min-width:600px)*/
    .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item {
        width: calc(-10.6667px + 33.3333%);
        margin-right: 16px;
    }

    Wenn du nun die calc Berechnung vereinfachst und in die Zusätzlichen CSS schreibst sollte das Problem in den Griff zu bekommen sein.

    *@media all and (min-width:600px) {
    .wp-block-gallery.columns-3 .blocks-gallery-image, .wp-block-gallery.columns-3 .blocks-gallery-item {
    	width: 32.33333%;
    	margin-right: 1.5%;
        }
    }

    Wenns nicht klappt, den Code aus den Zusätzlichen CSS einfach wieder löschen 😉

    • Diese Antwort wurde geändert vor 3 Jahre, 1 Monat von jostu55.
    • Diese Antwort wurde geändert vor 3 Jahre, 1 Monat von jostu55.
    • Diese Antwort wurde geändert vor 3 Jahre, 1 Monat von Angelika Reisiger.

    Da beim ersten Absenden der lästige Hinweis kam „….Beitrag vom Mod zu. prüfen“ oder so ähnlich. habe ich das ohne Code-Schalter gesendet 😉

    • Diese Antwort wurde geändert vor 3 Jahre, 1 Monat von jostu55.
    Thread-Ersteller mike1964

    (@mike1964)

    Hallo Jostu55,

    ich hab mal ein paar Screenshots zusammengetragen, um das Problem zu veranschaulichen:

    Screenshots

    Vielleicht erklärt das besser mein Problem. Die Media-Queries werde ich mir mal näher anschauen, aber ich denke, das Problem des Zuschnitts der Galerievorschaubilder ist damit nicht gelöst.

    Viele Grüße
    Mike

    @jostu55
    bedanke dich bei Askimet, das Plugin scheint mehrere mit Code ausgezeichnete Passagen als Spam zu werten (nervt uns Mods mindestens genauso).

    @mike1964
    welcher Internet Explorer?

    Thread-Ersteller mike1964

    (@mike1964)

    @angelika
    IE11 / Win7-64 / V11.0.9600.19230

    @mike1964

    okay, IE11 ist der einzige noch von WordPress unterstützte Internet Explorer, alles was älter ist, wird nicht mehr supportet.

    Ich denke, das ist ein Bug im Gutenberg-Editor. Dafür müsstest du mal ein Ticket im Trac erstellen und dort den Fehler melden:

    https://make.wordpress.org/core/reports/

    Oder du installierst ein Galerie-Plugin.

    Thread-Ersteller mike1964

    (@mike1964)

    @angelika

    Der Gutenberg-Editor ist Theme- unabhängig und überall implementiert? Ich hab den Begriff zwar schon gelesen, aber bei meiner Seite ist mir der Begriff noch nie untergekommen.

    Hast du den Code versucht??
    Ja, ich weiß, dass es Unterschiede in der Darstellung gibt zwischen Firefox und bei mir dem MS-Edge. Die alten IE sind bei mir schon lange nicht mehr vertreten – ich habe den Schrott ausgemustert.
    Im Edge sieht es bei mir mit der CSS Anpassung identisch aus zum Firefox.
    Und ja, es hat mit Media-Queries zu tun! Unter 600px werden dann 2 Bilder nebeneinander ausgegeben und nicht 3 – steht auch so in der style.min.css.
    LINK meiner Bilder!

    An @la-geek DANKE für die Mitteilung bez. „….Beitrag vom Mod zu. prüfen“

    Thread-Ersteller mike1964

    (@mike1964)

    Ich hab den Code noch nicht versucht, war schon spät gestern. Unter 600px komme ich ja im Vollbild nicht (1920×1080), trotzdem spinnt er rum. Hast Du mal die Screenshots angeschaut, die ich online gestellt hab? Ich hätte ja kein Problem, wenn der IE mir zwei statt drei pro Spalte anzeigt, aber wenn mein IE schon mal so ausgeben würde wie Dein Edge, wär ja alles gut. Er zeigt mir Querformate zwar auch in der Dreierspalte an, aber eben nicht Vorschaubildfüllend, sondern nur skaliert auf die Breite, wie es die Spalte zulässt.

    Noch mal zum Kucken

    Dann mal Step by Step. Schreibe oder kopieren mal die 4 Zeilen im Dashboard unter Design – Customizer – Zusätzliche CSS hinein uns beobachte was geschieht.
    Passt es erst einmal für die 3 Bilder ist ein Punkt erledigt. Wenn nicht kannst du das genauso wieder herauslöschen und du kannst dabei nichts zerschießen.
    Für das Vollbild wird sich ggf. wer finden, der einen echten IE11 noch hat.

    Nur so zum verinnerlichen! Ein Bekannter, dem ich gelegentlich bei Computer-Problemen zur Seite stand war/ist nicht zu überreden von Win7-64 zu wechseln. Seit vielen sinnfreien Gesprächen dazu reden wir nicht mehr über seinen Rechner 😉 sondern übers Wetter.

    Thread-Ersteller mike1964

    (@mike1964)

    Ich hab die Codezeilen eingefügt. Zuerst meldet er mir einen Fehler: unexpected LBRACE. Auch wenn ich das @ ersetze, bleibt der Fehler. Ergebnis: keine Änderung im IE11 Layout.

    Lasse ich das * vor @media all… weg, frisst er den Code, allerdings auch hier ohne Änderung im IE11 Layout.

    Was Win7-64 angeht, so weiß ich auch, dass dessen Tage gezählt sind. Darum gehts ja auch nicht, sondern um den zickigen IE11. Sicher ist das Thema mit Win 10 und Edge vom Tisch, aber es soll außer mir auch in unserem Bekannten- und Verwandtenkreis noch Leute mit Win 7 geben 😉

    Übrigens: die quadratischen Vorschaubilder von früheren Seiten, die mit dem classic- Editor erzeugt wurden, werden im IE11 auch korrekt angezeigt. Erst wenn ich die jeweilige Seite in Blöcke wandele, tritt der Unterschied auf. Wahrscheinlich kann der IE mit dem Block- Editor nicht.

    Also der * vor @media… war von mir falsch! Sorry.
    Wenn du schreibst, dass die Bilder mit dem Classik-Editor passen installiere dir doch das Classic-Editor Plugin.
    Und wie @la-geek schon schrieb –

    ch denke, das ist ein Bug im Gutenberg-Editor. Dafür müsstest du mal ein Ticket im Trac erstellen und dort den Fehler melden:

    oder du schaust dich wie ebenfalls schon erwähnt um ein Gallerie-Plugin um!

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Das Thema „Ausgabe Galeriebilder IE und Firefox“ ist für neue Antworten geschlossen.