Wer rendert das Logo?

[martin.schaible]

Hallo

Ich suche mir gerade ein wenig fusselig. Im Admin kann ich das Logo des Themes prima austauschen. Ich würde aber gerne eine eigene CSS-Klasse dazu erstellen, weil ich die "width" und "height"-Angaben im Markup nicht so mag.

Zuerst dachte ich, dass ich im gekauften Theme den Code für's Rendern des Bildes finde. Dies ist nicht der Fall. Also wird es wohl eine Contao Core-Funktion zu sein.

Könnt ihr mir helfen?

Danke!

ThemeLogo.png

[lucina]

Möglicherweise hilft es, wenn Du schreibst, um welches Theme es sich handelt.

[martin.schaible]

Das Theme heisst "enfants"

[planepix]

Das hier?
https://themes.contao.org/de/index/enfants-contao.html

[martin.schaible]

Ja, aber die Version für Contao 5.

[Spooky]

weil ich die "width" und "height"-Angaben im Markup nicht so mag.

Warum?

[martin.schaible]

Ist das jetzt wichtig, ob ich etwas mag oder nicht?

Ich würde nur gerne wissen, wo in diesem Fall das Markup generiert wird.

[mlweb]

Ist das jetzt wichtig, ob ich etwas mag oder nicht?

Nicht wirklich, aber für Bilder sind die Größenangaben im Markup eine gut gemeinte Empfehlung.
https://www.w3schools.com/tags/att_img_width.asp

Die Leute die sich mit der Materie ernsthaft beschäftigen geben hier mindestens ungern Tips, die gegen "best practice" verstoßen.

[martin.schaible]

Wie gesagt möchte ich die Grössenangaben in der CSS-Datei festlegen und nicht im Markup.

[tab]

Falls das in Contao immer noch so ist wie in den "älteren" Versionen wie 4.13, dann könntest du durch Einschalten des Debug-Modus herausfinden, welches Template das Bild ggf ausgibt.
Soviel zu deiner Frage.

Aber auch mich würde interessieren, was dich an der Ausgabe von "width" und "height" eines Bilds stört. Das darf man ja nicht mit Inline-Styles vermischen und es hat eine durchaus wichtige Funktion, weil dadurch dem Browser die Größe des Bilds bereits bekannt ist, bevor es heruntergeladen ist. Wenn es fehlt, wird Lighthouse das jedenfalls anmeckern. Womit man natürlich auch leben kann, wenn es wichtigere Gründe dafür gibt als "Das sieht nicht aus!" Wenn man es weglässt, sollte man dem Browser den korrekten Seitenaufbau mit alternativen Ansätzen erleichtern.

Images without dimensions #
Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect-ratio or similar. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.

[martin.schaible]

Herrje, es wird langsam schräg.

Dies habe ich geschrieben:

Ich würde aber gerne eine eigene CSS-Klasse dazu erstellen

Jetzt werde ich wiederholt belehrt, dass die Höhen- und Breiten-Angabe unverzichtbar ist. Ja klar, aber ich habe nie geschrieben, dass diese entfernt werden.


Danke, ich werde den Debug-Modus anwerfen.

[Spooky]

Prüfe mal ob beim Theme (im Backend) eine Bildgröße für das Logo dabei ist. Dort könntest du die CSS Klasse hinzufügen.

[tab]

Ich würde aber gerne eine eigene CSS-Klasse dazu erstellen, weil ich die "width" und "height"-Angaben im Markup nicht so mag.
ThemeLogo.png

Und wie soll man das anders interpretieren, als dass du die "width" und "height" im Markup entfernen willst? Zumal du gefragt hast, wo das ausgegeben wird. Aber ich stimme dir zu, du hast nie explizit geschrieben, dass du es entfernen willst. Aber wie auch immer, des Menschen Wille ist sein Himmelreich...

[martin.schaible]

Prüfe mal ob beim Theme (im Backend) eine Bildgröße für das Logo dabei ist. Dort könntest du die CSS Klasse hinzufügen.

Ich sehe da ein Feld "CSS-ID/Klasse". Das werde ich ausprobieren.

Danke!

[martin.schaible]

Das hat leider nicht geklappt. Die eingegebene Klasse (Bild, Experteneinstellung) wird dem übergeordneten div-Tag zugeordnet.

[mlweb]

Auch damit kann man das img-Tag ja mit CSS stylen.
Wenn Du das so nicht willst, wirst Du das Template anpassen müssen.

[Spooky]

Das hat leider nicht geklappt. Die eingegebene Klasse (Bild, Experteneinstellung) wird dem übergeordneten div-Tag zugeordnet.

Gemeint war die Bildgrößeneinstellung, nicht beim Bildinhaltselement selbst (falls das ein Bildinhaltselement ist).

[martin.schaible]

Ich bemerke gerade, dass das gekaufte Theme teilweise sehr abenteuerliches CSS beinhaltet. Darum werde ich zuerst mal das Theme gemäss Wünschen anpassen und erst später Details bearbeiten.