Google translator »

(Opens in a new window - öffnet in einem neuen Fenster)

Kurz-Dokumentation Plugin "FotoPro"

Version FotoPro 5.2 - released 08/2023

Mit FotoPro können Sie ordnerbasierte Fotogalerien erstellen. Ab Version 5.2 arbeitet FotoPro mit Bildern der Typen .jpg, .jpeg, .png, .webp und .gif, Gross- und Kleinschreibung muss bei den Dateiendungen nicht beachtet werden.

Das "Pro" steht für "Professional". Kein professioneller Fotograf will die Bearbeitung und Optimierung seiner Bilder für das Internet dem Webserver überlassen. Foto-Profis optimieren ihre Fotos vor dem Upload offline für das Internet. Deshalb hat FotoPro bis Version < 3.0 keine Bildbearbeitung beim Upload angeboten.

Ab Version 3.0 kann FotoPro jedoch im Nachgang online bearbeitete Bilder in einem Ordner "fpro_mediumPics" erstellen. Dazu muss die neue Konfigurationsvariable "mediumPics usage:" auf "true" gesetzt werden. Danach kann man im Backend entsprechend der Konfigurationsvariablen "mediumPics max dimension:" verkleinerte Bilder erzeugen, die von FotoPro Galerien verwendet werden, wenn das entsprechende Verzeichnis "fpro_mediumPics" vorhanden ist.

Dieses Verzeichnis kann man per Backend komplett löschen, danach werden wieder die hochgeladenen Originalbilder im Hauptverzeichnis der Galerie verwendet.

Wenn "mediumPics usage:" nicht auf "true" gesetzt ist, werden grundsätzlich die hochgeladenen Originalbilder im Hauptverzeichnis der Galerie verwendet, alle Optionen zur Erstellung und Löschung der mittelgrossen Bilder und des entsprechenden Verzeichnisses im Backend sind deaktiviert.

Ab Version 3.1 kann man auch Einzelbilder im FotoPro Backend hochladen und löschen. Dabei werden jeweils alle notwendigen Operationen automatisch durchgeführt:

Somit kann nun auch der weniger versierte Anwender eine Galerie Bild für Bild einfach und komfortabel aufbauen.

Es besteht aber auch weiterhin die Möglichkeit, ganze Bilderserien per ftp hochzuladen und anschliessend alle notwendigen Operationen im Backend (Vorschaubilder und mittelgrosse Bilder erstellen, Datendatei aktualisieren) manuell für alle Bilder auf einmal auszuführen.

FotoPro hat 3 Galeriefunktionen:

1. Systemvoraussetzungen

Voraussetzung ist eine funktionierende Installation von CMSimple 4.2 oder höher.

Empfohlen wird die aktuelle Version von CMSimple.

2. Installation

  1. zip-Datei herunterladen und mit einem geeigneten Programm entpacken
    • Laden Sie die komplette Ordner-Struktur des Verzeichnisses "CMSimpleRoot" (die Verzeichnisse "plugins" und "userfiles") in das Installationsverzeichnis von CMSimple hoch.
    • Bei einem Update könnte Ihr ftp Programm merken, dass es diese Verzeichnisse und Dateien bereits gibt, und Sie fragen, ob Sie das wirklich tun wollen. Beantworten Sie diese Frage einfach mit "ja", "ok" oder was immer Ihr ftp Programm anbietet.
      Sie sollten zuvor jedoch die config.php und die Sprachdateien sichern, wenn Sie diese mal bearbeitet haben.
    • Bei einem Update laden Sie einfach das Verzeichnis "userfiles" nicht mit hoch.
  3. Vergeben mit Ihrem ftp-Programm die erforderlichen Lese- und Schreibrechte für Ordner und Dateien.

3. Datei- und Ordnerrechte

Damit das Programm funktioniert und arbeiten kann (bzw. administrierbar ist), müssen für bestimmte Dateien und Ordner bestimmte Schreib- und Leserechte vergeben werden.

Dateien: chmod 666

Ordner: chmod 777

4. Galerie-Varianten und Plugin-Aufrufe

4.1 FotoProLB (LightBox)

Fügen Sie folgenden Plugin-Aufruf in Ihre CMSimple Seite ein, an der Stelle, an der die Galerie zu sehen sein soll:

{{{plugin:FotoProLB('Galerie_Name');}}}

Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und Daten Dateien der Galerie liegen.

4.1.1 FotoProLB (LightBox) mit vertikal ausgerichteter Vorschau

Bei dieser Variante haben alle Vorschaubilder (Thumbnails) die gleiche Breite und werden vertikal ausgerichtet in Spalten angezeigt. Die Anzahl der Spalten richtet sich nach der zur Verfügung stehenden Breite des umschliessenden Elements. Die vertikal ausgerichtete Lightbox Galerie ist voll responsiv.

Für eine vertikal ausgerichtete Galerie benutzen Sie einfach bei der Erzeugung der Galerie die Vorlage "_copytemplate0_lb_vertical_thumbs".

In dieser Vorlage ist die Anzeige des Galerienamens und der Galerie Kurzbeschreibung deaktiviert, da die Anzeige im mehrspaltigen Layout sinnlos ist. Diese beiden Felder können nun zur Aktivierung der Bildbeschreibungen unter den Vorschaubildern und zur Gestaltung der Vorschaubilder "missbraucht" werden.

Das ganze ist also eher ein Hack als seriöse Programmierung ;-)

  1. Gehen Sie im Plugin Backend zum Bereich "Galerie Design".
  2. Tragen Sie in das Feld "kurze Beschreibung:" folgendes ein:
    thumbs descriptions on
  3. In das Feld "Name der Galerie:" können Sie CSS-Eigenschaften für die Darstellung der Vorschaubilder und der Bildbeschreibungen eintragen, z. B:
    background: #665; color: #ccc; padding: 3px;
    Sie sollten wenigstens eine (1) CSS-Eigenschaft eintragen, z. B.:
    background: none;

Die vertikale Vorschau ist geeignet für Galerien mit vielen Bildern und grossen Vorschaubildern.

4.1.2 FotoProLB (LightBox) mit quadratischen Vorschaubildern

Mit 3 zusätzlichen Parametern im Plugin-Aufruf von FotoProLB() werden quadratische Vorschaubilder angezeigt.

Wichtige Hinweise:

Fügen Sie folgenden Plugin-Aufruf in Ihre CMSimple Seite ein, an der Stelle, an der die Galerie zu sehen sein soll:

{{{plugin:FotoProLB('Galerie_Name','thumbs width','thumbs margin','thumbs opacity');}}}

Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und Daten Dateien der Galerie liegen.

thumbs width: Die Seitenlänge der Vorschaubilder in px (ohne px)

thumbs margin (optional): Der Abstand der Vorschaubilder in px (ohne px), Standard: '3'

thumbs opacity (optional): Die Deckkraft der Vorschaubilder (0-1), Standard: '0.8'

Die beiden letzten Parameter ('thumbs margin' und 'thumbs opacity') sind optional und können weggelassen werden, wenn Sie mit den Standardeinstellungen zufrieden sind. Der minimale Plugin-Aufruf für eine Galerie mit quadratischen Vorschaubildern ist also:

{{{plugin:FotoProLB('Galerie_Name','120');}}}

Es gibt eine für quadratische Vorschaubilder optimierte Vorlage: "_copytemplate0_lb_square_thumbs"

4.2 FotoProOP (OnPage)

Fügen Sie folgenden Plugin-Aufruf in Ihre CMSimple Seite ein, an der Stelle, an der die Galerie zu sehen sein soll:

{{{plugin:FotoProOP('Galerie_Name');}}}

Die OnPage Galerie besteht aus 4 Elementen: Navigation, Bild, Kurzbeschreibung zum Bild und Vorschaubilder (Thumbs)

Navigation, Kurzbeschreibung und Vorschaubilder können Sie per optionalen Parametern im Plugin Aufruf für jede einzelne Galerie abschalten:

{{{plugin:FotoProOP('Galerie_Name', 'Thumbs', 'Description', 'Navigation');}}}

Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und Daten Dateien der Galerie liegen.

Thumbs: Alles andere als "thumbs" (z. B. "nothumbs") deaktiviert die Anzeige der Vorschaubilder.

Description: Alles andere als "description" deaktiviert die Anzeige der Bildbeschreibung.

Navigation: Alles andere als "navi" deaktiviert die Anzeige der Navigation (Buttons und Counter).

Ohne Angabe der 3 optionalen Parameter wird die Galerie vollständig angezeigt.

Hinweis: Bitte fügen Sie den Plugin Aufruf immer in der Quelltext Ansicht ein.

4.3 FotoProOPJS (OnPage JavaScript)

Bei dieser Funktion erfolgt der Bildwechsel per JavaScript. Dadurch wird nicht bei jedem Bildwechsel die gesamte Seite neu geladen.

Fügen Sie folgenden Pluginaufruf in Ihre CMSimple Seite ein, an der Stelle, an der die Galerie zu sehen sein soll:

{{{plugin:FotoProOPJS('Galerie_Name');}}}

Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und Daten Dateien der Galerie liegen.

Die OnPageJS Galerie besteht aus 3 Elementen: Bild, Kurzbeschreibung zum Bild und Vorschaubilder (Thumbs)

Die Kurzbeschreibung der Bilder können Sie per optionalem Parameter im Plugin Aufruf für jede einzelne Galerie abschalten:

{{{plugin:FotoProOPJS('Galerie_Name','Description');}}}

Galerie_Name: Der Name des Verzeichnisses, in dem die Bilder und Daten Dateien der Galerie liegen.

Description (optional): Alles andere als "description" deaktiviert die Anzeige der Bildbeschreibung.

Ohne Angabe des optionalen Parameters wird die Galerie vollständig angezeigt.

Hinweis: Bitte fügen Sie den Plugin Aufruf immer in der Quelltext Ansicht ein.

4.4 In Newsboxen und im Template

FotoPro kann auch in Newsboxen und im Template eingesetzt werden. In diesem Fall sollte in der Plugin Kofiguration activate lightbox global: auf "true" gesetzt werden.

Beispiel für den Aufruf in der template.htm:

<?php echo FotoProLB('Galerie_Name'); ?>

5. Konfiguration

Die globalen Konfigurationsmöglichkeiten von FotoPro finden Sie in der Plugin Konfiguration. Die blauen Fragezeichen bieten Hinweise zu der jeweiligen Konfigurationsmöglichkeit.

Alle anderen Konfigurationsmöglichkeiten finden Sie im Plugin Backend unter "Galerien bearbeiten", diese wirken sich nur auf die jeweilige Galerie aus.

6. Galerien anlegen und bearbeiten

6.1 Neue Galerie anlegen

Neue Galerien können durch kopieren einer vorhandenen Galerie per ftp erfolgen. In diesem Fall müssen evtl. die erforderlichen Datei- und Ordnerrechte per ftp erteilt werden (siehe 3.).

Es besteht jedoch auch die Möglichkeit, neue Galerien im Backend anlegen zu lassen. Dabei wird das Design der aktuell ausgewählten Galerie für die neue Galerie kopiert.

Dazu rufen Sie im Backend die Galerie auf, deren Design für die neue Galerie kopiert werden sollen, und geben in das Eingabefeld unterhalb von "Neue Galerie erzeugen" den Namen der neuen Galerie ein (keine Leerzeichen, keine Sonderzeichen). Danach klicken Sie auf "Galerie erzeugen". Auf einem sinnvoll konfigurierten Webserver sollten bei diesem Vorgang die Datei- und Ordnerrechte automatisch richtig gesetzt werden.

Jetzt können Sie Ihre Fotos in die Galerie hochladen, dazu gibt es im Bereich "Bilddaten" einen Link, mit dem Sie einzelne Bilder hochladen können. Dabei wird automatisch die Datendatei der Galerie aktualisiert und das Vorschaubild (Thumbnail) erzeugt.

Es besteht auch die Möglichkeit, ganze Bilderserien per ftp in den Ordner der Galerie (./userfiles/plugins/fotopro/Die_Galerie/) hochzuladen und anschliessend alle notwendigen Operationen im Backend (Vorschaubilder und mittelgrosse Bilder erstellen) manuell für alle Bilder der Galerie auf einmal auszuführen.

Wenn der DebugMode aktiviert ist, erhalten Sie eventuell einige php-Fehlermeldungen bzw. -Warnungen. Ignorieren Sie diese, nach Erzeugung der Vorschaubilder und Aktualisierung der Datendatei verschwinden diese Fehlermeldungen.

6.2 Galerie konfigurieren

Wenn Sie in CMSimple eingeloggt sind, finden Sie im Admin Menü den Menüpunkt "Plugins". Wählen Sie hier "fotopro".

Jetzt öffnet sich das Plugin-Menü, wählen Sie hier "Galerien bearbeiten".

Mittels der Selectbox oben links können Sie die Galerie auswählen, die bearbeitet werden soll.

Unter "Galerie bearbeiten" können Sie für jede einzelne Galerie individuelle Werte einstellen, so kann jede Galerie anders aussehen und anders ausgerichtet sein.

Ganz unten finden Sie die Bilder, die in der ausgewählten Galerie angezeigt werden. Hier können Sie für jedes Bild einen kurzen Beschreibungstext eingeben und die Galerie mit Hilfe der Ordnungs-Nr. ordnen.

6.3 Galerie gestalten

Zur Gestaltung der Galerien sind grundlegende CSS Kenntnisse notwendig. Jede einmal gestaltete Galerie kann als Vorlage für neue Galerien verwendet werden, siehe 6.1.

Im Backend von FotoPro gibt es mehrere CSS Boxen (Galerie - Überschrift - Vorschaubilder), in diese Boxen können die CSS Eigenschaften für den jeweiligen Bereich der Galerie geschrieben werden.

Galerie - für das äussere div, also die gesamte Galerie

Überschrift - für die Überschrift der Galerie

Vorschaubilder - für die Vorschaubilder der Galerie

Grosses Bild - für das grosse Bild (nur wirksam bei OnPage Galerie)

Für das hochladen eines Hintergrundbildes gibt es eine eigene Routine, mit Selectboxen zur Ausrichtung des Hintergrundbildes. Das Hintergundbild für die gesamte Galerie sollte also nicht in der CSS Box "Galerie" definiert werden, da wird nur die Hintergrundfarbe definiert.

Wenn Sie für eine OnPage Galerie andere Buttons haben wollen, legen Sie ein Verzeichnis
./userfiles/plugins/fotopro/die_galerie/fpro_buttons/
an und legen Sie dort die gewünschten Buttons prev.gif und next.gif ab.

7. Der Datenpfad in Zweitsprachen und Subsites

In den Kopiervorlagen von CMSimple (2lang, 2site und 2site2lang) ist kein Ordner userfiles enthalten.

In diesem Fall arbeitet FotoPro auch in Zweitsprachen und Subsites mit dem userfiles Ordner des Installationsverzeichnisses von CMSimple.

Wenn Sie im Verzeichnis der Zweitsprache oder der Subsite einen Unterordner userfiles mit den Unterordnern plugins/fotopro/ anlegen, dann arbeitet FotoPro in Zweitsprachen und Subsites mit den Galerien in diesen Ordnern.

8. Verwendung in CoAuthors

FotoPro funktioniert auch unter CoAuthors, das heisst, das Plugin kann in Installationen von CMSimpleCoAuthors oder in CoAuthors-Subsites (Verwendung der Kopiervorlage 2author) verwendet und in die Hauptseite eingebunden werden.