Dokumentation Bilder Galerie Premium (Plugin für Shopware)

Link zum Plugin: http://bit.ly/netzperfekt-galerie

In dieser Dokumentation wird das Plugin Galerie für Shopware beschrieben. Mit diesem können beliebig viele, optisch ansprechende Bilder-Galerien in einen Shopware-Shop integriert werden. Eine Galerie kann dabei ihre Bilder aus unterschiedlichen Datenquellen beziehen (z.B. der Shopware-Medienverwaltung, Flickr oder Instagram) und in beliebige Shopseiten, Blog-Beiträge, Kategorien oder sogar in Artikelbeschreibungen eingefügt werden.

Das Plugin ist bestens geeignet, um eine große Zahl von Bildern zu verwalten und dabei den Bearbeitungsaufwand zu minimieren. Mit Hilfe von Bilder-Feeds können die jeweils aktuellsten Bilder automatisch nach vorne sortiert werden.

Installation

Wichtig: bitte installieren Sie zunächst das netzperfekt Basis-Plugin, dass für dieses Plugin benötigt wird.

Installieren Sie bitte das Shopware-Plugin wie gewohnt über den Plugin-Manager.
(Allgemeine Hinweise dazu finden sich unter http://community.shopware.com/Plugin-Manager-ab-Shopware-5_detail_1856_643.html). 

Achtung: Bitte aktivieren Sie zuerst das Plugin und compilieren erst danach das Template neu. Falls die Galerie später nicht korrekt angezeigt wird, compilieren Sie das Theme bitte noch einmal. 

Im Shopware-Plugin selbst können Sie Einstellungen vornehmen, die Auswirkungen auf alle Galerien haben. Sollten Sie die sinnvollen Voreinstellungen ändern, compilieren Sie bitte das Theme neu, damit diese greifen. 

Über die Anzahl Bilder pro Seite legen Sie fest, wieviele Bilder pro Ladevorgang geladen werden sollen. Sind mehr Bilder vorhanden, können diese über einen „Mehr…“-Button nachgeladen werden. Dieser Mechanismus dient dazu, die Ladezeiten zu optimieren und Ihre Benutzer nicht zu lange auf erste Ergebnisse warten zu lassen. Diese Einstellung sollten Sie nicht zu hoch setzen.

Die Spaltenbreite der Thumbnails in der Übersicht definiert, in wievielen Spalten die Bildübersicht dargestellt wird. Diese Angabe ist ein prozentualer Wert, sinnvoll sind Einstellungen zwischen 10% und 33%.

Analog dazu steuert die Höhe der Thumbnails in der Vollbildansicht, welcher Anteil der kleinen Thumbnail-Übersicht am unteren Fensterrand eingeräumt werden soll und darüber bestimmt, wieviel Platz für das gezoomte Vollbild zur Verfügung steht. Auch hier kann ein Prozentsatz eingegeben werden (sinnvoll zwischen 10% und ca. 25%).

Galerie-Name / Bildbeschriftung / Zoom anzeigen definiert, ob diese Elemente in den Galerien angezeigt werden. Die Einstellung gilt für alle Galerien und kann nicht einzeln gesteuert werden.

Bild-Nummern anzeigen - wenn "ja", dann werden bei den Galerien beim Blättern durch die Detailbilder die Bildnummern ("12 von 15") ausgegeben)

Thumbnail-Größe für Vollbild Darstellung - wenn leer wird der Standard verwendet. Abweichend davon können Sie eine Größe für die Thumbnails angeben (z. B. 1280x1280). Bitte beachten Sie: Diese Thumbnailgröße muss vorher über den Medienmanager für den entsprechenden Ordner definiert und erzeugt worden sein.

Modus für Vollbild - Hier gibt es die Möglichkeit, die Darstellung der Großbildansicht zu beeinflussen.
Bild einpassen - die gesamte Höhe wird gefüllt (evtl. wird dabei am Bild etwas abgeschnitten und das Bild vergrößert)
Bild ausfüllen - die gesamte Fläche wird gefüllt (evtl. wird dabei am Bild etwas abgeschnitten und das Bild vergrößert)
Bild nie vergrößern - das Bild wird nie über die maximale Bildgröße hinaus dargestellt (bei kleinen 800x600 Bildern z. B. sinnvoll)
Hinweis: Bei Änderung dieser Einstellung unbedingt nochmal das Theme kompilieren. 

Einrichten einer Galerie

Bitte wählen Sie im Shopware-Backend den Menüpunkt Inhalte / Medien-Galerie. 
Sie sehen folgende Maske (die beim ersten Aufruf natürlich noch leer ist):

Mit dem Button Hinzufügen legen Sie eine neue Galerie an:

Die Felder haben folgende Bedeutung:

Titel: die Überschrift der Galerie, diese wird angezeigt.

Galerie-ID: eine interne Bezeichnung, die zur Identifikation dient. Hierüber binden Sie nachher die Galerie in Shopseiten oder Blog-Beiträge ein. Halten Sie diese möglichst kurz, z.B. „galerie-beispiele-1“ o.ä.

Galerie-Typ: Hier stehen Ihnen folgende Optionen zur Verfügung:

  • Shopware-Medien / freie Eingabe: in diese Galerie können Sie manuell beliebige Bilder aus der Shopware-Medienverwaltung oder auch beliebige Bild-URLs aus dem Internet eingeben. Die Reihenfolge der Bilder ist mittels drag & drop sortierbar.
  • Shopware Medienfeed: Hier kann im Feld Album Medienmanager ein festes Album der Shopware-Medienverwaltung zugeordnet werden. Alle dort enthaltenen Bilder werden darstellt, auch später neu hinzugefügte.  
  • Flickr Feed: Analog dazu kann hier ein Flickr-Feed dargestellt werden, der optional nach Flickr-Tags gefiltert werden kann. Sie benötigen dazu (neben einem Flickr-Account) einen Api Key und Ihre Flickr User Id. Wie Sie diese erhalten, ist weiter unten beschrieben.
    Hinweis: die Bildgröße wird bei den Thumbnails auf 640 Pixel und den Vollbildern auf maximal 1600 Pixel (jeweils die größte Kante) beschränkt, um das Datenaufkommen zu minimieren.
  • Instagram FeedGenauso können Sie einen Instagram-Account einbinden und alle neuen Bilder darstellen. Leider ist hier aus technischen Gründen keine Filterung nach Tags möglich. Auch hier sind Zugangsdaten zur Instagram-Schnittstelle notwendig (s.u.).

Galerie aktiv: hierüber können Sie eine Galerie inaktiv schalten, diese wird dann nicht dargestellt (etwa zur Vorbereitung von neuen Galerien).

Anzeigemodusdiese Option bestimmt die Darstellung der Bild-Übersicht. Masonry stellt die Bilder mit einer Aufteilung ähnlich wie von Pinterest bekannt dar, die Grid-Anzeige dagegen ein Raster mit rechteckigen und gleichgroßen Vorschaubildern.

Hauptbild: Hier kann optional für jede Galerie ein Banner eingepflegt werden, dass über den eigentlichen Galerie-Bildern dargestellt wird.

Kategorie: hierüber kann ebenfalls optional eine Shopware-Kategorie zugeordnet werden, die dann in der Galerie als Button dargestellt wird.

Beschreibung: hier können einige Zeilen Text eingegeben werden, der ebenfalls über den Bildern angezeigt wird. 

Achtung: Wenn Sie für den Galerie-Typ Shopware Medienfeed den Befehl bin/console sw:media:cleanup ausführen, um die Shopware-Medienverwaltung aufzuräumen, kann dies aus technischen Gründen nicht berücksichtigt werden. Schließen Sie daher das zugeordnete Medien-Album in der Medienverwaltung manuell von der Bereinigung aus (Albumeinstellungen / Bereinigung auskreuzen). Für die manuelle Zuordnung von Shopware-Medien ist das nicht notwendig, diese werden korrekt vom Garbage Collector erkannt.


Manuelle Zuordnung von Galerie-Bildern

Beim Galerie-Typ Shopware Medien / freie Eingabe können Sie beliebige Bilder aus der Medienverwaltung zuordnen. Speichern Sie dazu zunächst die neue Galerie einmal ab. Anschließend wird der Tab Medien-Einträge aktiv und Sie können mit einem Klick auf den Tab dorthin wechseln.

Ein Klick auf den Button Bild aus Shopware hinzufügen ruft die bekannte BIld-Auswahl der Medienverwaltung auf. Sie können hier ein auch mehrere Bild(er) zuweisen, die dann in der Liste erscheinen. Eine Umsortierung ist mittels drag & drop möglich. 

Vergessen Sie nicht, zu speichern!

Tipp: unser Plugin erweitert die Medienverwaltung in Shopware, so dass Sie dort auch eine Beschreibung für jedes Bild hinterlegen können.  Wählen Sie dazu die Tabellendarstellung im Medienmanager und klicken Sie doppelt auf das Bild, dass Sie ändern möchten.

Zugangsdaten für Flickr

Einen API-Key können Sie im Flickr-Account unter Teilen und Erweitern / Deine API-Schlüssel anlegen. Kopieren Sie den Schlüssel (nicht den geheimen Schlüssel!) in das Feld Flickr Api Key im Plugin. Die Flickr User Id ist nicht Ihr Flickr-Name! Sie können diese unter http://www.webpagefx.com/tools/idgettr ermitteln. Ersetzen Sie auf dieser Seite username durch Ihren eigenen Flickr-Namen und drücken Sie auf find. Die Id hat die Form 66338512@Nxx.

Zugangsdaten für Instagram

Ein Access-Token (Zugang zur Instagram-Schnittstelle) können Sie am einfachsten unter http://instagram.pixelunion.net/ beziehen. Die Instagram User-ID können Sie unter https://codeofaninja.com/tools/find-instagram-user-id ermitteln.

WordPress-Galerie

Um eine Galerie aus einer WordPress-Instanz einzubinden, benötigen Sie zunächst das (kostenfreies) WordPress-Plugin. Bitte installieren und aktivieren dieses in Ihrer WordPress-Installation.

Anschließend können Sie als Galerie-Typ WordPress-Feed auswählen. Im Feld WordPress URL tragen Sie bitte die vollständige Adresse (inkl. https://) zu Ihrer WordPress-Installation ein, also z.B. https://www.IhrWordPress.de). In das Feld Post Slug tragen Sie bitte den slug des Beitrages ein, von dem Sie die Galerie in Shopware einbinden möchten. 

Im Beitrag selbst können Sie die gewünschten Bilder über eine WordPress-Galerie einfügen. Bilder, die nicht über eine Galerie (also einzeln) eingefügt werden, werden dabei nicht beachtet. Weiterhin wird nur die erste vorhandene Galerie in einem WordPress-Beitrag beachtet.

Einbinden einer Galerie im Frontend

Eine erstellte Galerie können Sie in Shopseiten, Blogbeiträgen, Kategorien (Kategorietext) oder einer Artikelbeschreibung einfügen. Die Vorgehensweise ist dabei immer die selbe:

Fügen Sie den Smarty-Kurzbefehl

{mediagallery key="flickr"}{/mediagallery}

in das entsprechende Editor-Feld ein. Der key (hier: flickr) muss dabei der
vergebenen Galerie-ID entsprechen.

Wichtig: kopieren Sie den obigen Befehl am besten nicht per copy & paste, sondern tippen den Befehl ab. Es kann sonst bei der Datenübernahme in das Editorfenster zu Problemen kommen.

Technische Einschränkungen:

  • es kann nur jeweils eine Galerie in einer Seite vorhanden sein 
  • eine Galerie in der Kategoriebeschreibung kann leider nicht auf Smartphones und Tablets dargestellt werden
  • ist eine Galerie in einem Artikel mit Variantenwechsel eingebunden, so stellen Sie bitte in der Theme-Konfiguration die Option "Variantenwechsel über Ajax" auf AUS.


Bei einer Shopseite sieht das dann z.B. wie folgt aus:

Und das Ergebnis im Frontend:


Einbinden einer Galerie in einer Einkaufswelt

Über das Einkaufswelten-Element Medien-Galerie können Galerien ebenfalls in Einkaufswelten eingebunden werden. In den Einstellungen des Widgets können Sie die gewünschte Galerie auswählen sowie über die Bildbreite die Anzahl der dargestellten Vorschaubilder festlegen. 100% entspricht dabei einem Bild, 50% zwei Bildern, 25% vier Bildern und so weiter. Achten Sie darauf, dem Einkaufswelten-Widget genügend Platz im Raster einzuräumen!

Mit Teaser wird jeweils nur das Galerievorschaubild angezeigt und über den Link zur Galerieseite verlinkt. Bleibt das Feld Link leer wird automatisch zur Galerieseite verlinkt. Andernfalls kann ein beliebiger Link hier eingegeben werden.

Bitte beachten Sie: in einer Einkaufswelt wird nur die Galerie dargestellt, nicht jedoch eine eventuell vorhandene Header-Grafik oder der Galerie-Text. Ebenso wird dort der Mehr laden-Button nicht dargestellt. Dies ist absichtlich so gelöst, da in Einkaufswelten üblicherweise noch weitere Elemente dargestellt werden sollen und hier die Übersicht nicht verloren gehen soll. Sie können alternativ eine Shopseite verwenden, dort werden dann alle Elemente der Galerie angezeigt.

Und noch ein Hinweis: bitte fügen Sie das Einkaufswelten-Widget direkt in eine Einkaufswelt ein. Eine über eine Master-Einkaufswelt "verbundene" Einkaufswelt funktioniert aus technischen Gründen nicht.

Direktaufruf einer Galerie

Eine Galerie kann auch ohne Einbindung über den Shortcode aufgerufen werden. Nutzen Sie hierzu folgende URL:

www.IhrShop.de/NetzpGallery/?gallery=<key>

<key> entspricht dabei der gewünschten Galerie-ID.


Übersicht über alle Galerien

In ähnlicher Art und Weise können Sie eine Übersicht über mehrere oder alle vorhandenen Galerien erzeugen. Der entsprechende Smarty-Kurzbefehl (wiederum für Shopseiten, Blog-Beiträge, Kategorie-Text und Artikelbeschreibung) hierfür lautet:

{mediagalleries group="netzpGalleries"}{/mediagalleries}

Die angegebene Gruppe (hier: netzGalleries) entspricht dem Template key einer Shopseiten-Gruppe. Legen Sie zunächst eine neue Shopseiten-Gruppe (im Backend unter Einstellungen / Grundeinstellungen / Shopseiten-Gruppen) an und vergeben einen beliebigen Namen.
Der hier einzutragende Template-Key entspricht dann der Gruppe (group) für den oben stehenden Kurzbefehl. 

Anschliessend weisen Sie jede Shopseite mit einer Galerie der neu angelegten Shopseiten-Gruppe zu, die in der Übersicht erscheinen soll:

Das Ergebnis im Frontend sollte dann so oder ähnlich aussehen, hier am Beispiel einer Galerie-Übersicht im Kategorietext der Kategorie Kochlust & Provence - Essen - Fisch:



Wir wünschen Ihnen viel Erfolg 
mit unserem Plugin und 
gute Geschäfte mit Shopware.