Theme Photo: Darstellung der Fotos in der Artikelübersicht

[MarioH]

Hallo,

ich habe mal eine Frage zum Photo-Theme. In der Artikelübersicht werden die Bilder nicht an den quadratischen "Platzhalter" angepasst, wodurch bei den meisten Bildern (die meisten sind ja rechteckig) so ein unschöner Balken unter dem Bild erscheint. Das ist auch im Demo-Blog so. (https://onli.columba.uberspace.de/s9y/)
Ich bin mir nicht sicher, aber war das nicht mal anders (siehe auch den Screenshot in Onlis Blogbeitrag zum Theme: https://www.onli-blogging.de/index.php? ... photo.html)

Ich habe in Firefox und Chrome geschaut, sieht bei beiden gleich aus.

Gruß
Mario

[yellowled]

In der Artikelübersicht werden die Bilder nicht an den quadratischen "Platzhalter" angepasst, wodurch bei den meisten Bildern (die meisten sind ja rechteckig) so ein unschöner Balken unter dem Bild erscheint.

Der „Platzhalter“ (also das Container-Element) ist nicht immer quadaratisch. Es gibt eine max-width und min-height von je 400px, aber für Browser, die es unterstützen, wird die max-width per calc() berechnet. Das führt nun dazu, dass jede Box mindestens 400px hoch, nicht aber unbedingt 400px breit ist – sie kann schmaler oder breiter sein. Der „unschöne Balken“ entsteht durch die min-height; ich weiß nicht, ob das neu in Photo ist.

Das Problem ist: Setzt man diese min-height CSS-seitig nicht, „funktioniert“ dieses Layout nur, wenn alle Fotos die gleiche Höhe haben. Gleichzeitig möchte man unbedingt vermeiden, dass das Seitenverhältnis der Bilder per CSS verzerrt wird.

YL

[MarioH]

Das mit den 400px Mindesthöhe sieht vor allem auf einem Smartphone dann etwas merkwürdig aus.

Wenn ich das auf 0px setze, habe ich den Effekt, dass die Bilder, wenn sie unterschiedlich hoch sind, nicht genau in der selben Höhe anfangen, also nur am unteren Rand quasi "bündig" zueinander sind. Richtig?

[yellowled]

Das mit den 400px Mindesthöhe sieht vor allem auf einem Smartphone dann etwas merkwürdig aus.

Stimmt. Könnte man „so halb“ beheben, indem man eben die Mindesthöhe per @media erst am einer bestimmten Bildschirmbreite anwendet. Andererseits kann man eben auch diskutieren, wie sinnvoll es eigentlich ist, das Theme eines Fotoblogs für kleine Smartphonebildschirme zu optimieren.

Wenn ich das auf 0px setze, habe ich den Effekt, dass die Bilder, wenn sie unterschiedlich hoch sind, nicht genau in der selben Höhe anfangen, also nur am unteren Rand quasi "bündig" zueinander sind. Richtig?

So sieht's zumindest live in den Chrome Devtools dann aus, ja.

Idealerweise möchte man für meinen Geschmack einfach darauf achten, dass die Bildformate eben gleich hoch sein. Das Quadratformat auf Instagram ist halt kein reiner Zufall.

Diese Bildergeschichte ist tricky, das Thema hatten wir ja auch im 2.0-Backend z.B. für Mediendatenbank und Themes schon am Wickel. Es gibt ein paar CSS-Tricksereien, die aber alle entweder unschön oder noch schlecht unterstützt sind.

YL

[onli]

Die derzeitige Lösung ist ein Kompromiss. YL hat es ja schon ein bisschen erklärt… Ich habe eine Lösung gesucht, die mit unterschiedlich großen Bildern zurechtkommt ohne sie zu verzerren. Entweder also ein schwarzer Balken, oder mit mir nicht geläufigen CSS Tricks nur einen Ausschnitt der Bilder zeigen. Auf dem Screenshot passt es wohl wegen des passenden/gleichen Formats der Beispielbilder.

Auf Smartphones sieht das doof aus, weil die Bilder nicht breit genug werden?

Abgesehen davon würde ich empfehlen, das CSS so zu lassen und die Bilder vor dem Upload zurechzuschneiden.

Ich andere aber natürlich gerne das CSS, wenn man die bestehende Lösung weiter verbessern oder durch eine wirklich bessere Lösung ersetzen kann.

[yellowled]

oder mit mir nicht geläufigen CSS Tricks nur einen Ausschnitt der Bilder zeigen

Davon würde ich aber auch dringlichst abraten. (Ich nehme mal an, Du meinst beschneiden mit overflow: hidden; und festen Dimensionen auf dem Container.)

Zum einen gibt es kaum Möglichkeiten, diese Ausschnitte festzulegen, d.h. man hätte sehr oft einen Ausschnitt, der nicht die bildwichtigen Anteile zeigt. Das ist für ein Foto-Theme natürlich inbesondere doof – gleichzeitig finde ich übrigens aber auch, dass man dem Betreiber eines Foto-Blogs zumuten darf, sich an ein bestimmtes Bildformat zu halten. Einfacher wäre natürlich, wenn das Theme entsprechende Thumbnails (automagisch) erstellt, aber dann haben wir wieder das Problem des potenziell falschen Bildausschnitts.

Zum anderen kann dieses „Beschneiden per CSS“ zu merkwürdiger Bedienung (inbesondere auf Touch) und lustigen CSS-Problemchen führen, weil man halt CSS zweckentfremdet. Die Erfahrung sagt, dass das keine so gute Idee ist.

YL

[MarioH]

Hallo.

Auf Smartphones sieht das doof aus, weil die Bilder nicht breit genug werden?

Je schmaler der Bildschirm wird, um so mehr zieht die Mindesthöhe von 400px den dunklen Balken sehr lang nach unten:

https://hommel-net.de/owncloud/index.ph ... B0317X6ZvC

Die derzeitige Lösung ist ein Kompromiss. YL hat es ja schon ein bisschen erklärt… Ich habe eine Lösung gesucht, die mit unterschiedlich großen Bildern zurechtkommt ohne sie zu verzerren.

Inwieweit würde die Mindesthöhe das Verzerren von Bildern verhindern? Bei sehr breiten Bildschirmen/Auflösungen?

– gleichzeitig finde ich übrigens aber auch, dass man dem Betreiber eines Foto-Blogs zumuten darf, sich an ein bestimmtes Bildformat zu halten.

Das würde ich für meinen Anwendungsfall auch tun. Eine Anpassung der Mindesthöhe auf 0px habe ich über die user.css vorgenommen. Sind da Fälle denkbar, in denen eine Verzerrung der Bilder zu befürchten ist, wenn die Bilder alle eine (nahezu) identische Größe haben?

Gruß
Mario

[yellowled]

Je schmaler der Bildschirm wird, um so mehr zieht die Mindesthöhe von 400px den dunklen Balken sehr lang nach unten:

Ist ja logisch: Es gibt einen schwarz hinterlegten Container, der bei variabler Breite immer 400px hoch ist.

Sind da Fälle denkbar, in denen eine Verzerrung der Bilder zu befürchten ist, wenn die Bilder alle eine (nahezu) identische Größe haben?

Wäre mir nicht bewusst. Die Grafiken haben ja zudem das CSS für responsive img-Elemente, das sollte sich eigentlich darum kümmern, dass das Seitenverhältnis nicht verzerrt. Der „schwarze Balken“ tritt ja nur dadurch auf, dass unterschiedlich große Bilder in gleich großen Containern sitzen.

YL