Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Benutzerhandbuch › Fortgeschrittene › Tutorials & How To's - Tipps & Tricks ›

Drupal 6 - Imagefield mit Imagecache und Colorbox

Eingetragen von Micha1111 (290) am 24.07.2010 - 19:32 Uhr in
  • Drupal 6.x

Ziel dieses Tutorials soll sein, dem Inhaltstypen Artikel (story) ein Bildfeld hinzuzufügen, dass die Anzeige eines vorangestellten Bildes zu jedem Artikel ermöglicht. Dabei soll das Bild im Teaser als Vorschaubild (also relativ klein) und in der Vollartikelansicht (nach einem Klick auf „weiterlesen“) in einem etwas größeren Format dargestellt werden. Zusätzlich soll man das Bild im Teaser und in der Vollansicht anklicken können, um das Bild dann in einer Lightbox in Originalgröße angezeigt zu bekommen. Das Bild kann vom Artikelschreiber vom heimischen PC hochgeladen werden.

Ich beschreibe hier meine Erfahrungen, also nicht nur einfach die Lösung, sondern auch die Probleme, die dabei aufgetreten sind, weil das Forum hier voll von ähnlichen Problemen ist.

Leider benötigt man gleich eine ganze Reihe von Modulen, die zunächst auf den heimischen PC herunterzuladen und zu entpacken sind:

CCK 6.x-2.7
Mit diesem Modul wird erst das Hinzufügen weiterer Felder möglich

Imagefield 6.x-3.7
Das ergänzende Bildfeld

ImageAPI 6.x-1.8 (enthalten auch ImageAPI GD2)
Ist Voraussetzung, damit Imagecache läuft (nur im Hintergrund)

Transliteration 6.x-3.x-dev
Ist Voraussetzung, damit Imagecache läuft (nur im Hintergrund; ist dafür verantwortlich, den Dateinamen in ein brauchbares Format, z.B. Leerzeichen zu entfernen, zu verwandeln)

Imagecache 6.x-2.x-dev (enthalten auch Imagecache ui)
Ermöglicht die automatische Bearbeitung der hochgeladenen Bilder, z.B. eine vordefinierte Bildgröße

Filefield 6.x-3.7
Ist für das Hochladen der Bilder zuständig

jQuery Update 6.x-2.x-dev
Wird von Colorbox benötigt

Colorbox 6.x-1.x-dev
Bindet das Fremd-Plugin in Drupal ein

Colorbox
Das Fremd-Plugin für die Lightbox
Zu finden unter der Internetadresse: http://colorpowered.com/colorbox/

Server-Konfiguration

Die Module erfordern zum Teil PHP5 (so zum Beispiel das Modul Filefield)
Außerdem muss der Hoster mod_rewrite für clean_urls zulassen, sonst funktioniert das Modul Imagecache nicht richtig.
Wie man diese Konfiguration hinbekommt, ist nun von Hoster zu Hoster unterschiedlich. Entweder kann man die Einstellung direkt in der Konfiguration des Accounts vornehmen, oder die Steuerung läuft über die htaccess-Datei (das ist die Datei mit einem „.“ am Beginn des Dateinamens).
Im Drupal-Paket wird eine htaccess-Datei mitgeliefert.
Für die Konfiguration meines Strato-Hosting-Pakets habe ich zunächst die folgende Zeile ergänzt, damit PHP5 läuft:

AddType application/x-httpd-php5 .php .php5

Bei der Installation von Drupal 6 wird geprüft, ob mod_rewrite laufen würde und man kann optional wählen, ob man clean_url aktiviert haben möchte.
Man kann diese Option auch noch nachträglich hinzufügen:
In der htaccess sind zwei Zeilen zu „entkommentieren“, dass heisst, die vorangestellte Raute ist zu entfernen:

RewriteEngine on
RewriteBase /

(also mit Slash; befindet sich Drupal in einem Unterverzeichnis, ist dieses noch hinter dem Slash anzufügen, z.B. /drupal)
Die geänderte htaccess-Datei muss nach der Bearbeitung in das Drupal-Root-Verzeichnis per FTP hochgeladen werden.
Anschließend kann man unter Verwalten/Einstellungen/Lesbare_Urls die clean_urls aktivieren

Installation der Module

Colorbox
Vor den eigentlichen Drupal-Modulen würde ich zunächst das Fremd-Plugin Colorbox per FTP hochladen.

Achtung !!

Denn jetzt kommt etwas ungewöhnliches, was aber inzwischen auch andere mit jQuery arbeitende Drupal-Bausteine betrifft.
Das ganze Plugin-Verzeichnis muss per FTP in das Verzeichnis sites/all/libraries hochgeladen werden.
Ggf. muss das Verzeichnis“ libraries“ selbst im FTP-Programm erstellt werden, falls es nicht schon da ist.

Alle anderen Module

Die übrigen Module sind wie gehabt per FTP in das Verzeichnis sites/all/modules hochzuladen und dann zu aktivieren. Immer schön der Reihe nach und nicht alle auf einmal, sonst kann auch mal der Server schlapp machen und eine Fehlermeldung wegen phpscript-Zeitüberschreitung rausgeben.

Vorbereitung

Bevor es losgeht, muss man sich noch Gedanken machen, wie hochgeladene Bilder überhaupt abgelegt und verwendet werden dürfen/sollen.
Unter Verwalten/Einstellungen/Dateisystem ist voreingestellt, in welchem Verzeichnis die hochgeladenen Dateien abgelegt werden.
Standardmäßig ist sites/default/files vorgegeben.
Für jedes Imagefield wird später ein dazugehöriges Unterverzeichnis erstellt werden, wenn man nicht alle Bilddateien in einem Verzeichnis haben will.
Die Downloadmethode sollte auf öffentlich stehen.
Die Haken für die Konfiguration des Transliteration-Moduls sollten so bleiben.

Imagecache einrichten

Mit dem Modul Imagecache besteht die Möglichkeit, hochgeladene Bilder automatisch zu bearbeiten und dabei in die richtige gewünschte Form zu bringen.
Nach der Installation ist das Bearbeitungsformular unter Verwalten/Strukturierung/Imagecache zu finden.
Zunächst ist eine neue Voreinstellung (Preset) hinzuzufügen; nennen wir sie „Artikelteaserbild“.
Anschließend ist eine Aktion hinzuzufügen. Wir nehmen hier mal nur „Rezise“ und stellen die Breite auf 180px und die Höhe auf 120px ein.
Wenn die Installation der Module, wie oben beschrieben geklappt hat, wird bereits jetzt ein Testbild im neuen Format angezeigt.
Dann fügen wir ein zweites Preset „Artikelvollbild“ mit den Maßen 320px breit und 240px hoch hinzu.
Im Hintergrund hat Imagecache für die Ablage der entsprechenden neu erzeugten Bilddateien, also für jedes Preset, eine neue Verzeichnisstruktur hinzugefügt, die auch mittels FTP-Programm nachvollzogen werden kann:

sites/default/files/imagecache/Artikelteaserbild
und
sites/default/files/imagecache/Artikelvollbild

Für jedes Imagefield, dass diese Presets verwendet werden später entsprechende Unterverzeichnisse hinzugefügt, in die die bearbeiteten Bilddateien abgelegt werden.

Imagefield hinzufügen
Nun können wir dem Inhaltstypen Artikel (story) ein Imagefield hinzufügen.
Also wechseln wir ins Formular Verwalten/Inhaltsverwaltung/Inhaltstypen/story/Felder verwalten und fügen ein neues Feld hinzu:

Name: Artikelbild
Feldname: field_artikelbild
Feldtyp: Datei
Steuerelement: Bild

Nach dem Speichern folgt die nächste Formularseite, in der wir das neue Feld konfigurieren können:
Maximale und minimale Auflösung sollten sich nach Wunsch an den späteren Darstellungen orientieren. Hier im Beispiel wählen wir mal als maximale Größe 1024x768 und minimal 640x480. Wenn sich die Originalgröße des Bildes in dieser Größenordnung bewegt, sollte jedes Originalbild auf einem normalen 17-Zoll-Monitor vernünftig angezeigt werden.
Auch die Dateigröße sollte man einstellen. Mehr als 2MB je Bild macht php nicht mit. Außerdem wird nicht so viel Speicherplatz belegt. Je größer die Dateien, desto mehr Ladezeit wird auch benötigt.
Damit man ein wenig Ordnung in seine Bilder bekommt, sollte man in den Pfadeinstellungen für jedes Imagefield ein extra Verzeichnis angeben, das beim ersten Bild dann automatisch angelegt wird. Ich schlage „Artikelbilder“ vor.
Der gleiche Verzeichnisname wird von Imagecache , wie oben beschrieben für die Presets angelegt. So kann man die Presets auch für mehrere Imagefields verwenden.
Die restlichen Einstellungen, z.B. Alt-Text und Titel sind nach Geschmack einzurichten.
Damit das Bild vor dem Teasertext angezeigt wird, muss das Feld noch hach ganz oben unter den Titel verschoben werden.

Achtung !!

Bis jetzt wird noch nichts von unseren Einstellungen für die Anzeige der Bilder verwendet, alles geschieht nur im Hintergrund.

Der wichtige Schritt ist nun, von „Felder verwalten“ zu „Felder anzeigen“ zu wechseln !!

Erst in diesem Formular wird eingestellt, welches Preset im Teaser und in der Vollansicht des Artikels angezeigt werden soll. Da die Colorbox ins Spiel kommen soll, wählen wir also für den Teaser die Auswahl „Colorbox: Artikelteaserbild Image“ und für die Artikelansicht die Auswahl „Colorbox: Artikelvollbild Image“

CSS für die Bildausgabe
Das Bild soll natürlich links vom Text angezeigt werden. Manche Themes haben diese Einstellung bereits in den CSS-Dateien enthalten.

.imageklasse {
float : left;
margin : 0px 10px 10px 0px;
}

Das Wort „imageklasse“ muss natürlich durch die zutreffende CSS-Klasse ersetzt werden. Den Klassennamen kann man ggf. mit Firebug ermitteln.

Colorbox konfigurieren
Jetzt muss die Colorbox noch eingestellt werden; dazu wechseln wir zum Formular Verwalten/Einstellungen/Colorbox
Bereits ganz oben finden sich die Einstellungen für das Modul Imagefield.
Zu wählen ist zum einen welche/wie viele Bilder angezeigt werden sollen (alle des betreffenden Artikels, alle der angezeigten/aktiven Seite, alle des Imagefields oder nur ein Einzelnes) und zum anderen, welches Imagecache-Preset genommen werden soll.
Durch unsere Voreinstellung für das Imagefield (max und min) ist Original sinnvoll.
Weiter unten im Formular kann dann unter „Styles and Options“ noch eine der zur Verfügung gestellten Darstellungsarten der Lightbox ausgewählt werden.

Ergebnis

Wenn alles geklappt hat, kann der Artikelschreiber nun einen neuen Artikel schreiben und dabei ein Bild hochladen. Dieses Bild wird, wenn es den Größenvorgaben entspricht, angenommen und durch Imagecache bearbeitet. Das Originalbild wird unter sites/default/files/Artikelbilder gespeichert.
Die Preset-Bilder werden unter sites/default/files/imagecache/Artikelteaserbild/Artikelbilder und sites/default/files/imagecache/Artikelvollbild/Artikelbilder gespeichert.
In der Teaseransicht wird das Bild nun jeweils links gefloatet in den Maßen 180x120 bzw. in der Vollansicht mit den Maßen 320x240 angezeigt.
Wenn man auf das Bild klickt, öffnet sich die Lightbox und das Bild wird in der Originalgröße angezeigt.
Ausbaumöglichkeiten
Ein weiteres Imagefield hinzufügen, das mit dem Modul Insert in den Artikeltext eingefügt werden kann.
Das Modul Image für Bildergalerien verwenden und mit Colorbox anzeigen lassen.

‹ Drupal 6 - ImageMagick mit XAMPP Lite nutzen nach oben Drupal 6 - Installation FCK Editor ›

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Vom jeweiligen User die Kunstwerke ausgeben.
  • Fullcalendar - Grösse Dialogfenster
  • Notify-Modul: Einmalige Benachrichtigung ueber neue Nodes senden
  • [gelöst]Drupal 9 und Ubuntu 20.04
  • [gelöst] Swiftmailer installieren um Simplenews zum Laufen zu bringen
  • Installiert ja, aber kein einziger link funktioniert
  • Drupal 9 - "read more" übersetzen nun anders, nur wie?
  • [gelöst] Nur editierbare Medien in Media-View anzeigen
  • Probleme mit dem Adminmenü
  • Inhalte ändern/erstellen nicht möglich - Problem mit Datenbank-Verbindung?
  • Groups und Drupal 9
  • Verschachtelte UND / ODER Abfrage mit hook_views_query_alter
Weiter

Neue Kommentare

  • irgendwo wird doch die nutzer
    vor 3 Stunden 13 Minuten
  • inst schrieb Hallo, ich
    vor 3 Stunden 17 Minuten
  • Kein Problem. Ich helfe dir
    vor 2 Tagen 2 Stunden
  • ?????Bahnhof,
    vor 2 Tagen 2 Stunden
  • Wenn du es geschafft hast
    vor 2 Tagen 4 Stunden
  • All-Inkl und Composer 2
    vor 2 Tagen 4 Stunden
  • dinmikkith schrieb xampp auf
    vor 2 Tagen 4 Stunden
  • Ich bin auch bei All-Inkl und
    vor 2 Tagen 4 Stunden
  • Hallo, ok, verstehe. Aktuell
    vor 2 Tagen 4 Stunden
  • d.h. ohne Know How wie z.B.
    vor 2 Tagen 4 Stunden

Statistik

Beiträge im Forum: 246301
Registrierte User: 18906

Neue User:

  • JorgeClayton
  • fel
  • kuldeep

» Alle User anzeigen

User nach Punkten sortiert:
wla9036
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3917
ronald3834
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 3 Gäste online.

DrupalCenter durchsuchen:

Benutzerhandbuch

  • FAQ - Häufig gestellte Fragen.
  • Links & Downloads
  • Über Drupalcenter.de und das deutschsprachige Benutzerhandbuch
  • Über Drupal
  • Einsteiger
  • Fortgeschrittene
    • Best Practice - Drupal Sites - Guidelines
    • Die beliebtesten Themes und Module
    • Tutorials & How To's - Tipps & Tricks
      • Kurztipps - Dinge die Stunden sparen können.
      • Notfallpläne - Tipps die Deine Drupalinstallation retten können
      • Anleitung zur Erstellung eines einfachen Kontaktformulars
      • Arbeiten mit dem Drupal Taxonomie-System [beinhaltet veraltete Inhalte]
      • Bearbeiten-Tab zu jeden Block hinzufügen
      • Block View mit Argument
      • Das Tagebuch einer Site
      • Drupal 6 - Automatisch unterschiedliche Bildgröße bei Teaser und Artikel
      • Drupal 6 - Eigene CSS Datei in ein Theme integrieren
      • Drupal 6 - Einfache Bildergalerie mit Image und Lightbox2
      • Drupal 6 - Einrichten eines Kalenders
      • Drupal 6 - Google Adsense ohne Zusatzmodul einbinden
      • Drupal 6 - Hauptnavigation mit DropDown Effekt ab Ebene Zwei
      • Drupal 6 - ImageMagick mit XAMPP Lite nutzen
      • Drupal 6 - Imagefield mit Imagecache und Colorbox
      • Drupal 6 - Installation FCK Editor
      • Drupal 6 - Installieren der WYSIWYG API inkl. Editoren
      • Drupal 7: mehrere Bilder in Node: 1 Bild in Anrisstext
      • Drupal Code Highlighting in Redmine Projektarchiv (CodeRay)
      • Drupal Theming: JavaScript einhängen in Abhängigkeit von Page-Variablen
      • Drush - Das Schweizermesser für Drupal auf Kommandozeile
      • Einfaches und erfolgreiches Patchen unter Windows
      • Eingabeformat & Inputfilter
      • Einrichten eines einfachen, statischen Menüsystems
      • Erstellen von Patches
      • Gallery mit CCK und Views erstellen (Drupal 5)
      • Header image Modul einrichten
      • Inhaltsübersicht für einen User mit einem View erstellen
      • Javascript und CSS-Dateien einbinden
      • Kontaktformular mit Jquery aufwerten
      • Leitfaden zur Erstellung von Suchmaschinenoptimierten Drupal-Sites
      • Mac OSX - Backupskript für Websites auf MAMP
      • Module updaten via Shell auf Windows
      • Module übersetzen
      • Perl-Script zum Erzeugen einer statischen Kopie einer Drupal-Website
      • Portierung eine Themes von openwebdesign.org
      • Prozentbalken bei Views (Balkendiagramm)
      • Themen eines Node-Formulars
      • Titel mit Stil
      • Umkreissuche mit Location- und Views-Modul
      • Usergalerie mit ImageCache, CCK, Views + Thickbox
      • Userprofil mit Usernodes erstellen
      • Validierung von Usereingaben bei Nodes
      • Variation vom Showroom auf drupalcenter.de
      • View mit Eingabeformular für neue Beiträge
      • WebSVN mit Drupal Code Highlighting
      • Zusätzliche Submit-Schaltfläche in Node-Formularen
      • i18n Language Switcher Block, die Links mit den Flaggen themen
      • ui.slider als Ersatz für den Ajax-Pager von Views
      • Zugriffsbeschränkungen für Nodes - eine Übersicht der Möglichkeiten
  • Entwicklung von Modulen und Themes
  • Drupalcenters Community
  • Drupal 7 Video-Trainings (Deutsch)
  • Drupal-Testumgebung erstellen
  • Drupal 6 Module
  • Drupal 7 Module
  • Drupal Screencasts auf deutsch
  • Archiv

Das Copyright des deutschsprachigen Drupal-Benutzerhandbuches unterliegt den jeweiligen Autoren. Übersetzungen des englischsprachigen Drupal-Benutzerhandbuches unterliegen der Creative Commons License, Attribution-ShareAlike 2.0.

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