Bilder im Content durch festgelegten Style ersetzen
Eingetragen von Samson1964 (51)am 21.07.2012 - 09:19 Uhr in
Bisher war ich es von anderen CMS gewohnt, Bilder nicht im WYSIWYG-Modus sondern über Platzhalter einzubinden. Die Platzhalter wurden dann erst später vom Parser durch den entsprechenden HTML-Code ersetzt. Dadurch blieb die volle Kontrolle über das Layout erhalten.
Bei Drupal habe ich bis jetzt vergeblich nach so einer Funktion gesucht. Benutzer können hier Bilder beliebiger Größe einfügen (HTML-Code), die dann im schlimmsten Fall das Layout kaputt machen. Verwirrend sind dabei auch die Bildstile: Fügt der Benutzer eine der möglichen Alternativgrößen ein, steht meistens das Originalbild später nicht zur Verfügung, da ja nur die Alternativgröße angezeigt wird.
Bei meiner Lösung ändert sich für den Benutzer im Backend zwar nichts (außer das ich alle Bildstile entfernt habe, um den Benutzer nicht zu verunsichern), aber dafür paßt der fertige Content im Frontend immer zu meinem Layout. In templates.php habe ich dazu folgenden Code eingefügt:
function themename_preprocess_node(&$vars) {
if($vars["content"]["field_body"]) {
$dom = new DOMDocument;
// Haupttext laden
$input = $vars["content"]["field_body"][0]["#markup"];
// Alle img-Tags suchen
preg_match_all('/<img.+src="(.+)".*>/isU',$input,$matches);
if($matches) {
// Gefundene Tags in die Attribute zerlegen
foreach($matches[0] as $treffer) {
$dom->loadHTML($treffer);
$imagetag = $dom->getElementsByTagName("img");
foreach($imagetag as $key => $image) {
$src = $image->getAttribute("src");
$width = $image->getAttribute("width");
$height = $image->getAttribute("height");
$alt = $image->getAttribute("alt");
$style = str_replace(" ","",$image->getAttribute("style"));
$title = $image->getAttribute("title");
// Neues img-Tag bauen
$neu_imagetag = baue_bildlink($src,$style,$alt,$title);
$vars["content"]["field_body"][0]["#markup"] = str_ireplace($treffer,$neu_imagetag,$vars["content"]["field_body"][0]["#markup"]);
}
}
}
}
}
function baue_bildlink($src,$style,$alt,$title) {
global $theme_info; // Theme-Variablen verfügbar machen
global $is_front;
$bildbreite_halb = $theme_info->info["settings"]["bildbreite_halb"];
$bildbreite_voll = $theme_info->info["settings"]["bildbreite_voll"];
$bildbreite_startseite = $theme_info->info["settings"]["bildbreite_startseite"];
if($style == "float:left;") {
$class = "float-left";
if($is_front) $breite = $bildbreite_startseite;
else $breite = $bildbreite_halb;
}
elseif($style == "float:right;") {
$class = "float-right";
if($is_front) $breite = $bildbreite_startseite;
else $breite = $bildbreite_halb;
}
else {
$class = "float-center";
$breite = $bildbreite_voll;
}
if($alt && $title) {
$text = "<br /><label>$alt <span>($title)</span></label>";
}
elseif($alt) {
$text = "<br /><label>$alt</label>";
}
elseif($title) {
$text = "<br /><label><span>$title</span></label>";
}
else {
$text = "";
}
return "<div class=\"$class bildrahmen\" style=\"width:".$breite."px\"><a href=\"$src\" rel=\"lightbox\" class=\"lightbox-bild\" title=\"$title\"><img src=\"/php/thumbs/timthumb.php?src=$src&w=$breite\" alt=\"$alt\" /></a>$text</div>";
}In der oberen Funktion wird das Feld field_body nach img-Tags durchsucht. Für jedes Tag werden danach die Attribute ermittelt und an die Funktion baue_bildlinks übergeben. Diese Funktion gibt den neuen HTML-Code zurück, der dann anstelle des alten img-Tags in field_body eingebaut wird. Der neue HTML-Code macht in meinem Beispiel Folgendes: Rahmen um das Bild setzen, darin das Bild und darunter der Bildtext. Das Bild wird von Timthumb auf eine voreingestellte Größe verkleinert. Das so erstellte (Vorschau-)Bild wird mit dem Originalbild verlinkt und in einer Lightbox angezeigt.
Für die verschiedenen Bildbreiten habe ich in der Info-Datei des Themes folgende Werte hinzugefügt:
settings[bildbreite_halb] = 260
settings[bildbreite_voll] = 590
settings[bildbreite_startseite] = 200Wenn der Benutzer sein Bild links oder rechts ausrichtet, wird settings[bildbreite_halb] oder settings[bildbreite_startseite] benutzt, ansonsten settings[bildbreite_voll].
Der Vollständigkeit halber noch das CSS:
.float-left {
float: left;
margin-right: 9px;
margin-bottom: 9px;
}
.float-right {
float: right;
margin-left: 9px;
margin-bottom: 9px;
}
.float-center {
text-align: center;
margin-right: auto;
margin-left: auto;
margin-bottom: 9px;
}
.bildrahmen {
border-top: 1px solid #BCBCBC;
border-right: 1px solid #BCBCBC;
border-left: 1px solid #BCBCBC;
border-bottom: 1px solid #BCBCBC;
background-color: #ffffff;
}
.bildrahmen label {
display: block;
padding: 5px;
color: #000080;
font-weight: bold;
font-size: 10px;
text-align: left;
}
.bildrahmen label span {
color: #4B4B4B;
font-weight: normal;
}Mein ganzer Code ist sicher noch nicht ausgereift. Außerdem sind Erweiterungen denkbar. Zum Beispiel könnte bei Vorhandensein eines bestimmten Attributs im img-Tag die Ersetzen-Funktion abgeschaltet werden. Damit hätte man als Benutzer wieder die volle Kontrolle - müßte aber auf Bildtexte unterhalb der Bilder u.U. verzichten. Und es würde auch nicht mehr zum Gesamtlayout passen.
- Anmelden oder Registrieren um Kommentare zu schreiben
Neue Kommentare
vor 15 Stunden 19 Minuten
vor 1 Tag 16 Stunden
vor 1 Tag 16 Stunden
vor 1 Tag 16 Stunden
vor 2 Tagen 23 Stunden
vor 2 Tagen 23 Stunden
vor 3 Tagen 18 Stunden
vor 3 Tagen 19 Stunden
vor 3 Tagen 20 Stunden
vor 3 Tagen 20 Stunden