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

Lightbox2 + IMCE CCK Image

Eingetragen von jeka (1)
am 23.03.2009 - 09: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

  • Canvas Palette: Eine fertige Komponentenbibliothek für Drupal Canvas
  • Hilfe zu Updates oder Composer
  • Vergleich Drupal und Contao
  • [geloest] Blocks in Bootstrap nebeneinander darstellen und nicht untereinander
  • DrupalCamp Frankfurt 27-28 November 2026
  • Bitte mein Bentzerkonto löschen
  • Beim Aufruf einiger Inhalte erhalte ich folgende Fehlermeldung
  • Neuinstallation: vermutlich ein rewrite-Problem
  • Drupal CMS installieren
  • [erledigt]MP3 in Drupal 10 einbinden
  • (gelöst)Drupal 11 installieren
  • Titel ausblenden
Weiter

Neue Kommentare

  • Danke ich werde mir die
    vor 3 Tagen 15 Stunden
  • Vielen Dank für Ihren
    vor 6 Tagen 9 Stunden
  • Composer ist sehr ratsam
    vor 1 Woche 1 Tag
  • Vielen Dank für den
    vor 1 Woche 3 Tagen
  • Die alten CMS Vergleiche von contentmanager.de
    vor 1 Woche 4 Tagen
  • Gut gemacht
    vor 1 Woche 4 Tagen
  • Layout Builder etc. z.B. für Landing Pages
    vor 1 Woche 4 Tagen
  • Links
    vor 1 Woche 6 Tagen
  • Moin,wow, sehr gutes
    vor 2 Wochen 22 Stunden
  • Dass ist eine spannende
    vor 2 Wochen 1 Tag

Statistik

Beiträge im Forum: 250316
Registrierte User: 20562

Neue User:

  • rofilm
  • Cruzorerm
  • Plandkeews

» Alle User anzeigen

User nach Punkten sortiert:
wla9466
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3857
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