Dokumentation contentXXL CMS Version 5.3

Bildergalerie

Visuelles Beispiel

 

 
 

Allgemein

Das Modul „Bildergalerie“ wird zur Präsentation von mehreren Bildern mit gleichem Format zu einem Thema eingesetzt.
 

Beschreibung

Die Bildergalerie sollte immer dann eingesetzt werden, wenn zahlreiche Bilder mit gleichem Format ohne individuelle Anpassung bereitgestellt werden sollen.

 

Hinweis: Sollen mehrere Bilder verschiedener Formate zusammengefasst werden, z.B. verschiedene Ansichten eines Produktes oder Bilder verschiedener Auflösung, und es werden alle Eigenschaften von contentXXL-Objekten benötigt, dann prüfen Sie alternativ auch den Einsatz von Bildobjekten.

 

Besonderheiten bei Bildergalerie-Objekten

Objekte in einer Bildergalerie sind keine vollständigen contentXXL-Objekte, d. h. verknüpfte Objekte, Kategorien, Veröffentlichungszeiträume für einzelne Bilder usw. sind nicht verfügbar. Jedes Bild, das in die Galerie geladen wird, wird zu einem Objekt ausschließlich innerhalb dieses Moduls. Bilder werden sofort veröffentlicht, wenn sie in eine Galerie geladen werden. Verwenden Sie statt dessen Bildobjekte, wenn diese Leistungsmerkmale benötigt werden.

 

Die speziellen Einstellungen des Bildergalerie-Moduls umfassen Einstellungen für die erforderlichen Templates zur Darstellung von Listen- und Einzelansichten, zum Blättern sowie erweiterte Einstellungen für spezielle Anwendungen.

Im Einzelnen können die folgenden speziellen Einstellungen getroffen werden:

Templates Einzelansicht

  • Detailansicht: Wählen Sie hier das gewünschte Template für die Detailansicht der Bildergalerie aus.
  • Druckvorschau: Wählen Sie hier das gewünschte Template für die Druckvorschau aus.

Templates Listenansicht

  • Anzahl Vorschau groß: Anzahl der Artikel, die mit dem Template für „Vorschau groß“ in der Listenansicht angezeigt werden sollen.
  • Anzahl Spalten groß: Anzahl der Spalten, die mit dem Template für „Vorschau groß“ in der Listenansicht angezeigt werden sollen.
  • Vorschau groß: Wählen Sie hier das gewünschte Template für die Vorschau-/Listenansicht groß aus. Der Wechsel zwischen einem Template für Vorschau groß und Vorschau klein ermöglicht die Priorisierung von Informationen durch einen Template-Wechsel nach einer bestimmten Anzahl von Artikeln, beispielsweise in eine kleinere Darstellung.
  • Vorschau groß alternierend: Wählen Sie hier das gewünschte Template für die Vorschau-/Listenansicht groß alternierend aus. Der Wechsel zwischen einem Template für Vorschau groß und Vorschau groß alternierend ermöglicht einen Darstellungs-Wechsel bei jeder Zeile, um beispielsweise die Lesbarkeit zu erhöhen.

Blättern in der Vorschau

  • Kopfbereich: Wählen Sie hier das gewünschte Template für den Kopfbereich der Vorschau-/Listendarstellung. Dort können beispielsweise Blätterfunktionen dargestellt werden.
  • Fußbereich: Wählen Sie hier das gewünschte Template für den Fußbereich der Vorschau-/Listendarstellung. Dort können beispielsweise Blätterfunktionen dargestellt werden.
  • Kein Ergebnis: Wählen Sie hier das gewünschte Template für den Fall einer leeren Liste. Dort kann beispielsweise ein entsprechender Hinweis dargestellt werden.

Erweiterte Einstellungen

  • Rotationsmodus: Ist dieser Modus gesetzt, werden ein oder mehrere (entsprechend der Anzahl Vorschau groß) zufällig ausgewählte Listenelemente dargestellt. Diese Funktionalität bedingt einen abgeschalteten Seiten-Cache für die jeweilige Seite.

Hinweis: Wir empfehlen statt dem Server-seitigen Rotationsmodus im Template per Javascript eine Client-seitige Liste aufzubauen. Dann kann das Caching erhalten bleiben.

  • Feature-Modus: Ist dieser Modus gesetzt, wird das erste Bild in der Liste in Einzelansicht geöffnet. Andere Objekte in dem Modul sowie andere Module auf der Seite können in diesem Modus nicht mehr dargestellt werden.

Thumbnail-Ansicht

  • Maximale Breite: Geben Sie hier die maximale Breite der generierten Vorschaubilder beim Skalieren der Ausgangsgrafiken an.
  • Maximale Höhe: Geben Sie hier die maximale Höhe der generierten Vorschaubilder beim Skalieren der Ausgangsgrafiken an.

Einzelansicht

  • Maximale Breite: Geben Sie hier die maximale Breite der generierten Einzelansichtsbilder beim Skalieren der Ausgangsgrafiken an.
  • Maximale Höhe: Geben Sie hier die maximale Höhe der generierten Einzelansichtsbilder beim Skalieren der Ausgangsgrafiken an.
  • Bild-Qualität: Wählen Sie hier einen Wert zwischen 1 (geringe Bildqualität) und 10 (hohe Bildqualität) aus. Je höher die Bildqualität, desto größer ist das generierte Einzelansichtsbild.

Aktionen

  • Bilder neu berechnen: Klicken Sie diesen Button, wenn Sie Werte in der Thumbnail- oder Einzelansicht geändert haben, um die Bilder neu zu generieren.
  • Bilder importieren: Hier können Sie mehrere Bilder mit wenigen Klicks in eine Bildergalerie laden. Nach dem Klick auf  den Button öffnet sich der Ressourcenmanager. Navigieren Sie zu dem Ordner, der die Bilder enthält , halten sie die "STRG" Taste gedrückt und wählen Sie durch mehrere, einfache Mausklicks die Bilder aus, die sie in die Bildergalerie laden möchten und klicken anschließend auf "Exportieren".

 

Das Basisdaten-Formular

Wenn eine einzelne Bilddatei der Galerie hinzugefügt wird (Menü neues Bild erstellen), müssen die Basisdaten manuell ausgefüllt werden.

  • Bild: Auswahl / Ändern / Entfernen des Bildes aus dem Ressourcen-Manager.
  • Kopfzeile: Tragen Sie hier gegebenfalls die Kopfzeile des Bildes ein (sofern vom Template unterstützt).
  • Titel: Tragen Sie hier den Titel des Bildes ein (dieser Eintrag wird auch intern zur Identifikation des Objekts verwendet). 
  • Untertitel: Tragen Sie hier gegebenfalls einen Untertitel des Bildes ein (sofern vom Template unterstützt).
  • Autor: Hier erscheint der Ersteller des Artikels als Autor.
  • Kurzbeschreibung Vorschau: Tragen Sie hier gegebenfalls einen Vorschautext für das Bildes ein (sofern vom Template unterstützt).

 

Hinweis: Wenn mehrere Bilder der Bildergalerie hinzugefügt werden, werden die Felder "Titel" und "Autor" automatisch gesetzt

Dieses Modul steht auch als „Verknüpfte Bildergalerie“ zur Verfügung. Dabei wird jeweils die verknüpfte Bildergalerie zu einem in Einzelansicht dargestellten Objekt angezeigt. Die Zuordnung erfolgt für Artikel in den Basisdaten des jeweiligen Objekts über die Dropdownliste "Bildergalerie".

 

 

Templating: Vorschau groß

<div class="col-xs-6 col-md-3" [mvif:imageurl:neq:0]>
    <a class="thumbnail" data-toggle="modal" data-target='.modal-[resourceid]'>[editbutton]<img src='[imageurl]' alt="" /></a>
<!-- modal -->
 <div class='modal-[resourceid] fade modal' tabindex="-1" role="dialog" aria-labelledby='modalLabel-[resourceid]' aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id='modalLabel-[resourceid]'>[Title]</h4>
        </div>
        <div class="modal-body">
              <img src='[Detailimageurl]' alt="" class="modal-image" />
                <hr  [mvif:Headline:neq:] />
                <h2 [mvif:Headline:neq:]>[Headline]</h2>
                <h3 [mvif:SubTitle:neq:]>[SubTitle]</h3>
                <p  [mvif:Preview:neq:]>[Preview]</p>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div><!-- /.col -->

 

 

Templating: Kopfzeile

<div class="row">[template_end]</div>

 

 

Templating: Fußzeile

<div class="row">[template_start]</div>

 

 

Platzhalter: Detailansicht

 

Platzhaltername

Typ

Platzhalterbeschreibung

[Author]

string

Name des Erstellers.

[Description]

string

Textdaten (WYSIWYG).

[Editbutton]

string

Schaltfläche, um das Bild im Objekt-Edit-Manager zu bearbeiten.

[Headline]

string

Kopfzeile.

[Imagecount]

integer

Anzahl der Bilder in der Galerie.

[ImageUrl]

string

Url des Bildes in der Einzelansicht.

[Keywords]

string

SEO-Keywords.

[NextImageUrl]

string

Url zum nächsten Bild (leer, falls das letzte Bild bereits angezeigt wird).

[Preview]

string

Vorschautext

[PreviewImage]

integer

Obsolet.

[PreviewImage_alt]

string

Obsolet.

[PreviewImageIsVisible]

string

Obsolet.

[PreviousImageUrl]

string

Url zum vorherigen Bild (leer, falls bereits das erste Bild angezeigt wird).

[PrintLink]

string

Url zur Druckansicht

[ResourceID]

intger

RAID (RessourceAssignID) des Original-Bilds.

[SortOrder]

string

Index des aktuellen Bilds in der Liste.

[SubTitle]

string

Der Untertitel des Bilds.

[ThumbnailUrl]

string

Url zurück zur Listenansicht mit den Thumbnails.

[Title]

string

Titel des Bilds.

[TotalImages]

integer

Anzahl aller Bilder in dieser Gallerie.

Anmerkung:
Ihnen stehen hier zusätzlich die Felder [usersetting1] - [usersetting10] (string-Werte), [userint1]-[userint5] (integer-Werte), [userdate1] and [userdate2] (datetime-Werte), [userfloat1]-[userfloat5] (double-Werte), [userimage1]-[userimage5] (integer-Werte, RAIDs),, [userimage1_alt]-[userimage5_alt] (string-Werte) zur Verfügung.

 

 

Platzhalter: Kopf- und Fußbereich

 

Platzhaltername

Typ

Platzhalterbeschreibung

[CurrentPageNumber]

integer

Aktuelle Seitennummer – Paging.

[FirstPage]

string

Url zur ersten Seite – Paging.

[IsListView]

string

Gibt an, ob das Modul sich in der Listenansicht befindet.

[LastPage]

string

Url zur letzten Seite – Paging.

[ModulePreview]

string

Vorschautext des Moduls.

[ModulePreviewImage]

integer

Vorschaubild des Moduls (RAID).

[ModulePreviewImage_alt]

string

Textinformation zum Vorschaubild (Tooltip).

[NextPage]

string

Url zur nächsten Seite – Paging.

[PreviousPage]

string

Url zur vorherigen Seite – Paging.

[PrintLink]

string

Url zur Druckansicht.

[ReturnToListLink]

string

Url zurück zur Listenansicht.

[ReturnToOriginalListLink]

string

 Url zurück zur Listenansicht (bei Paging der Einzelansicht).

[ShownFrom]

integer

Index des ersten Elements, das auf der aktuellen Seite angezeigt wird.                                                  

[ShownTo]

integer

Index des letzten Elements, das auf der aktuellen Seite angezeigt wird.

[TellAFrendLink]

string

Url zum Empfehlungs-Modul (Tell-a-Friend).

[TotalItemsCount]

integer

Anzahl aller Elemente – Paging

[TotalPageCount]

integer

Anzahl aller Seiten - Paging.

 

 

Platzhalter: Listenansicht

 

Platzhaltername

Typ

Platzhalterbeschreibung

[Author]

string

Name des Erstellers.

[Description]

string

Textdaten (WYSIWYG).

[Editbutton]

string

Schaltfläche, um das Bild im Objekt-Edit-Manager zu bearbeiten.

[Headline]

string

Kopfzeile.

[ImageCount]

integer

Anzahl der Bilder in dieser Galerie.

[ImageUrl]

string

Url des Bildes in der Listenansicht (Thumbnail).

[Keywords]

string

SEO-Keywords.

[Morelink]

string

Url zur Detailansicht des Bilds.

[Preview]

string

Vorschautext

[PreviewImage]

string

Obsolet.

[PreviewImage_alt]

string

Obsolet.

[PreviewImageIsVisible]

string

Obsolet.

[ResourceId]

integer

RAID (RessourceAssignID) des Original-Bilds.

[SubTitle]

string

Der Untertitel des Bilds.

[Title]

string

Titel des Bilds.

Anmerkung:
Ihnen stehen hier zusätzlich die Felder [usersetting1] - [usersetting10] (string-Werte), [userint1]-[userint5] (integer-Werte), [userdate1] and [userdate2] (datetime-Werte), [userfloat1]-[userfloat5] (double-Werte), [userimage1]-[userimage5] (integer-Werte, RAIDs),, [userimage1_alt]-[userimage5_alt] (string-Werte).