Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Tipps & Tricks ›

Bilder im Content durch festgelegten Style ersetzen

Eingetragen von Samson1964 (51)
am 21.07.2012 - 09:19 Uhr in
  • Tipps & Tricks
  • Drupal 7.x

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] = 200

Wenn 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.

‹ PHP 5.3 - Wie aktualisiert man Drupal? Xampp 1.7.1 und Drupal 6.13 DE ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Probleme mit der darstellun der ogg:image Tags.
  • Hi!
  • Abhängigkeiten zweier oder mehrerer Inhaltstypen
  • Lokale Entwicklungsumgebung auf Windows
  • Drupalcenter tot?
  • Drupal-Forks und ihre Schwächen/Stärken
  • Was kann ich gegen ständige Blutergüsse tun?
  • Mir gefällt die Drupal Symfony und deren Composer
  • Mir ist da was aufgefallen ;)
  • Matomo Installation
  • Verständnisfrage private_files in Drupal
  • [gelöst] Drupal 7 Forum Beitrag mit Bilder einstellen
Weiter

Neue Kommentare

  • Kontextfilter und Relationen sind der richtige Ansatz
    vor 15 Stunden 19 Minuten
  • Zusatzfragen
    vor 1 Tag 16 Stunden
  • DDEV verwaltet Container, sowohl Docker als auch andere
    vor 1 Tag 16 Stunden
  • Entwicklungsumgebung ist nicht nur Server
    vor 1 Tag 16 Stunden
  • Danke
    vor 2 Tagen 23 Stunden
  • [gelöst] Danke!
    vor 2 Tagen 23 Stunden
  • Ja natürlich tun wir dass.
    vor 3 Tagen 18 Stunden
  • Drupal.de verweist aufs Drupal Center
    vor 3 Tagen 19 Stunden
  • Und falls du auf grüne
    vor 3 Tagen 20 Stunden
  • Danke euch beiden, das bringt
    vor 3 Tagen 20 Stunden

Statistik

Beiträge im Forum: 250047
Registrierte User: 20363

Neue User:

  • LilliNELP
  • Wavermype
  • Shify

» Alle User anzeigen

User nach Punkten sortiert:
wla9456
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3855
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 11 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association