Bildergalerie-Modul: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
K
(Moduldokumentation überarbeitet, erweitert und aktualisiert)
Zeile 1: Zeile 1:
−
__NOTOC__
 
 
[[Kategorie:Module]]
 
[[Kategorie:Module]]
−
''Ursprünglicher Autor'': Urs Gamper
+
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.
−
=== Schritt 1 ===
+
−
In der Dateiverwaltung am besten eine neue Gruppe erstellen.
+
  
−
[[Image:dateiverwaltung.jpg]]
+
== Funktionen der Bildergalerie ==
 +
<center>
 +
[[Image:Bildergalerie Beispiel.png|400px]]
 +
[[Image:Bildergalerie Bildanzeige.png|400px]]
 +
</center>
  
−
Anschliessend in die neu erstellte Gruppe klicken.
 
  
−
=== Schritt 2 ===
+
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 die Bilder als ZIP-Datei vorliegen, kann über das Archiv die ZIP-Datei hochgeladen (entpackt) werden.
+
  
−
[[Image:datei-archiv.gif]]
 
  
−
Sobald das ZIP hochgeladen bzw. entpackt ist erscheint in der gleichen Ansicht unten die Dateiliste.
+
<center>
 +
[[Image:Bildergalerie Bildanzeige Navigation.png|500px]]
 +
[[Image:Bildergalerie Bildanzeige Diashow.png |400px]]
 +
</center>
  
−
[[Image:bilder_beschriften.gif]]
+
== Installation ==
 +
→ Hauptartikel: [[Installation von Modulen]]
  
−
Über die Aktionen bzw. den "Bleistift" können nun die Bildbeschriftungen geändert bzw. andere Bilder hochgeladen werden.
+
* Laden Sie sich die neueste Version der Bildergalerie von der [http://www.dynpg.org/download.php 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. <tt>www.domain.org/dynpg</tt>). 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.
  
−
[[Image:bilder_aender.gif]]
+
== 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.
  
−
Es ist sehr wichtig, dass bei Beschreibung ein sinnvoller Text ist. Insbesondere dann, wenn den Bildern in der Galerie eine Bildbeschreibung mitgegeben werden wie zum Beispiel hier:¨
+
Um eine Bildergalerie zu erstellen, müssen Sie die folgenden Schritte durchführen:
 +
# die Bilder für die Galerie hochladen
 +
# eine Bildergalerie im Backend erstellen
 +
# die Bildergalerie in einen Artikel einfügen und anzeigen
  
−
[[Image:beispiel_sinnvolle_bildbeschreibung.gif]]
+
=== 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.
  
−
=== 3. Schritt ===
+
[[Image:Datei-Gruppenübersicht.png|center]]
−
Wenn nun alle Bilder hochgeladen sind gehen Sie auf den Navigationspunkt "Bildergalerie". Geben Sie dort einen Galerienamen und eine Beschreibung ein.
+
  
−
[[Image:galeriename.gif]]
+
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.
  
−
Dann klicken Sie auf weiter und gelangen zum Dialog "neue Bilder hinzufügen". Über "Bilderauswahl aus folgender Gruppe" können Sie nun die Gruppe anwählen, in welche Sie vorgängig die Bilder hochgeladen haben. Mit der Grossschrifttaste (Shift) bzw. der Ctrl-Taste und der Maus wählen Sie nun die Bilder aus und fügen diese der Galerie hinzu.
 
  
−
[[Image:bilder_hinzu.gif]]
+
[[Image: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.
  
−
Nun scrollen Sie wieder nach unten und finden da die Bilder, wo Sie nun die Reihenfolge festlegen, Bilder löschen, oder hinzufügen können.
+
=== 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.
  
−
[[Image:bilder_hinzugefuegt.gif]]
+
[[Image:Bildergalerie Erstellen.png|center]]
  
−
=== 4. Schritt ===
+
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.
−
Nun gehen Sie auf "Einstellungen".  
+
  
−
[[Image:einstellungen-1.gif]]
+
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 [[Image: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.
  
−
Unter "Einstellungen 1" können Sie diverse selbsterklärende Einstellungen vornehmen. Geben Sie dazu eine treffende Beschreibung ein, damit Sie jederzeit wissen, was die Einstellung bewirkt. Also z.B. LightBox, 4 x 5, 150 x 800 was soviel heisst wie: die Bilder werden beim Anklicken mit der LightBox vergrössert, es sind 4 Zeilen und 5 Reihen, das kleine Bild hat 150px und das Grosse in der LightBox 800px beim grössten Wert. Diese Einstellungen können Sie jederzeit editieren. Sie finden Sie im Bereich "Einstellungen" ganz unten aufgelistet. Bei "Alternativen Text" können Sie angeben, ob Sie die Bildbeschreibung bei den kleinen Bildern anzeigen wollen. Die Pixelbreite hat natürlich einen grossen Einfluss auf die vorgegebene Seitenbreite.
 
  
−
Unter "Bilder" ist die Anzeigeform "Auf der Seite" (1.Pfeil) wohl die idealste weil es die LightBox ist. Mit "Diashow Verfügbar" (2.Pfeil) können Sie eine Diashow anzeigen lassen. Auch in diesem Bereich können Sie wählen, ob Sie eine Bildbeschriftung anzeigen wollen. Bei der maximalen Grösse empfiehlt es sich, nicht höher als 800 Pixel (3.Pfeil) zu gehen, da sonst viele Anwender Probleme mit der Anzeige kriegen.
+
[[Image: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.
  
−
[[Image:bildbeschreibung_galerie.gif]]
 
  
−
Sie haben auch die Möglichkeit diverse Einstellungen abzuspeichern und jeder Galerie eine unterschiedliche Einstellung zu vergeben.
+
Klicken Sie abschließend auf '''Hinzufügen''', um alle selektierten Bilder zur Bildergalerie hinzuzufügen.
  
−
[[Image:einstellungen.gif]]
+
=== 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 [[Artikel erstellen|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 [[Image:Dynpg_gallery.gif‎]] "''Bildergalerie einfügen''". Klicken Sie auf diese Schaltfläche und wählen Sie im erscheinenden Fenster die entsprechende Galerie aus.
  
−
Nun ist die eigentliche Galerie erstellt. Jetzt müssen wir diese natürlich innerhalb der Website anzeigen können.
 
  
−
=== 5. Schritt ===
+
[[Image:Bildergalerie Einfügen.png|center]]
−
Dazu gehen wir auf "Gruppen" und wählen uns in die entsprechende Gruppe ein, wo der Artikel dann erscheinen soll. Nun erstellen Sie einen neuen Artikel mit neuem Inhalt, klicken in der dritten Symbolleiste rechts das Icon "Bildergalerie einfügen" an. Es öffnet sich ein Popup wo sie nun die Galerie auswählen können.
+
  
−
[[Image:artikel_erstellen.gif]]
+
== 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 [[Image:Imgbtn_editpic.gif]] ''Galerie bearbeiten''. Sie können hier auch eine [[Image:Imgbtn_delete.jpg]] ''Galerie löschen''.
  
−
Im Editor können Sie natürlich frei texten und gestalten und zwischendurch allenfalls auch eine Galerie anzeigen lassen:
+
Im Bereich [[Image:imgbtn_addpics.gif]] "''neue Bilder hinzufügen''" können Sie weitere Bilder zur Galerie hinzufügen, wie Sie es bereits beim [[#Bildergalerie erstellen|Erstellen der Bildergalerie]] getan haben. Wählen Sie dazu in der Liste die entsprechenden Bilder aus un klicken Sie auf '''Hinzufügen'''
  
−
Nun brauchen Sie den Artikel allenfalls noch mit Datum bei Limitieren und "Erstellen" abzuschliessen.
 
  
−
=== Diese Informationen als PDF ===
+
[[Image:Bildergalerie Bearbeiten.png|center]]
−
[[Media:Bildergalerie-Modul.pdf|Bildergalerie-Modul.pdf]] enthält zum jetzigen Zeitpunkt (10:13, 23. Mär 2009 (CET)) den gleichen Stand wie dieser Artikel. Dies muss allerdings in Zukunft nicht der Fall sein.
+
 
 +
=== Bilder anpassen ===
 +
In der angezeigten Übersicht können Sie die Bilder der Galerie anordnen und bearbeiten.
 +
 
 +
* [[Image: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.
 +
* [[Image:imgbtn_delete.jpg]] '''Bild löschen'''
 +
:Löscht das Bild aus der Galerie (aber nicht vom Server).
 +
* [[Image: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.
 +
* [[Image: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|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.
 +
 
 +
: [[Image:Caution.png]] '''Achtung:''' Hierbei wird die auf dem Server gespeicherte Datei konvertiert, d.h. das Originalbild wird verändert.
 +
 
 +
: [[Image: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.
 +
 
 +
 
 +
[[Image:Bildergalerie Einstellungen.png|center]]
 +
 
 +
=== 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.
 +
 
 +
{|
 +
|-
 +
| valign="top" | '''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.
 +
 
 +
|-
 +
| valign="top" | '''Anzahl Bilder:'''
 +
| die Anzahl der Bilder pro Reihe
 +
 
 +
|-
 +
| valign="top" | '''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.
 +
 
 +
|-
 +
| valign="top" | '''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.
 +
 
 +
|-
 +
| valign="top" | '''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.
 +
 
 +
|-
 +
| valign="top" | '''Pixelbreite:'''
 +
| die Breite eines Vorschaubildes in Pixeln.
 +
 
 +
|}
 +
 
 +
 
 +
[[Image: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.
 +
 
 +
[[Image:Bildergalerie Neuberechnen.png|center]]
 +
 
 +
=== 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.
 +
 
 +
{|
 +
 
 +
|-
 +
| valign="top" | '''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.
 +
 
 +
|-
 +
| valign="top" | '''Diashow:'''
 +
| legt fest, ob eine Diashow verfügbar sein soll, oder nicht.
 +
 
 +
|-
 +
| valign="top" | '''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.
 +
 
 +
[[Image:Note.png]] ''Hinweis:'' Diese Einstellung wirkt sich nur auf die Anzeigeform "''Pop-Up''" aus.
 +
 
 +
|-
 +
| valign="top" | '''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.
 +
 
 +
|-
 +
| valign="top" | '''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
 +
 
 +
[[Image:Note.png]] ''Hinweis:'' Diese Einstellung wirkt sich nur auf die Anzeigeform "''Pop-Up''" und die Diashow aus.
 +
 
 +
|}

Version vom 12. November 2010, 15:05 Uhr

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.


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.

Datei:Datei-Gruppenübersicht.png

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.


Datei:Bildergalerie Einfügen.png

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.

Von „http://wiki-de.dynpg.org/wiki_de/index.php?title=Bildergalerie-Modul&oldid=2923“