Begleitbilder in einem Artikel

[Blaubart]

'Nabend.

Kein reines CSS-Thema, aber ich mußte mich für eine Kategorie entscheiden. ;)

Ich arbeite an einem kleinen CMS für einen Kunden und bin beim derzeit beim Erstellen der Templates für Beiträge, die der Kunde dann selbst schreiben und auf der Seite veröffentlichen kann. Zu jedem Absatz des Beitrags kann optional jeweils ein Begleitbild angegeben werden, welches den Text dann garniert. Dabei bin ich auf folgendes Problem gestoßen:

Der Designer (auch fürs CSS zuständig) möchte gerne ein Markup der folgenden Art für die Begleitbilder haben:

<div class="begleitbild">
    <img src="" title="" alt="" width="" height="" />
    <p>Bildunterschrift</p>
</div>

Damit eine längere Bildunterschrift nicht breiter als das Bild wird, muß dem umschließenden DIV eine feste Breite zugewiesen werden. Allerdings ist die Größe der Bilder nicht festgelegt, d.h. die Breitenangabe müßte dynamisch generiert und als Direktformatierung ins DIV eingefügt werden:

<div class="begleitbild" style="width:100px"> ...

Begeistert bin ich nicht von dieser Lösung, weil auf diese Art wieder Designfragen im Code geklärt werden, der nur die Inhalte liefern soll. Genau der Mischmasch, den ich vermeiden möchte. Mein Vorschlag, auf die variable Bildgröße zu verzichten und eine feste Breite vorzugeben, stößt ebenfalls nicht auf große Gegenliebe.

Hat jemand von euch Vorschläge, wie sich dieses Problem am besten lösen läßt?

[Ingo Turski]

Hi,

<div class="begleitbild" style="width:100px"> ...

Begeistert bin ich nicht von dieser Lösung, weil auf diese Art wieder Designfragen im Code geklärt werden, der nur die Inhalte liefern soll. Genau der Mischmasch, den ich vermeiden möchte. Mein Vorschlag, auf die variable Bildgröße zu verzichten und eine feste Breite vorzugeben, stößt ebenfalls nicht auf große Gegenliebe.

Ich würde
<div class="begleitbild" id="BildXXX">
generieren und im style-Bereich der Seite die Dimensionen sowohl für die divs, als auch die Bilder angeben.

freundliche Grüße
Ingo

[Blaubart]

'Nabend Ingo.

Ich würde
<div class="begleitbild" id="BildXXX">
generieren und im style-Bereich der Seite die Dimensionen sowohl für die divs, als auch die Bilder angeben.

Das verlagert das Problem ja bloß an eine andere Stelle (im Quelltext), ändert aber grundsätzlicht nichts.

Außerdem ist diese Lösung in meinem konkreten Fall leider nicht umsetzbar, da die Beiträge als Modul keinerlei Kenntnis vom Rest des Templates (Gesamtseite) haben, in welches sie eingefügt werden. D.h. sie können auch nichts in andere Bereiche des Dokuments einfügen. Dies zu ändern wäre eine ziemlich tiefer Eingriff ins bestehende System, so daß ich mit der Direktformatierung glaub ich besser beraten wäre.

[Ingo Turski]

Hi,

Das verlagert das Problem ja bloß an eine andere Stelle (im Quelltext), ändert aber grundsätzlicht nichts.

Doch: Verzicht auf unschöne inline-styles.

Außerdem ist diese Lösung in meinem konkreten Fall leider nicht umsetzbar, da die Beiträge als Modul keinerlei Kenntnis vom Rest des Templates (Gesamtseite) haben, in welches sie eingefügt werden. D.h. sie können auch nichts in andere Bereiche des Dokuments einfügen. Dies zu ändern wäre eine ziemlich tiefer Eingriff ins bestehende System, so daß ich mit der Direktformatierung glaub ich besser beraten wäre.

Stimmt; der Aufwand wäre wohl zu hoch.

freundliche Grüße
Ingo

[Felix Riesterer]

Lieber Blaubart,

was spricht eigentlich gegen folgendes Markup?

<p class="begleitbild"><img src="" alt="" /><br />Bildunterschrift</p>

.begleitbild {  
     display: block; /* eigentlich überflüssig */  
     width: 220px;   /* Deine feste Breite (Bildbreite plus Rand) */  
     border: 1px solid transparent; /* möglich, falls mal doch ein Rahmen sichtbar sein sollte */  
     /* float? font-size/-color? text-align? background(-color)? */  
     }  
.begleitbild img {  
     width: 200px;  /* hier kommen jetzt die festen Bilddimensionen */  
     height: 200px;  
     }

Etwas Ähnliches habe ich auf unserer Schulhomepage-Bilderseite benutzt.

Der Designer (auch fürs CSS zuständig) möchte gerne ein Markup der folgenden Art für die Begleitbilder haben:

<div class="begleitbild">
    <img src="" title="" alt="" width="" height="" />
    <p>Bildunterschrift</p>
</div>

Dieses Markup empfinde ich schon wieder als Divitis.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Blaubart]

Hallo Felix.

was spricht eigentlich gegen folgendes Markup?

Außer persönlichem Geschmack vermutlich nicht viel. ;-)
Einige Puristen würden wahrscheinlich noch die Benutzung des BRs zu Designzwecken bemängeln, da du damit _nicht_ bloß einen Zeilenumbruch in Fließtext erzeugst. Selbst wenn die Bild_unter_schrift unterm Bild stehen soll (und nicht etwa daneben), wäre das BR überflüssig, da sich der gleiche Effekt auch mit einem display:block fürs IMG bewirken läßt.

Wenn ich so drüber nachdenke... ja, warum eigentlich nicht?! :-)

Allerdings:

.begleitbild img {
     width: 200px;  /* hier kommen jetzt die festen Bilddimensionen */
     height: 200px;

Das ist genau der Kern des Problems: "Isch 'abe gar keine festen Bilddimensionen".

Etwas ähnliches wie du auf der Schulseite gemacht hast, schwebte mir auch vor, ist für den Designer aber kein Thema. Der möchte einen "Bildkasten" im Artikel, der genauso breit ist wie das Bild, wobei die Dimensionen des Bildes nicht festgeschrieben werden sollen.

Dieses Markup empfinde ich schon wieder als Divitis.

So schlimm finde ich es nicht -- zumal es sich auch nicht um eine Bildersammlung handelt wie z.B. auf deiner Schulseite. Aber trotzdem werde ich das wohl etwas verkürzen (siehe oben), da ein Begleitbild in einem Artikel mit einiger Berechtigung als Absatz interpretiert werden kann. Kürzer ist es außerdem. :-)

[Olaf Schneider]

Hallo Blaubart,

Ich finde inline-Styles für genau solche Problemlösungen legitim. Sie zeigen auch im HTML-Code Sonderfälle an, die nicht einheitlich geregelt sind. Und um solch einen Fall handelt es sich ja.

Vielleicht gäbe es noch eine andere Möglichkeit: Im Sinne eines einheitlichen Designs sieht es unter Umständen nicht gut aus, wenn jedes Bild eine andere Größe hat; vor allem leicht unterschiedliche Größen wirken störend und unprofessionell. Man könnte statt dessen z. B. drei feste Größen definieren und diesen die Klasse decoratorS, decoratorM und decoratorL zuweisen.

Gruß
Olaf

[Blaubart]

Hallo Olaf.

Ich finde inline-Styles für genau solche Problemlösungen legitim. Sie zeigen auch im HTML-Code Sonderfälle an, die nicht einheitlich geregelt sind. Und um solch einen Fall handelt es sich ja.

Ja, Sonderfall definitiv. Denn wenn zu einem späteren Zeitpunkt ein anderes Design für die Seite entworfen wird, welches die Bilder z.B. in einem Kasten fester Größe zentriert, müssen diese Inline-Angaben erstmal aus dem Quelltext gepopelt werden, der mit dem Design gar nichts zu tun hat (oder haben _sollte_). Die gewinnen ja gegen jede andere Stylesheet-Angabe. Nicht gerade das, was ich mir unter der Trennung von Design und Inhalt vorstelle...

Vielleicht sehe ich das bloß zu eng, denn ansonsten halten wir diese Trennung sehr gut durch. :-)

Im Sinne eines einheitlichen Designs sieht es unter Umständen nicht gut aus, wenn jedes Bild eine andere Größe hat; vor allem leicht unterschiedliche Größen wirken störend und unprofessionell.

Ja, das war auch mein Gedanke. Ich empfinde Seiten, auf denen in jedem Artikel ein anderes Bildformat auftaucht, als "unruhig". Hoch- und Querformat oder eben 2-3 feste Größen wären auch eher nach meinem Geschmack.