Thema: 1px Border um MosImages auch ohne Caption möglich

Es müssen ja nicht alle so leiden ....

Die Kurzfassung als Essenz für die Eiligen gibt's im folgenden Beitrag,
für die die es interessiert folgt hier die ausführliche Beschreibung :


Wer gerne eine graue 1 Pixel Border um seine Standard MosImages haben
möchte auch wenn er keine Caption verwenden möchte,
weil dies für Bildmotive die in den Randbereichen hintergrundähnliche Farben
haben und zum ausfransen neigen besser geeignet ist,
kann dies trotzdem erreichen.

Standardmässig vergibt der MosImage Mambot die graue-Border-CSS-Klasse
".mosimage" aber nur wenn er eine Caption (Bilduntertitel) entdeckt.

Wenn man einfach die Border in den Standard MOSImage Control Einstellungen
durch Eingabe von mehr als 0 Pixeln aktiviert hat man leider keine wirkliche
Kontrolle über die Farbe der Border.

Daher ist der erste Schritt eine Kopie der .mosimage Klasse im CSS des Templates
zu erzeugen.
Z.B. :

.custom_image_border {
border: solid 1px #959595;
}

Den {mosimage} Tag packt man im Content HTML einfach in einen Div Container
mit der entsprechenden Klasse.
Z.B. :

<div class="custom_image_border">
{mosimage}
</div>

Und schon hat man ein stylisches Standard MosImage Bild für das man nichts
anderes mehr zuweisen muss als die Bildreihenfolge aus den entsprechenden
Ordnern angebenzugeben. Auch die Bildgrösse wird automatisch aus dem
Zielbildern ausgelesen und bläht den Border Div auf die Bildgrösse auf.


Dies funktioniert wunderbar - im Thunderbird, im Safari - aber leider NICHT
im Internet Explorer !!!


Der Internet Explorer macht aus unerfindlichen Gründen unterhalb des Bildes,
zwischen Bild und Border, einen ca. 2 Pixel weiten Abstand.
Interessant wird es wenn man mehrere dieser Border Divs mit enthaltenem Bild
nebeneinander kopiert - einige der Bilder werden diesen Abstand haben,
andere aber nicht !


Der erste Workaround ist nun der CSS Klasse einen Hintergrund in Farbe der Border
zu verpassen. Dies ändert nicht die Ursache - aber mildert die Symptome denn
Der Abstand fällt nicht mehr so auf wie wenn der Umgebungshintergrund durchscheint.
z.B.

.custom_image_border {
border: solid 1px #959595;
background-color: #959595;
}

Weil dies kein befriedigender Zustand ist habe ich alles an CSS Zuweisungen für die
Div Klasse ausprobiert aber nichts gefunden was den IE in seine Schranken weist.
Erst letzte Versuche mit den Zuweisungen im eigentlichen Image Tag zeigten dass
auch der IE den Div korrekt skaliert sobald eine (irgendeine) "align"-Zuweisung
besteht.
Z.B. :

<div class="custom_image_border">
<img src="../BeispielImage.jpg" alt="" align="left" border="0" hspace="0" vspace="0">
</div>

funktioniert auf einmal wie erwartet auch im IE !


Nur gibt der MosImage Mambot auch einfach so keine "align"-Zuweisung bei der
Bildausgabe heraus. Dies wurde im MosImage so definiert weil der Mambot davon
ausgeht dass man das "align" explizit für jedes Bild angibt wenn man dies wünscht.

Da ich den Sinn des MosImage Mambots jedoch darin sehe dass ich bei Bildern nichts
mehr einstellen muss sondern nur die Bildliste angebe, selbst die Mosimage Tags
bereits in meinem Content-Template zwischen Blindtexten vorbereitet habe,
will ich nicht bei jedem Bild das "align" aktivieren.
Besonders weil man so gerne das "Apply" vergisst und weil es ausserdem wenig
Sinn macht wenn man die Position sowieso über das Div Regeln will.


Daher habe ich versucht den Mambot zu verändern :
In Zeile 104-107 steht z.B.

// $attrib[1] alignment
if ( !isset($attrib[1]) || !$attrib[1] ) {
$attrib[1] = ' ';
}

Damit wird das alignment nicht definiert solange keine Caption vorhanden ist.
Wenn man diesen Wert definiert wird auch ohne Caption der entsprechende
Wert für "align" als Standard im Image Tag ausgegeben.
Z.B. :

// $attrib[1] alignment
if ( !isset($attrib[1]) || !$attrib[1] ) {
$attrib[1] = 'left';
}

Damit werden nun auch im IE umgebende Border Divs korrekt angezeigt ohne
dass man weitere Einstellungen vornehmen muss. Trotzdem behält man die
volle Kontrolle und kann alle Gestaltungsänderungen über das CSS vornehmen.




Zu beachten ist natürlich dass von nun an durch den Standardeintrag im Mambot
ohne Zutun bei jedem Bild der vergebene "align" Eintrag zugewiesen wird - ob man
will oder nicht.
Ist aber kein Problem - erstens sind Bilder ohne Positionsbestimmung in meinen
Augen fragwürdig - und zweitens überschreibt eine bewusste Zuweisung über die
MOSImage Control Einstellungen im Content Editor das Standard "align".



Von nun an viel Spass mit den kontrollierten Rahmen .....


Jetzt folgt die Kurzanweisung :

Wer gerne eine graue 1 Pixel Border um seine Standard MosImages haben
möchte auch wenn er keine Caption verwenden möchte.

Kopie der .mosimage Klasse im CSS des Templates
zu erzeugen z.B. :

.custom_image_border {
border: solid 1px #Hexwert der gewünschten Farbe;
background-color: #Hexwert der gewünschten Farbe;
}
/** background-color falls doch etwas schief läuft **/

Den {mosimage} Tag packt man im Content HTML einfach in einen Div Container
mit der entsprechenden Klasse z.B. :

<div class="custom_image_border">
{mosimage}
</div>

MosImage Mambot editieren :

In Zeile 104-107 steht z.B.

// $attrib[1] alignment
if ( !isset($attrib[1]) || !$attrib[1] ) {
$attrib[1] = ' ';
}

Verändern zu irgendeiner "align" Zuweisung z.B::

// $attrib[1] alignment
if ( !isset($attrib[1]) || !$attrib[1] ) {
$attrib[1] = 'left';
}

Zu beachten :
Von nun an wird durch den Standardeintrag im Mambot ohne Zutun bei jedem Bild
der vergebene "align" Eintrag zugewiesen wird
Eine bewusste Zuweisung über die MOSImage Control Einstellungen im Content Editor
überschreibt jedoch das Standard "align"


Von nun an viel Spass mit den kontrollierten Rahmen .....