Handbuch Bildergalerie Litebox

Transkript

1 Handbuch Reference Guide Erstellt durch: Ivo Lex INM Inter Network Marketing AG Usterstrasse 202 CH-8620 Wetzikon URL Telefon: +41 (0) Fax +41 (0)

2 Inhaltsverzeichnis 1 Einleitung Ansicht Erfassen neuer Bildordner Neue Bildergruppe erfassen Neue Bildtypen erfassen Integration der Bilder in der neuen Kategorie Ausgabe der Bilder konfigurieren... 7

3 1 Einleitung In diesem Handbuch wird beschrieben, wie man auf beliebigen Seiten eine neue Bildergalerie integrieren kann. Pro Bildgalerie wird ein Anzeigelement benötigt und 2 Bildordner. Im einen Bildordner werden die Vorschaubilder eingelesen und im anderen Bildordner die vergrösserte Ansicht. 2 Ansicht Dies ist die Ansicht einer möglichen Bildergalerie. In welchem Format die Thumbnails (Vorschaubilder) erscheinen sollen ist abhängig von der Designvorlage. 2. Pro Bildgalerie kann bestimmt werden, wie viele Spalten und Zeilen erscheinen sollen. Sobald die maximale Zeilenzahl erreicht ist, hat man die Möglichkeit mittels der Navigation auf die nächste Seite zu gelangen. 3. Klickt man auf ein Thumbnail, so wird der komplette Hintergrund überlagert von der Litebox und das Bild welches angewählt wurde erscheint im Grossformat. Um diese Ansicht zu schliessen, kann man auf Close-Button clicken, oder irgendwo ausserhalb des Bildes Um in der Grossansicht auf nächste Bild zu gelangen, fährt man mit dem mauszeiger an den rechten Rand des Bildes. Dort erscheint dann der Next- Button mit welchem man zu nächsten Bild gelangen kann. Um zum vorhergehenden Bild zu gelangen, ist der gleiche Ablauf wie unter Punkt 5 beschrieben, jedoch am linken Bildrand.

4 3 Erfassen neuer Bildordner 3.1 Neue Bildergruppe erfassen Eine Bildergruppe ist ein Überordner zu den einzelnen Bildtypen (Ordner). Wenn man viele Bildgalerien hat, so kann dies sehr hilfreich sein um eine gute Übersicht zu waren. Modul Bilder-Gruppen/Typen auswählen 2. Registerkarte Gruppen auswählen 3. Auf das Icon klicken um eine neue Gruppe anzulegen Den Namen des gewünschten Ordners eintragen Beim Short-Name bitte eine Bezeichnung ohne Sonderzeichen, Umlaute oder Leerschläge eintragen. Dieser Name wird im Hintergrund für die Zuweisung der Bilder verwendet.

5 3.2 Neue Bildtypen erfassen Mit den Bildtypen werden die Ordner erfasst, wo die Bilder anschliessend gespeichert werden. Bei den Bildtypen hat man die Möglichkeit verschiedene Einstellungen bezüglich der Grösse vorzunehmen. Dies ist Sinnvoll, damit die Ausgabe der Bilder genau so erscheint wie es von der Grafischen Seite her angedacht ist Um eine neue Bilderkategorie zu erfassen 7. muss im CMS G3 Admin das Modul 8. (Element Admin) Bilder-Gruppen/Typen ausgewählt werden Typen bei der Tabauswahl selektieren Bei der Gruppenauswahl die gewünschte Gruppe (hier Bildergalerie ) auswählen. Hier werden nun alle bereits erfassten 13. Kategorien (Bildtypen) aufgelistet. Um eine bestehende Kategorie zu bearbeiten muss das Symbol angewählt werden und um eine Kategorie zu löschen das Symbol. Um eine neue Kategorie (Bildtyp) zu erfassen wird das Symbol angewählt. Für jede neue Bildgalerie braucht es zwei Bildordner (Bildtypen). Ein Ordner wird für die Thumbnails (Vorschaubilder) benötigt und der andere Ordner für die Grossansicht der Bilder. Wir erstellen einen neuen Bildtyp mit dem Symbol 7. Gruppe: Prüfen ob die gewünschte Gruppe (hier Bildergalerie) selektiert ist. 8. Name: Dieser wird für die Ausgabe im Admin benötigt (TIPP: Geben Sie den Namen der Galerie ein und am Ende mit Thumb oder Big angeben um welches Format es handelt.) 9. Short-Name: Titel des Ordners eintragen welcher dann auf dem Server als Ordnername genutzt wird (Ohne Lehrzeichen, Sonderzeichen oder Umlaute) 10. Grösse: Bei den Thumbnails (Vorschaubilder) wird eine Fixe Grösse eingetragen ( Grösse Fix BxH auswählen). Bei den Detailbilder (grosse Bilder) empfiehlt es sich eine maximale Breite anzugeben oder eine Fixe Breite. (Wert Breite Max, Breite Fix oder B oder H Fix auswählen) 1 Transparent: Einstellung auf nein belassen. 12. Bei Bild 1: Grösse: Die Grösse des Bildes eintrage je nach Definition unter Punkt 10. Bei einer Maximalen Breite oder einer Fixen Breite muss nur ein Wert (in Pixel gemessen eingetragen werden (z.b. 800). Bei einer Fixen Grösse muss die Breite und die Höhe eingetragen werden (z.b. 60x70) Format: Hier wird das Format bestimmt. Bei Fotos wird jpg empfohlen Verzeichnis: Tragen Sie hier den Wert all ein. Diese Ordnerbezeichnung wird verwendet, da man die Möglichkeit hat ein weiterer Bildordner in diesem Typ zu erfassen. Bei der Liteboxgalerie wird diese Funktion nicht verwendet. 13. Speichern

6 4 Integration der Bilder in der neuen Kategorie Für den Upload von Bildern ist es sinnvoll, wenn Bilder vorher bearbeitet und in der gewünschten Grösse gespeichert werden, z.b. mit Photoshop von Adobe oder anderen Bildbearbeitungsprogrammen. Modul Bildverwaltung auswählen 2. Gewünschte Bildergruppe auswählen (hier Bildergalerie). 3. Gewünschter Bildtyp auswählen und auf Suchen klicken damit dieser Typ aktiv ist. Auf das weisse Icon klicken um neue Bilder hochzuladen. Bilder ab Filestruktur auswählen (mittels Auswählen-Button). Anschliessend Upload klicken (Bilder wird nun gemäss Definition bei Bildgruppe/Typen zur Bearbeitung hochgeladen, ca ). 7. Bildnamen ändern wenn gewünscht und Beschreibungstext pro Sprache angeben. Der Beschreibungstext wird in der Grossansicht genutzt. Meistens wird hier nichts geändert. 8. Mit Speichern wird die Bilder in die Datenbank eingefügt Hinweis: Die grossen Bilder wie auch die kleinen Bilder (Thumbnails) müssen genau den gleichen Dateinamen aufweisen, da sonst die Zuweisung in der Ausgabe nicht funktioniert.

7 5 Ausgabe der Bilder konfigurieren CMS Schulung In diesem Abschnitt wird beschrieben, wie die neu eingefügten Bilder nun auf der Website angezeigt werden können. Modul CMS auswählen 2. Seite erstellen für die neue Bildergalerie 3. Element Bildgalerie einfügen (Gruppe: Einfache Elemente / Typ: Bildgalerie ) Bildgruppe auswählen wo die einzelnen Bildtypen erfasst sind (hier Bildergalerie ) Typ (Vorschaubild) auswählen (Thumbnails) Typ (Detailbilder) auswählen (Grosse Ansicht) 7. Anzahl Zeilen pro Seite definieren 8. Anzahl Spalten pro Seite definieren (kommt auf das Design an wie viele maximal definiert werden können) 9. Maske auswählen (welche definiert wurde) 10. Speichern