Inline-Style bei Bildern verhindern/ändern?

[Pina82]

Hallo,

mein aktuelles Problem ist das Wordpress beim Einfügen von Bildern in Beiträgen oder Seiten über den Media-Button immer einen inline-style mit Breite und Höhe einträgt. Das macht es mir relativ schwer, die Bilder über CSS zu formatieren.
Kann ich das verhindern oder, besser noch, kann ich dem Bild statt einer Größe eine Klasse geben?
Ich könnte natürlich beim Hochladen der Bilder schon andere Größen erstellen lassen, aber eigentlich möchte ich die Bildgröße über CSS regeln.

Gibt es die Möglichkeit, den content bei der Ausgabe zu verändern? Genauer gesagt die Formatierung?
Beispiel: Mein content sieht so aus:
"...
<div class="beitrag">
<p> Hier steht Text </p>
<img src="bild_mit_pfad" style="width: 100px; height: 100px">
</div>
...
"
Und das möchte ich haben:
"...
<div class="beitrag">
<p>Hier steht Text</p>
<img src="bild_mit_pfad" class="querbild"> /* ODER class="hochbild", je nach Bildgröße
</div>

Ich möchte hier keine fertigen Lösungsvorschläge oder das jemand meine Arbeit macht, sondern eher Hinweise/Ratschläge, wonach ich suchen muss, bzw. ob das von mir gedachte überhaupt möglich ist. Eventuell fehlt mir hier auch einfach Grundverständnis, da wäre ich über Tipps für Tutorials und Literatur

Danke.

 

[dn3d_fanboy]

Die Frage ist, was willst du da noch über CSS formatieren?
Es macht schon Sinn, dass WP die Bilder mit fester Größe ins HTML schreibt, damit schnell gerendert werden kann. Würdest du diese jetzt nochmals mit CSS verändern würde erst das Bild in seiner Originalgröße geöffnet und dann nochmals per CSS skaliert, wourch du die Ladezeiten aufgrund des Renderings verlangsamst.
Das macht eigentlich nur Sinn, wenn die Bilder größer sind als kleine Bildschirme, damit die Bilder nicht über die Breite hinausragen.

Für responsive Bilder könntest du im CSS

{max-width: 100%, height: auto;}

verwenden.

Legt WP nicht auch noch automatisch einen <p>-Tag um die Bilder? Bin mir gerade nicht ganz sicher.

 

[Pina82]

Erstmal danke für die Antwort. Klar kann ich mit zusätzlichen definitionen und !important auch noch über die inline-styles drüber schreiben, aber eigentlich möchte ich volle Kontrolle über die Bildgröße.
Querformatbilder können, bis zu einer bestimmten Höhe, auch gerne Vollbild angezeigt werden. Hochformatbilder dürfen nicht über eine bestimmte Höhe kommen, egal wie breit sie sind.

Ich kann ja im Media-Dialog nicht nur die Standardgrößen auswählen, sondern auch eigene Größen eingeben, also mein 150x150px Bild auch mit einer Größe von 1200x30px auf die Seite laden. Das würde vermutlich aus dem Inhaltbereich rausragen und mir das komplette Design zerhacken - oder ich gebe dem Bereich eine feste Breite und ein overflow: hidden, aber dann fehlt was vom Bild.

Mir würde es ja erst einmal reichen, wenn mir keine automatischen inline-style-Angaben mit in den img-Tag geschrieben würden.

 

[dn3d_fanboy]

Du kannst ja, wenn du Bilder einfügst, diese noch zusätzlich skalieren oder zuschneiden. Wenn du aber schon ohnehin eine maximale Höhe haben möchtest, macht es doch am ehesten Sinn, die Bilder direkt in der entsprechenden Auflösung hochzuladen.
Bzw. macht es eventuell Sinn, per CSS mit

max-height: XXpx;
width: auto;

zu arbeiten.
Bist du dir auch sicher, dass WP bei dir Inline-styles setzt? Normalerweise wird da nur HTML-Code verwendet, kein CSS.

 

[Pina82]

Arghh, du hast ja recht... Braucht jemand ein Brett?

Also kein Inline-Style in den img-Tags, nur HTML Größenangaben, bin durcheinander gekommen, sorry.

Aber ich würde trotzdem noch gerne wissen ob ich auch content bei der Ausgabe formatieren kann.

 

[dn3d_fanboy]

Und genau die Größenangaben sollten besser da bleiben, da du sonst die Seite unnötig verlangsamst, weil der Browser erstmal nicht weiß, was er rendern soll.

Warum soll der Nutzer das denn über den Editor ändern sollen? Ich gehe mal zu 99% davon aus, dass die meisten Nutzer der Texteditor nicht interessiert.

Über die Klasse "wp-image-6" könntest du das natürlich überschreiben, da müsstest du aber für jedes Bild die Klasse kennen.

Vielleicht funktioniert auch das hier noch (ist von 2012): https://css-tricks.com/snippets/wordpress/remove-width-and-height-attributes-from-inserted-images/

Wie geschrieben, der Sinn des Ganzen erschließt sich mir immer noch nicht.