Feature Request: Bilder mit (seitlicher) Beschriftung

[sklages]

Es gestaltet sich doch ziemlich schwierig, Bilder mit einer Beschriftung zu versehen, sodass es "zusammengehörig" aussieht und das Alignment stimmt.

Eine typische Anordnung wäre: links das Bild, rechts davon beschreibender Text, formatierbar (MD wäre ausreichend).

Würde vermutlich ziemlich häufig gebraucht werden:

• Personen/Ansprechpartner und deren Aufgabenbereich und/oder Kontaktdaten
• Geräte, deren Verwendung, Standort und Verfügbarkeit
• für Software Doku mit GUI

... und vermutlich noch etliche weitere Szenarios.

Das (vertikal) größere Element bestimmt die Gesamthöhe (Bild oder Textinhalt). Optional wird der Text, der über die Bildhöhe hinausgeht gedimmt und ist bei Click sichtbar gemacht.

[ballaschk]

Der typischere Fall einer einfachen Bildunterschrift direkt unter dem Bild fehlt ebenfalls und wäre eine sinnvolle Ergänzung.

[ballaschk]

Hm, dieses Issue hat mit meiner letzten Artikelidee "Fotos von Mitarbeitern und ihre Selbstbeschreibung daneben" Leider wieder Aktualität bekommen.

https://intranet.molgen.mpg.de/de/news/meet-the-new-staff-of-september-20/

[donald]

Das (vertikal) größere Element bestimmt die Gesamthöhe (Bild oder Textinhalt). Optional wird der Text, der über die Bildhöhe hinausgeht gedimmt und ist bei Click sichtbar gemacht.

@sklages: Ist das nicht nicht so, weii ich ein rich-text field nehme und ein Bild mit "left aligned"? Im Rich Text Editor wird der Text zwar unter dem Bild angezeigt, aber im Preview stimmts dann. Also genau, wie es bei der Beispielseite https://intranet.molgen.mpg.de/de/news/meet-the-new-staff-of-september-20/ von @ballaschk ist ?

@ballaschk: Fehlt die nur die Bildunterschrift, oder ist am Style von https://intranet.molgen.mpg.de/de/news/meet-the-new-staff-of-september-20/ noch was vernkehrt?

[ballaschk]

Ich habe inzwischen herausgefunden, dass man durch h1-h3-Überschriften verhindern kann/muss, dass Text und Bilder weiter umeinanderfließen. Das Nebeneinander von Text und Bild klappt, wenn man zwischen die jeweiligen Blöcke eine (große) Überschrift setzt. Wenn es noch etwas gäbe, mit denen man dieses Verhalten auch ohne Überschriften erzwingen könnte, wäre das noch besser. Aber so finde ich es in Ordnung, man muss es eben nur wissen ...

[donald]

Ich glaube, jemand muss mir ein Bild machen :-) Wenn ich bei dem Beispiel die Überschriften rausnheme ist der Text doch auch neben dem Bild?

[ballaschk]

Bild und korrespondierender Text sollen aber immer nebeneinander bleiben. Ohne Überschriften fließt der Text u.U. dynamisch neben andere Bilder.

So wie auf dem Screenshot ist es richtig. Wenn ich die Überschriften rausnehme, dann hängt der Text zusammengeklatscht in der Ecke und fließt frei um die Bilder.

[donald]

Okay, jetzt habe ich das Problem wohl verstanden. Das Image ist left-aligned oder right-aligned (floating), so dass es nur seine natürliche Breite einnimmt und der folgende Inhalt kommt in den freien Raum neben das Image. Das Problem besteht darin, dass man nur bestimmten Text neben dem Bild haben möchte, nämlich den, der zum Bild gehört, derzeit aber aller folgender Inhalt in diesen Raum fließen kann.

Eine (potentiell leere) Überschrift kann das beenden. Das ist allerdings ein eher zufälliger Seiteneffekt des custom stylesheets, weil die Überschriften da display: inline-block bekommen, warum weiß ich auch noch nicht. Ich bin auch nicht 100% sicher, wie definiert das Zusammenspiel von float und inline-block in dieser Beziehung ist und ob es nicht eventuell Browser geben könnte, die auch die Überschrift neben das Image fließen lassen würden.

Typischerweise beendet man das floaten mit einer clear: both property. Tatsächlich kann man als alternativen Workaround im Streamfield eine Markdown-Block folgen lassen (wo man ja direkt HTML schreiben kann) und da nur <div style="clear:both"></div> reinschreiben. Aber es ist eigentlich gerade nicht gewünscht bei einem CMS, dass die Seiteneditoren Style-Anweisungen schreiben. Ansonsten könnte ich bei dem Richt-Text Editor auch "code" enablen, dann kann man da auch direkt html reinschreiben.

Die Frage ist jetzt, wie man das mit der besten Bedienbarkeit und mit möglich wenig Aufwand löst. Letztendlich muss der Seiteneditor ja irgendwie kenntlich machen, welcher Content noch zum Bild und dabenen gehört und welcher nicht mehr.

• Den Rich Text Editor erweitern, damit man einen "Trenner" einfügen kann?
• Den "Nebentext" als Attribut bei den Image-Properties (wo man auch "Aligned Left" anklicken kann) aufnehmen? Kann evtl technisch komplex werden und bestehende Seiten durcheinanderbringen, weil der Folgetext ja nicht mehr wir jetzt neben das Image käme.
• Einen neuen Streamfield-Block "Image mit Nebentext" ?
• Jeden Streamfield-Block mit clear: both beenden, so das niemals Text von einem Streamfield-Block neben float-elemente des vorherigen fließt?

Vielleicht gefällt mit das erste am besten (falls es einfach machbar ist). Oder das letzte. Weitere Ideen?

[ballaschk]

Mir gefällt die letzte Option am besten, weil sie keine neue Komplexität einführt und weil sie einfach zu verstehen ist. Auf der Editor-Seite existiert ja eine Abtrennung durch die Streamfield-Blöcke bereits. (Tatsächlich war das auch das erste, was ich ausprobiert hatte, um den gewünschten Effekt zu erzielen.) Womöglich ist sie außerdem noch einfach zu implementieren, dann wären wir doch alle happy ;)

Kann natürlich sein, dass dann anderswo etwas in der Darstellung bestehender Seiten kaputt geht ... aber damit könnte ich leben (bzw. wäre das leicht zu reparieren).

[donald]

Habs dann so gemacht (ist schon aktiv). Ich glaube kaum, dass das bestehende Seiten groß beeinflusst.