Bildergalerie-Modul

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche

Mit dem Bildergalerie-Modul ermöglicht DynPG Ihnen, schnell und einfach eine Bildergalerie nach Ihren Wünschen zu erstellen. Sie können beliebig viele Bilder in einer übersichtlichen, wenn nötig sogar mehrseitigen, Galerie anordnen, komfortabel betrachten und sogar eine automatische Diashow starten.

Funktionen der Bildergalerie

Bildergalerie Beispiel.png Bildergalerie Bildanzeige.png


Das Bildergalerie-Modul von DynPG stellt Bilder in einer übersichtlichen Auflistung dar. Einzelne Bilder werden dabei bei einem Klick in voller Größe angezeigt. Die Bildergalerie bietet zudem eine Navigation zwischen den Bildern und eine Diashow-Funktion. Die Bilder und das Aussehen der Galerie können dabei bequem im Backend festgelegt werden.

Wenn Sie sich einmal eine Beispiel-Bildergalerei anschauen möchten, dann können Sie das auf der folgenden Seite tun:

Beispiel: So sieht's aus


Bildergalerie Bildanzeige Navigation.png Bildergalerie Bildanzeige Diashow.png

Installation

→ Hauptartikel: Installation von Modulen

  • Laden Sie sich die neueste Version der Bildergalerie von der DynPG Homepage herunter
  • Entpacken Sie das heruntergeladene Zip-Archiv.
  • Stellen Sie mit Ihrem Web-Editor oder FTP-Programm die Verbindung zum Webserver her und öffnen Sie das Verzeichnis, in welchem sich DynPG befindet (im Weiteren "CMS-Verzeichnis" genannt).
  • Ziehen Sie per Drag and Drop alle Verzeichnisse und Dateien in dieses CMS-Verzeichnis hinein. Nun werden teils Dateien überschrieben, andere neu erstellt.
  • Sobald nun alle Dateien hochgeladen sind, können Sie die Oberfläche öffnen, welche Sie durch das Update führt. Gehen Sie dazu über Ihren Web-Browser in das Verzeichnis, indem sich das Backend von DynPG befindet, d.h. geben Sie die URL zum CMS-Verzeichnis in die Adresszeile des Browsers ein (z.B. www.domain.org/dynpg). Nun finden Sie eine Seite vor, bei welcher Sie die AGB's bestätigen müssen und zudem sehen, ob alle Voraussetzungen für eine Installation des Updates (respektive Plugins) erfüllt werden. Ist dies der Fall, können Sie die Installation durchführen.
  • Anschliessend werden Sie aufgefordert, Verzeichnisse und Dateien auf dem Server zu löschen. Lesen Sie die Anweisungen im Browserfenster bitte genau durch. Wenn Sie alle Bedingungen erfüllt haben, werden Sie einen Link finden, welcher Sie zur Einstiegsseite des Backendes führt.

Erstellen einer Bildergalerie

Nachdem Sie das Modul installiert haben, finden Sie im Backend einen neuen Menüpunkt "Bildergalerie". Mit diesem Link gelangen Sie zu dem Bereich, in dem Sie Bildergalerien erstellen und verwalten können.

Um eine Bildergalerie zu erstellen, müssen Sie die folgenden Schritte durchführen:

  1. die Bilder für die Galerie hochladen
  2. eine Bildergalerie im Backend erstellen
  3. die Bildergalerie in einen Artikel einfügen und anzeigen

Bilder hochladen

Um die Bilder für Ihre Galerie hochzuladen navigieren Sie im Backend zur Dateiverwaltung. Hier können Sie alle Bilder entweder nacheinander oder zusammen in einem Zip-Archiv hochladen. Wählen Sie dazu eine Gruppe aus, in der die Bilder gespeichert werden sollen und laden Sie sie dort hoch.

Sie können bereits jetzt eine sinnvolle Beschreibung für die Bilder eingeben, da diese später in der Bildergalerie erscheint, sofern Sie dies wünschen. Um die Übersichtlichkeit zu wahren, ist es sinnvoll einen separaten Ordner für Bilder zu erstellen. Je nach den jeweiligen Umständen kann es auch sinnvoll sein, einen separaten Ordner für die Bilder der Galerie anzulegen, um diese zusammen an einem Ort zu haben.


Note.png Anmerkung: Beachten Sie die verschiedenen Anforderungen bezüglich der erlaubten Dateigröße. Sowohl die Einstellungen von DynPG, als auch unter Umständen ihr Server limitieren möglicherweise die maximal mögliche Dateigröße, die auf dem Server hochgeladen, gespeichert oder verarbeitet werden darf. Ein Bild mit einer maximalen Größe von 1024 x 786 Pixel kann als optimal angesehen werden.

Bildergalerie erstellen

Nachdem Sie die Bilder hochgeladen haben, navigieren Sie im Hauptmenü des Backends zum Punkt "Bildergalerie". Sie gelangen nun zur Ansicht, in der Sie eine neue Bildergalerie erstellen können.

Bildergalerie Erstellen.png

Geben Sie hier den Namen und eine Beschreibung für die neue Galerie an und bestimmen Sie, welche Einstellungen verwendet werden sollen. Klicken Sie abschließend auf Weiter, um die neue Galerie zu erstellen.

Sie gelangen daraufhin zum Bearbeitungsbildschirm der neu erstellten Galerie. Hier können Sie zunächst die Bilder auwählen, welche in der Webseite angezeigt werden sollen. Wählen Sie im Bereich Imgbtn addpics.gif "neue Bilder hinzufügen" die entsprechenden Bilder in der Liste aus. Standardmäßig werden alle hochgeladenen Bildateien in dieser Liste angezeigt. Unter "Bilderauswahl aus folgender Gruppe: " können Sie die Anzeige auch auf die Bilder einer bestimmten Gruppe beschränken.


Tip.png Tipp: Bei gedrückter Strg-Taste können Sie Bilder einzeln zur Auswahl hinzufügen. Wenn Sie Shift-Taste gedrückt halten und auf zwei verschiedene Bilder in der Liste klicken, werden diese Bilder und alle anderen, die sich in der Liste dazwischen befinden, angewählt.


Klicken Sie abschließend auf Hinzufügen, um alle selektierten Bilder zur Bildergalerie hinzuzufügen.

Bildergalerie in der Webseite anzeigen

Eine Bildergalerie können Sie bequem mit dem integrierten Texteditor von DynPG in Ihre Webseite einbinden. Wählen Sie dazu den Artikel aus, in dem die Bildergalerie angezeigt werden soll, oder erstellen sie einen neuen. Bei "Inhalt bearbeiten" können Sie nun die Galerie zum Inhaltstext des Artikels hinzufügen (klicken Sie ggf. auf den Schriftzug, falls Sie den Editorbereich nicht sehen). Nach der Installation des Bildergalerie-Moduls finden Sie hier eine weitere Schaltfläche Dynpg gallery.gif "Bildergalerie einfügen". Klicken Sie auf diese Schaltfläche und wählen Sie im erscheinenden Fenster die entsprechende Galerie aus.


Bildergalerie bearbeiten

Um eine Galerie zu bearbeiten, gehen Sie im Backend zum Bereich Bildergalerie und klicken Sie in der unten angezeigten Liste bei der entsprechenden Galerie auf die Schaltfläche Imgbtn editpic.gif Galerie bearbeiten. Sie können hier auch eine Imgbtn delete.jpg Galerie löschen.

Im Bereich Imgbtn addpics.gif "neue Bilder hinzufügen" können Sie weitere Bilder zur Galerie hinzufügen, wie Sie es bereits beim Erstellen der Bildergalerie getan haben. Wählen Sie dazu in der Liste die entsprechenden Bilder aus un klicken Sie auf Hinzufügen.


Bildergalerie Bearbeiten.png

Bilder anpassen

In der angezeigten Übersicht können Sie die Bilder der Galerie anordnen und bearbeiten.

  • Imgbtn replace.gif Bild ersetzen
Hier können Sie das Bild an dieser Position durch ein anderes ersetzen. Nachdem Sie auf diese Schaltfläche geklickt haben, wird im oberen Bereich ein Auswahlfeld angezeigt, in dem Sie das neue Bild für diese Position auswählen können.
  • Imgbtn delete.jpg Bild löschen
Löscht das Bild aus der Galerie (aber nicht vom Server).
  • Imgbtn addpic.gif Bild hinter dieser Position einfügen
Sie können hier ein neues Bild hinter der Position dieses Bildes einfügen. Nachdem Sie auf diese Schaltfläche geklickt haben, wird im oberen Bereich ein Auswahlfeld angezeigt, in dem Sie das neue Bild für die nächste Position auswählen können.
  • Imgbtn resizepic.gif Originalbildgröße in maximale Bildgröße der Einstellungen konvertieren
Mit dieser Aktion können Sie die Bilddatei skalieren, so dass Sie exakt der in den Einstellungen der Bildergalerie angegebenen Bildgröße entspricht. Das Bild wird dabei unter Beibehaltung des Seitenverhältnisses nur verkleinert, aber nie vergrößert. Dies ist sinnvoll, um Speicherplatz auf dem Webserver zu sparen, da die Bildergalerie die Bildgröße sowieso auf die in den Einstellungen angegebene Größe reduzieren würde und eine kleinere Bilddatei Speicherplatz spart.
Caution.png Achtung: Hierbei wird die auf dem Server gespeicherte Datei konvertiert, d.h. das Originalbild wird verändert.
Tip.png Tipp: Wenn Sie alle Bilder auf einmal konvertieren möchten, dann klicken Sie einfach auf die Schaltfläche "Originalbildgrößen konvertieren".

Bilder anordnen

Um die Bilder anzuordnen, können Sie einfach das jeweilige Feld "Position" bearbeiten und damit die Position innerhalb der Bildergalerie festlegen. Die Bilder werden in der Galerie zuerst von links nach rechts und anschließend von oben nach unten angeordnet.

Einstellungen

In den Einstellungen können Sie mehrere Sätze von Einstellungen für Bildergalerien erstellen. Klicken Sie dazu auf den Reiter "Einstellungen". Es wird Ihnen nun eine Liste aller Optionen angezeigt, mit dem Sie die das Aussehen und Verhalten anpassen können. Im unteren Bereich dieser Ansicht können Sie einen neuen Einstellungssatz erstellen, oder einen anderen auswählen und bearbeiten. Je nach den jeweiligen Anforderungen können Sie dann den entsprechenden Satz beim Erstellen oder Bearbeiten einer Galerie angeben.


Bildergalerie Einstellungen.png


Generell

Im oberen Bereich wird der Name des Einstellungssatzes angezeigt. Sie können hier eine Beschreibung angeben, die dann in der Auswahlliste für Einstellunge angezeigt wird.

Vorschau

Hier können Sie die Einstellungen der Galerieübersicht ändern.

Abstand: Geben Sie hier an, wie der Abstand zwischen den Bildern bestimmt werden soll. Sie können Ihn entweder manuell einstellen, indem Sie die Option anwählen und anschließend auf Einstellungen klicken, oder die Option "nur per CSS" wählen, um den Abstand mittels CSS Angaben zu bestimmen.
Anzahl Bilder: die Anzahl der Bilder pro Reihe
Anzahl Reihen: die Anzahl der Reihen. Existieren in einer Galerie mehr Bilder, als in der Galerie platz haben, erscheint eine Seitennavigation, mit der zwischen mehreren Bildergalerie-Seiten umgeschaltet werden kann.
Bilderrahmen: bestimmt den Rahmen, der um die Vorschaubilder herum erscheint. Sie können den Rahmen entweder mit CSS formatieren, einen Schattenwurf als Rahmen festlegen oder ihn vollständig ausblenden.
Alternativ Text: bestimmen Sie hier, ob der Beschreibungstext der Bilddatei unterhalb des Bildes angezeigt werden soll. Den Text können Sie in der Dateiverwaltung für jede Datei angeben.
Pixelbreite: die Breite eines Vorschaubildes in Pixeln.


Note.png Hinweis: Wenn Sie die Pixelbreite ändern, müssen die Vorschaubilder für die Galerie neu berechnet werden. Es wird in diesem Fall im oberen Bereich ein Hinweis angezeigt, nachdem Sie auf Speichern geklickt haben. Klicken Sie hier nacheinander auf die Links der aufgeführten Galerien, um die betreffenden Vorschaubilder neu berechnen zu lassen.

Bildergalerie Neuberechnen.png

Bilder

Hier werden die Einstellung für die Anzeige eines einzelnen Bildes festgelegt. Sie beziehen sich darauf, wie das Bild dargestellt werden soll, wenn in der Galerieübersicht auf ein Bild geklickt wurde.

Anzeigeform: bestimmt die Anzeigeform der Bilder, wenn in der Galerie auf ein Bild geklickt wird. "Auf der Seite" zeigt das Bild in derselben Seite an, bei "Pop-Up" wird ein neues Fenster angezeigt.
Diashow: legt fest, ob eine Diashow verfügbar sein soll, oder nicht.
Bilderrahmen: bestimmt, wie der Rahmen um das Bild aussehen Soll. Sie können den Rahmen entweder mit CSS formatieren, einen Schattenwurf als Rahmen festlegen oder ihn vollständig ausblenden.

Note.png Hinweis: Diese Einstellung wirkt sich nur auf die Anzeigeform "Pop-Up" aus.

Alternativ Text: bestimmen Sie hier, ob der Beschreibungstext der Bilddatei unterhalb des Bildes angezeigt werden soll. Den Text können Sie in der Dateiverwaltung für jede Datei angeben.
Maximale Größen: legt die maximale Größe eines Bildes in der Bildansicht fest. Die Größe des Originalbildes wird beim Ändern dieser Einstellung nicht verändert, d.h. die Bilddatei bleibt unverändert

Note.png Hinweis: Diese Einstellung wirkt sich nur auf die Anzeigeform "Pop-Up" und die Diashow aus.