Drupal 7 Bilder-Gallierie mit jQuery Colorbox 1.3.16

Unter Verwendung von Ubuntu 10.10 ist es doch relativ einfach einen Web-Server mit Mysql-Datenbank- und PHP-Unterstützung aufzusetzen, sowie Drupal 7 mit einer sehr schönen Bildergallerie. Folgende Schritte müssen dafür vorgenommen werden (Achtung: Bei der Installation von MySQL werden Benutzername und Passwort für den Server-Login erfragt. Diese Informationen werden später noch benötigt!):

sudo aptitude install php5 php5-gd php5-mysql apache2 mysql-server
sudo chmod -R a+w /var/www
wget http://ftp.drupal.org/files/projects/drupal-7.0.tar.gz -O /var/www/drupal-7.0.tar.gz
tar -C /var/www -xvf drupal-7.0.tar.gz
rm /var/www/drupal-7.0.tar.gz
mv /var/www/drupal-7.0 /var/www/drupal
cd /var/www/drupal
wget http://ftp.drupal.org/files/translations/7.x/drupal/drupal-7.0.de.po -O profiles/standard/translations/drupal-7.0.de.po
mkdir sites/all/libraries
wget http://colorpowered.com/colorbox/colorbox-1.3.16.zip -O sites/all/libraries/colorbox-1.3.16.zip
unzip -d sites/all/libraries sites/all/libraries/colorbox-1.3.16.zip
rm sites/all/libraries/colorbox-1.3.16.zip
wget http://ftp.drupal.org/files/projects/galleryformatter-7.x-1.0.tar.gz -O modules/galleryformatter-7.x-1.0.tar.gz
wget http://ftp.drupal.org/files/projects/colorbox-7.x-1.0-beta2.tar.gz -O modules/colorbox-7.x-1.0-beta2.tar.gz
tar -C modules/ -xvf modules/galleryformatter-7.x-1.0.tar.gz
tar -C modules/ -xvf modules/colorbox-7.x-1.0-beta2.tar.gz
rm modules/galleryformatter-7.x-1.0.tar.gz modules/colorbox-7.x-1.0-beta2.tar.gz
mkdir sites/default/files
chmod -R a+w+r sites/default/files
cp sites/default/default.settings.php sites/default/settings.php
chmod a+w+r sites/default/settings.php

Drupal 7 selbst wird nun im Browser konfiguriert, indem man das CMS unter http://127.0.0.1/drupal-7.0 aufruft. Hier fährt man mit dem “Core”-Installationstyp fort und wählt darauf hin z.B. das installierte deutsche Sprachpaket aus. Als nächstes erstellt man im Terminal eine Mysql-Datenbank:

mysqladmin -u root -p create drupal_datenbank
mysql -u root -p
GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER, LOCK TABLES, CREATE TEMPORARY TABLES ON "drupal_datenbank".* TO "drupal"@"localhost" IDENTIFIED BY "drupal_password";

FLUSH PRIVILEGES;
exit

Diese Daten (Benutzername “drupal” mit Passwort “drupal_password” und Datenbank “drupal_datenbank”) können so nun auch im Browser beim Drupal-Setup eingegeben werden.
Sobald Drupal eingerichtet ist und man sich in der Administration befindet, müssen Colorbox und GalleryFormatter unter der Kategorie Module aktiviert werden. Unter dem Mnüpunkt Struktur kann nun entweder ein neuer “Inhaltstyp” angelegt oder ein bereits bestehender verändert werden. In diesem Beispiel fügen wir die Bildergallerie in einer “einfachen Seite” hinzu und legen dort ein neues Feld unter der Option “Felder verwalten” an.
Dabei nennen wir das bereits vorhandene Feld “Gallerie” und definieren es als “Bild: field_image” und den Datentyp als “Bild”. Nach einem klick auf Speichern, werden weitere Einstellungsmöglichkeiten angezeigt. Bildstil-Vorschau kann hier auf “galleryformatter_slide” oder “galleryformatter_thumb” gestellt werden und die Anzahl an Werten auf unbegrenzt. Die Konfiguration wird hier übernommen mit einem klick auf “Einstellungen speichern”. Im Tab “Anzeige verwalten” kann man nun den Eintrag “Gallerie” bei Format von “Bild” auf “jQuery” ändern. Auf der rechten Seite des Eintrags lässt sich durch einen klick auf die Zahnräder weitere Optionen einblenden, bei denen die Einstellung “Use jQuery modal for full image link” auf “Colorbox” gesetzt werde muss. Ein klick auf “Aktualisieren” und darauf “Speichern” übernimmt die Einstellungen für den veränderten Inhaltstyp. Bilder die nun beim anlegen einer “einfachen Seite” über das Upload-Formular hinzugefügt werden, werden dann im Artikel selbst in der davor ausgewählten Art der Javascript-Gallerie angezeigt.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

* Checkbox GDPR is required

*

I agree

Software
Officepad – Etherpad alternative based on Onlyoffice

During the Chaos Communication Camp 2019 I was working on a project called Officepad. The aim was to build a web interface comparable to Etherpad. Etherpad is a well established tool for online text collaboration used by software developers, activists and so on. Etherpad is relatively stable and works well …

Software
2
Bye bye Play Store! Mirroring Play Store Apks to private F-Droid repo

This small tutorial will show you how to setup your own F-Droid repository containing automatically mirrored Play Store apps. Using this private repo, you don’t have to relay on Google Play Store or third party stores anymore to keep non-free apps up-to-date. All you need to have is a Linux …

Software
Ebook reader app for Nextcloud

Because of lack of altenatives I decided to write a small ebook reader plugin for Nextcloud. The task of creating such an app was quite easy: I just forked the files_pdfviewer extension and replaced PDF.js with the Epub.js library. In the app template file, I used the reference ebook reader …