Lightbox2 + IMCE CCK Image
am 23.03.2009 - 08:45 Uhr in
Hallo,
wir arbeiten an der Erstellungen einer Homepage.Die Seite soll eine sehr umfang-
reiche Sammlung an allgemeinen Informationen, Fakten und Bildern beinhalten.
Als wir uns mit der Frage nach geeigneten Modulen für die Darstellung von
Bildern und zur Bildverwaltung beschäftigt haben, kamen wir zu dem Schluß, das es
bisher kein einzelnes Modul gibt, das unseren Anforderungen entspricht.
Nach vielen Tests und Versuchen haben wir eine Lösung gefunden, von der wir glauben,
das sie auch für andere User sehr nützlich sein könnte. Desshalb möchten wir unsere
Lösung hier vorstellen und hoffen auf Feedback.
Unsere Anforderungen waren:
1.)
In einem 3-spaltigen Layout, das auf dem "Garland-Theme" basiert, sollte zu jedem
Text, der in der mittleren Hauptspalte dargestellt wird, in der rechten Seiten-
leiste eine Reihe von Vorschaubildern (Thumbnails mit der Auflösung 180 x 180 px)
dargestellt werden, die durch anklicken in einem Bildfenster in Originalgröße zu
sehen sein sollten. Dazu sollte jeweils ein Vorschaubild (Preview mit der Auflösung
500 x 500 px) ober- und unterhalb des Textes stehen, welches durch Anklicken ebenfalls
in Originalgröße angezeigt werden soll.
2.)
Da die Inhalte der Seite von verschiedenen "Redakteuren" gepflegt werden, sollte
eine einheitliche, leicht zu bedienende Bildverwaltung geschaffen werden, die
auch "fachfremde" User sofort verstehen.
Zur Erfüllung dieser Anforderungen werden 4 Module benötigt: Lightbox2, IMCE,
IMCE CCK Image und Image Cache. Lightbox2 ermöglicht dabei die Darstellung des
Originalbildes in voller Größe in einem über dem eigentlichen Inhalt "schwebenden"
Fenster. IMCE und IMCE CCK Image ermöglichen das Einrichten von Bildfeldern in der
rechten Seitenleiste sowie eine einfache Verwaltung und Bedinung durch den IMCE-Browser
beim Bild-Upload. IMCE nuzt dabei das Modul Image Cache.
Die einzelnen Anforderungen wären damit gelöst, das Problem bestand aber darin,
das IMCE nicht mit Lightbox2 zusammenarbeitet, d.h. man kann zwar wie in unserem
Fall Vorschaubilder auf der rechten Seitenleiste oder über bzw. unter dem Text
darstellen, diese jedoch nicht durch Anklicken in einem Lightboxfenster anzeigen.
Was wir also brauchten, war ein "Lightboxtrigger", der in IMCE integriert ist.
Dazu muss man eine Datei des Moduls IMCE CCK Image, welches für die Erstellung von
Bildfeldern verwendet wird, leicht modifizieren. Diese Datei befindet sich im
Modulverzeichnis der Seite (/sites/all/modules/imceimage)und heisst "imceimage.module".
Diese Datei also mit einem Editor öffnen und folgenden Abschnitt suchen:
function theme_imceimage_image($s, $w='', $h='', $a='', $id='') {
$s = 'src="'. $s .'" ';
$a = 'alt="'. $a .'" ';
$id = !empty($id)? 'id="'. $id .'" ':'';
$w = !empty($w)? 'width="'. $w .'" ':'';
$h = !empty($h)? 'height="'. $h .'" ':'';
return '<img '. $s . $a . $w . $h . $id .'/>';
}
Unter der Annahme, dass IMCE Prefixe und Suffixe etwa so "thumb_", "_thumb",
"preview_", "_preview" aussehen, diese Zeilen durch folgenden Code ersetzen:
function theme_imceimage_image($s, $w='', $h='', $a='', $id='') {
$thpr = array("thumb_", "_thumb", "preview_", "_preview");
$bigimage = str_replace($thpr, "", $s);
$s = 'src="'. $s .'" ';
$a = 'alt="'. $a .'" ';
$id = !empty($id)? 'id="'. $id .'" ':'';
$w = !empty($w)? 'width="'. $w .'" ':'';
$h = !empty($h)? 'height="'. $h .'" ':'';
$c = 'rel="lightbox"';
return '<a href='.$bigimage.' '.$c.'><img '. $s . $a . $w . $h . $id .'></a>';
}
Diese Änderungen ermöglichen eine Zusammenarbeit der Module "IMCE Image" und "Lightbox2",
die vorher nicht möglich war. Es wurden drei zusätzliche Variablen in den Code
eingefügt:
1. $c diese Variable beinhaltet den "Lightboxtrigger";
2. $bigimage diese Variable wird mit dem Pfad zur Original-Bild-Datei gefüllt;
3. Die Hilfsvariable $thpr, welche die Vor- bzw. Nachsilben laut IMCE Einstellungen,
in unserem Fall "thumb_" und "preview_", beinhaltet.
Zuletzt wurde noch die Ausgabe der Funktion durch die Zeile:
return '<a href='.$bigimage.' '.$c.'><img '. $s . $a . $w . $h . $id .'></a>'
geändert. Dadurch wird die Preview bzw. Thumbnail auf die Originaldatei verlinkt
und mit dem Lightboxtrigger versehen.
Nun muss man lediglich auf der Seite selbst noch die nötigen Einstellungen für
IMCE vornehmen, die Felder einrichten, die Blöcke auf der rechter Seite aktivieren
und die nötigen Rechte vergeben.
- Anmelden oder Registrieren um Kommentare zu schreiben
Neue Kommentare
vor 7 Stunden 15 Minuten
vor 11 Stunden 5 Minuten
vor 1 Tag 17 Stunden
vor 1 Tag 17 Stunden
vor 6 Tagen 10 Stunden
vor 6 Tagen 13 Stunden
vor 6 Tagen 13 Stunden
vor 6 Tagen 13 Stunden
vor 1 Woche 10 Stunden
vor 1 Woche 12 Stunden