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

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

 

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?

 

Danke für die Rückmeldungen, ich werde mal sehen was ich damit anfangen kann.

 

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

 

Liebe Forumsmitglieder,

fünf Jahre später muss ich diesen Thread wieder auskramen, denn fünf Jahre später funktioniert die Lösung leider nicht mehr.

Fünf Jahre lang bin ich nach jedem Theme-Update die style.css aufgerufen und 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.

Leider funktioniert das nicht mehr!
Nach dem neuesten Theme-Update (aktuelle WP-Version) ist alles anders. Die style.css heißt jetzt editor-style.css und der "Ausgangscode" sieht auch gar nicht mehr aus wie oben. Es sind neue "Variablen" im "Ausgangscode" enthalten (margin und noch etwas). Egal ob ich die neuen Variablen lösche oder nicht, max-width auf 100 % und height auf auto zu setzen bringt nichts mehr

Vom Smartphone aus sehen die Fotos in meinen Artikeln jetzt also verzerrt aus (quadratisch) und die Abhilfe ist keine mehr.

Kennt jemand eine Lösung?

Viele Grüße

SFrueh

 

Hallo Forum,

es hat sich erledigt!
Im Plugin-Forum habe ich den Tipp bekommen, dass ich den Befehl height:auto mit height:auto !important priorisieren kann, sodass er damit etwaige andere Einstellungen überschreibt. Das habe ich in der editor-style.css und der style.css getan und jetzt geht es wieder. Hoffe das hält nun wieder fünf Jahre


Viele Grüße

 

Danke Sepp, da werde ich es mal reinkopieren!