1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 4.8 NextGEN Bilder an mobile Ansicht anpassen: Ist meine Lösung sicher?

Dieses Thema im Forum "Design" wurde erstellt von SFrueh, 20. Juli 2017.

Schlagworte:
  1. SFrueh

    SFrueh Active Member

    Registriert seit:
    27. Oktober 2013
    Beiträge:
    33
    Zustimmungen:
    0
    Hallo Forum,

    ich habe heute ein Problem (so weit so normal) und eine Lösung. Was ich hier mache wenn ich schon eine Lösung habe? Ich möchte gerne wissen, ob die Lösung sicher ist oder mir meine Seite zerpflücken wird.

    Das Problem:
    Die allseits beliebte und stets zuverlässig funktierende NextGEN Gallery (*hust*) gibt einem ja die Möglichkeit, Bilder aus der Galerie in Artikel einzubinden. Da die Bilder in aller Regel deutlich größer sein werden als man sie in der Artikel-Darstellung braucht, werden sie im Artikel natürlich verkleinert dargestellt. In meinem Fall in einer Größe von 400 x 267 Pixel.

    Am PC oder Laptop klappt das alles wunderbar und sieht gut aus. Mit dem Smartphone tritt dann das Problem auf. Die von NextGEN in die Artikel eingefügten Bilder passen sich nicht an die mobile Ansicht an und werden horizontal gestaucht. Die Höhe bleibt gleich, die Bilder werden einfach nur schmaler, ich nenne es mal den Akkordeon-Effekt. Sieht natürlich verboten aus und ist nicht maßstabsgetreu.


    Nun die mögliche Lösung:
    Wenn ich ein Bild von der Galerie in die Artikel einfüge, sieht das so aus:
    img class="ngg-singlepic ngg-none" src="https://zzzzzzzzzzzzz.de/wp-content/gallery/zzzzzzzzz/foto.jpg" alt="foto" width="400" height="267"

    Durch Rumprobieren habe ich herausgefunden, dass sich das Bild tadellos an die mobile Ansicht anpasst, wenn ich die Höhe schlicht und einfach nicht definiere. Also wenn ich statt width="400" height="267" einfach width="400" height="" schreibe.


    Hier die Frage:
    Kann ich das gefahrlos so machen und einfach die Höhe "leer" lassen? Oder wird sich das an anderer Stelle bitter böse rächen??? :???:

    Bei allem was mit NextGEN zu tun hat treten ja mitunter die übelsten Nebenwirkungen auf. Ich wäre daher über eine Einschätzung dankbar, ob meine Laien-Lösung funktionieren kann oder mir noch um die Ohren fliegen wird...

    Grüße,

    SFrueh
     
  2. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    4.906
    Zustimmungen:
    112
    ich verwende in WordPress das CSS Framework bootstrap. Dies erlaubt mir
    <img class="img-responsive" src="https://example.org/wp-content/gallery/zzzzzzzzz/foto.jpg" alt="foto" />


    wenn man dieses Framework nicht verwendet ist


    Bilder entsprechend der Viewport-Breite austauschen
    <img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="">

    Bilder für unterschiedliche Display-Qualitäten ausgeben
    <img src="bild.jpg" srcset="bild.jpg 1x, bild@2x.jpg 2x" alt="">


    weitere informationen

    https://responsiveimages.org/
     
  3. SFrueh

    SFrueh Active Member

    Registriert seit:
    27. Oktober 2013
    Beiträge:
    33
    Zustimmungen:
    0
    Ich verstehe das so, dass du Bildgrößen klein / mittel / groß fest als 320 bzw. 600 bzw. 900 Pixel Breite definiert hast und sich Wordpress je nach Ausgabegerät automatisch die passende Größe aussucht?

    Wo wird diese "Definition" eingefügt, über welche Stelle im Code bzw. welche php reden wir da?

    Wäre meine Bauern-Lösung - bei fixer Breite die Höhe einfach nicht zu definieren - riskant?
     
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.419
    Zustimmungen:
    750
    Du musst die width/height Angaben im img-Tag nicht anpassen, normalerweise reicht dieses CSS für responsive Bilder:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    In Deinem Fall ggf. so, wenn nicht alle anderen Bilder davon betroffen sein sollen:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  5. SFrueh

    SFrueh Active Member

    Registriert seit:
    27. Oktober 2013
    Beiträge:
    33
    Zustimmungen:
    0
    Danke für die Rückmeldungen, ich werde mal sehen was ich damit anfangen kann. :)
     
  6. SFrueh

    SFrueh Active Member

    Registriert seit:
    27. Oktober 2013
    Beiträge:
    33
    Zustimmungen:
    0
    Hallo Forum,

    ich habe in der style.css aus

    .wp-caption img {
    display: block;
    max-width: 98%;
    max-width: calc( 100% - 14px );

    nun

    .wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;


    gemacht. Es scheint tatsächlich zu funktionieren. In der mobilen Ansicht mögen die Bilder nicht immer zentral im Rahmen sitzen sondern am rechten Rand, aber sie sind jetzt tatsächlich korrekt proportioniert! Das bringt mich wirklich weiter. Nochmal vielen Dank und bis zum nächsten Problem (das bei meinem Glück sicher irgendwann auftaucht :wink:)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden