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

Lightbox2 + IMCE CCK Image

Eingetragen von jeka (1)
am 23.03.2009 - 08:45 Uhr in
  • Tipps & Tricks
  • Drupal 6.x

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.

‹ ein bischen mehr Speed! Erste Schritte mit Zen ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Wie SQL_BIG_SELECTS=1 setzen?
  • Absichern Von Drupal- und Serverinstallation
  • Danland: Standard-Startseite formatieren
  • Views Accordion - Header Elemente nebeneinander
  • Heartbeat und Facebook Style Status
  • Marinelli 3, Admin-Layer
  • [gelöst] Drupal7.10 Fehlermeldungen ohne Site-Änderungen
  • Blockregionen per CCK Feld ausblenden
  • [erledigt] drupal 7 - read more ausblenden
  • Drupal7 für eine Produktvergleich Seite
  • #ajax Funktionalität in einem Field Widget
  • Image: Bildupload erst beim Speichern des Nodes
Weiter

Neue Kommentare

  • Du mußt die page.tpl.php
    vor 1 Stunde 7 Minuten
  • Dann mußt Du eben ein bißchen
    vor 1 Stunde 10 Minuten
  • Hallo und Danke für Eure
    vor 1 Stunde 11 Minuten
  • Ok... ich habe mir die
    vor 3 Stunden 6 Minuten
  • Dafür ist das Modul "Overlay"
    vor 5 Stunden 33 Minuten
  • sorry, der 2te Link war
    vor 5 Stunden 35 Minuten
  • screenshots
    vor 5 Stunden 37 Minuten
  • Danke!
    vor 9 Stunden 4 Minuten
  • in die template.php im
    vor 10 Stunden 10 Minuten
  • da es bisher keine etablierte
    vor 10 Stunden 20 Minuten

Statistik

Beiträge im Forum: 173965
Registrierte User: 15480

Neue User:

  • Neoskop
  • habicht09
  • Gruenkohl

» Alle User anzeigen

User nach Punkten sortiert:
stBorchert5516
quiptime4713
Tobias Bähr3874
wla3807
md3777
bv3700
Thoor3678
Alexander Langer3282
dereine2635
Exterior2571
» User nach Punkten
Zur Zeit sind 6 User und 36 Gäste online.

Benutzer online

  • firstlevel
  • kahta
  • Miguelito
  • StevenB
  • tfranz
  • Xeto

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Showroom
  • » Forum
  • » Drupalchannel
  • » Ü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
  • Bücherecke

Quicklinks III

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

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed Drupal Podcast
  • 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