Sehr geehrte Shopbetreiber,
ab heute ist es möglich in POWERGAP Galerien anzulegen, welche sich dynamisch der Bildschirmauflösung anpassen. Da hier auch die Möglichkeit gegeben ist Meta-Informationen der Bilder zu pflegen (pro Bild einzeln) bietet sich damit eine hervorragende Möglichkeit sein SEO-Ergebnis etwas zu verbessern.
hier das Video Tutorial zum Feature ansehen
Vorab: Damit zu den einzelnen Galerien auch DHE-Links erstellt werden muss noch über „Sonstiges“ > „Server“ > „DHE“ > „Sonstige Einstellungen“ im Feld „Präfix Galerie“ ein Link-Präfix definiert werden.
Zudem sollten Sie das folgende CSS über „Layout“ > „Schriften / CSS“ > „ALL (ROOT)“ bzw. „MOBILE“ in die CSS-Dateien kopieren:
.picThumb{display:block;padding:3px;min-height:142px;float:left}
.picThumb *{margin:0;padding:0;}
.picThumb p{text-align: center; padding-top: 4px; position: absolute; margin-top: -26px; width: 98%; height: 20px;
display: block; color: white; background: rgba(20,20,20,0.5);}
.galerie{height:12000px !important;position:relative;}
.galerie.mobileGalerie{zoom:50%;-moz-zoom:50%;-webkit-zoom:50%;-ms-zoom:50%}
.powerViewer{position:fixed;background:rgba(20,20,20,0.9) url(https://cdn.powergap.de/v_loader3.gif) no-repeat 50% 50%;display:none;top:0;left:0;opacity:0;transition:opacity 0.5s;}
.powerViewer.open{height:100%;width:100%;opacity:1;display:block;z-index:100000}
.powerViewer img{display:block;margin:0;position:relative;}
.pVUtil{position:absolute;font-size:70px;cursor:pointer;color:white;opacity:0.5;transition:opacity 0.5s;}
.pVnext{right:0;transition:right 0.5s;}
.pVnext:hover{right:-5px;}
.pVprev{left:0;transition:left 0.5s;}
.pVprev:hover{left:-5px;}
.pVnext,.pVprev{top:100px;padding:0 7px}
.pVUtil:hover{opacity:1;}
.pVclose{right:30px;top:30px;}
.galThumb{margin:0;padding:3px;float:left}
.galThumb.mobilegalThumb{zoom:50%;-moz-zoom:50%;-webkit-zoom:50%;-ms-zoom:50%}
Um zu starten finden Sie unter „Layout“ den neuen Menüpunkt „Galerien“. Sobald Sie auf „Neue Galerie anlegen“ geklickt haben bieten sich eine Vielzahl von Pflegemöglichkeiten an:
Bezeichnung Intern: Ist lediglich eine Shopverwaltungs-interne Bezeichnung für die Galerie die in der Übersicht auftaucht.
Thumb-Maße: Um die Vorschau für die Galerie schön aussehen zu lassen braucht man gute Thumbs die im Layout aufgehen. Man kann entweder für jedes Bild ein eigenes Thumb festlegen oder automatisch welche erzeugen lassen, dafür sind die folgenden Einstellungen.
Breite / Höhe: Wenn ein Bild quer ist wird der Wert der Höhe genommen um die Breite zu errechnen. Ist es hochkant wird der Wert für die Höhe genommen. Um z.B. ein gutes Ergebnis für eine Masonry Galerie zu bekommen empfiehlt sich ein Format von 2:1 bzw. 1:2.
Padding: Das Padding (Abstand zwischen den einzelnen Bildern) zwischen den Bildern wird eigentlich in der CSS definiert, aber zur Berechnung der Varianz-Thumbs wird es noch als fester Wert benötigt.
Varianz: Hier ist ein Wert von 0 – 100% möglich, dieser bestimmt die prozentual Wahrscheinlichkeit wie oft von Bildern ein Thumb generiert wird, welches doppelt so groß ist wie die anderen um z.B. bei einem Masonry Layout ein wenig Abwechslung zu bekommen.
Galerie-Vorschaubild: Das Galerie-Vorschaubild wird benutzt, wenn die Galerie in z.B. einem HTML oder ähnlichem über das Synonym #galerie_...# genutzt wird.
Mit Klick auf den „Auswählen“-Button öffnet sich der IMG-Explorer welcher nur Bilder anzeigt. Klickt man nun auf ein Bild wird entsprechendes Bild ausgewählt und als „Galerie-Vorschaubild“ definiert. Mit Klick auf „ja“ schließt sich die Maske und das ausgewählte Bild wird übernommen. Mit Klick auf „nein“ kann man statt des ausgewählten ein anderes Bild auswählen.
Pro Sprache gibt es die Möglichkeit eine Überschrift, Meta-Title, Meta-Description und Meta-Keywords zu pflegen.
Schlussendlich kann man das Template für die Galerie pflegen. Wenn sie neu angelegt oder geleert wird, wird es automatisch mit einem Standard Template (
Bleiben noch die folgenden Buttons:
Klick auf„Vorschau“ öffnet die Galerie wie sie im Shop angezeigt, so wie diese aktuell auch für den Kunden sichtbar wäre.
Klick auf „Bilder Hinzufügen“ öffnet den IMG-Explorer in dem mit Klick auf „Nur Bilder dieser Galerie anzeigen“ eine Maske mit Sonderfunktionen öffnet.
In dieser Ansicht können Sie wie gewohnt Bilder im IMG-Explorer hochladen und suchen. Klicken Sie auf ein Bild wird es sofort der Galerie zugeordnet, dies wird durch den grünen Haken verdeutlicht. Entfernen können Sie es mit einem erneuten Klick.
Wenn Sie auf den großen grünen Button klicken „Nur Bilder dieser Galerie anzeigen“, werden nur Bilder der aktuellen Galerie angezeigt. Zudem haben Sie jetzt drei mögliche „Sonderfunktionen“:
Aktuelle Ansicht: zeigt alle Bilder der Galerie und gibt die Möglichkeit Bilder per Klick auszuschließen.
Neue Bilder Hinzufügen (alle anzeigen): Hiermit kommen Sie zur ersten Ansicht zurück und Sie können neue Bilder für die Galerie auswählen.
Sortieren: Hier können Sie via Drag & Drop die Reihenfolge der Bilder bestimmen. Bitte beachten Sie, dass gerade beim Masonry-Style die Sortierung nie 100% eingehalten werden kann.
Details, Titles, etc..: Hier können Sie zu jedem Bild für jede Sprache Meta-Informationen pflegen. Zusätzlich können Sie ein eigenes Thumb als Link hinterlegen. Bitte immer Format „img/[Bildname]“ angeben. Mit dem Feld „Link“ kann man frei bestimmen wohin der Kunde geführt werden soll, wenn er auf das Thumb klickt. Z.B: zu einem Artikel, eine 3D-Ansicht etc.
ACHTUNG: Wenn Sie das Bild aus der Galerie nehmen werden ALLE INFOMRATIONEN gelöscht.
Über das „blaue Fragezeichen-Icon“ rechts oben in der Ecke finden Sie jeweils gesonderte Informationen zu den Masken in denen Sie sich befinden.
Sind alle gewünschten Dinge definiert und eingestellt können Sie das kleine Fenster schließen und die Galerie speichern.
Die Galerien können in der Mobile-Version an jeder Stelle verwendet werden und in der Desktop Version in den HTML-Includes, in den Artikeldetailanzeigen und auf den Startseiten.
#galerie_[Galerien Ids]#[optionen]#
BSP 1): #galerie_1## Zeigt das Thumb der Galerie mit der Description an, zusätzlich ist es mit der Galerie verlinkt.
BSP 2): #galerie_1,2,3## Zeigt die Thumbs der Galerien 1,2 und 3 an.
Sie können mit den Optionen auch noch andere Dinge steuern:
„offen“: Bildet direkt die gesamte Galerie mit Ihrem Template ab.
„Überschrift“: Fügt zu dem Template noch Überschriften hinzu.
BSP 1): #galerie_1,2#offen# Bildet Galerie 1 und 2 hintereinander ab.
BSP 2). #galerie_1,2#offen,Überschrift# Bildet Galerie 1 und 2 mit Überschriften hintereinander ab.
Sollten zu diesem Thema noch Fragen oder Wünsche offen sein, dann zögern Sie nicht uns Bescheid zu geben.
ab heute ist es möglich in POWERGAP Galerien anzulegen, welche sich dynamisch der Bildschirmauflösung anpassen. Da hier auch die Möglichkeit gegeben ist Meta-Informationen der Bilder zu pflegen (pro Bild einzeln) bietet sich damit eine hervorragende Möglichkeit sein SEO-Ergebnis etwas zu verbessern.
hier das Video Tutorial zum Feature ansehen
Vorab: Damit zu den einzelnen Galerien auch DHE-Links erstellt werden muss noch über „Sonstiges“ > „Server“ > „DHE“ > „Sonstige Einstellungen“ im Feld „Präfix Galerie“ ein Link-Präfix definiert werden.
Zudem sollten Sie das folgende CSS über „Layout“ > „Schriften / CSS“ > „ALL (ROOT)“ bzw. „MOBILE“ in die CSS-Dateien kopieren:
.picThumb{display:block;padding:3px;min-height:142px;float:left}
.picThumb *{margin:0;padding:0;}
.picThumb p{text-align: center; padding-top: 4px; position: absolute; margin-top: -26px; width: 98%; height: 20px;
display: block; color: white; background: rgba(20,20,20,0.5);}
.galerie{height:12000px !important;position:relative;}
.galerie.mobileGalerie{zoom:50%;-moz-zoom:50%;-webkit-zoom:50%;-ms-zoom:50%}
.powerViewer{position:fixed;background:rgba(20,20,20,0.9) url(https://cdn.powergap.de/v_loader3.gif) no-repeat 50% 50%;display:none;top:0;left:0;opacity:0;transition:opacity 0.5s;}
.powerViewer.open{height:100%;width:100%;opacity:1;display:block;z-index:100000}
.powerViewer img{display:block;margin:0;position:relative;}
.pVUtil{position:absolute;font-size:70px;cursor:pointer;color:white;opacity:0.5;transition:opacity 0.5s;}
.pVnext{right:0;transition:right 0.5s;}
.pVnext:hover{right:-5px;}
.pVprev{left:0;transition:left 0.5s;}
.pVprev:hover{left:-5px;}
.pVnext,.pVprev{top:100px;padding:0 7px}
.pVUtil:hover{opacity:1;}
.pVclose{right:30px;top:30px;}
.galThumb{margin:0;padding:3px;float:left}
.galThumb.mobilegalThumb{zoom:50%;-moz-zoom:50%;-webkit-zoom:50%;-ms-zoom:50%}
Um zu starten finden Sie unter „Layout“ den neuen Menüpunkt „Galerien“. Sobald Sie auf „Neue Galerie anlegen“ geklickt haben bieten sich eine Vielzahl von Pflegemöglichkeiten an:
Bezeichnung Intern: Ist lediglich eine Shopverwaltungs-interne Bezeichnung für die Galerie die in der Übersicht auftaucht.
Thumb-Maße: Um die Vorschau für die Galerie schön aussehen zu lassen braucht man gute Thumbs die im Layout aufgehen. Man kann entweder für jedes Bild ein eigenes Thumb festlegen oder automatisch welche erzeugen lassen, dafür sind die folgenden Einstellungen.
Breite / Höhe: Wenn ein Bild quer ist wird der Wert der Höhe genommen um die Breite zu errechnen. Ist es hochkant wird der Wert für die Höhe genommen. Um z.B. ein gutes Ergebnis für eine Masonry Galerie zu bekommen empfiehlt sich ein Format von 2:1 bzw. 1:2.
Padding: Das Padding (Abstand zwischen den einzelnen Bildern) zwischen den Bildern wird eigentlich in der CSS definiert, aber zur Berechnung der Varianz-Thumbs wird es noch als fester Wert benötigt.
Varianz: Hier ist ein Wert von 0 – 100% möglich, dieser bestimmt die prozentual Wahrscheinlichkeit wie oft von Bildern ein Thumb generiert wird, welches doppelt so groß ist wie die anderen um z.B. bei einem Masonry Layout ein wenig Abwechslung zu bekommen.
Galerie-Vorschaubild: Das Galerie-Vorschaubild wird benutzt, wenn die Galerie in z.B. einem HTML oder ähnlichem über das Synonym #galerie_...# genutzt wird.
Mit Klick auf den „Auswählen“-Button öffnet sich der IMG-Explorer welcher nur Bilder anzeigt. Klickt man nun auf ein Bild wird entsprechendes Bild ausgewählt und als „Galerie-Vorschaubild“ definiert. Mit Klick auf „ja“ schließt sich die Maske und das ausgewählte Bild wird übernommen. Mit Klick auf „nein“ kann man statt des ausgewählten ein anderes Bild auswählen.
Pro Sprache gibt es die Möglichkeit eine Überschrift, Meta-Title, Meta-Description und Meta-Keywords zu pflegen.
Schlussendlich kann man das Template für die Galerie pflegen. Wenn sie neu angelegt oder geleert wird, wird es automatisch mit einem Standard Template (
#ueberschrift
#galerie#masonry) gefüllt. Möchte man die Galerie nicht automatisch im Masonry-Style (Mauerwerk-Optik) so kann man das Synonym „#masonry“ entfernen und die Galerie selbst stylen.Bleiben noch die folgenden Buttons:
Klick auf„Vorschau“ öffnet die Galerie wie sie im Shop angezeigt, so wie diese aktuell auch für den Kunden sichtbar wäre.
Klick auf „Bilder Hinzufügen“ öffnet den IMG-Explorer in dem mit Klick auf „Nur Bilder dieser Galerie anzeigen“ eine Maske mit Sonderfunktionen öffnet.
In dieser Ansicht können Sie wie gewohnt Bilder im IMG-Explorer hochladen und suchen. Klicken Sie auf ein Bild wird es sofort der Galerie zugeordnet, dies wird durch den grünen Haken verdeutlicht. Entfernen können Sie es mit einem erneuten Klick.
Wenn Sie auf den großen grünen Button klicken „Nur Bilder dieser Galerie anzeigen“, werden nur Bilder der aktuellen Galerie angezeigt. Zudem haben Sie jetzt drei mögliche „Sonderfunktionen“:
Aktuelle Ansicht: zeigt alle Bilder der Galerie und gibt die Möglichkeit Bilder per Klick auszuschließen.
Neue Bilder Hinzufügen (alle anzeigen): Hiermit kommen Sie zur ersten Ansicht zurück und Sie können neue Bilder für die Galerie auswählen.
Sortieren: Hier können Sie via Drag & Drop die Reihenfolge der Bilder bestimmen. Bitte beachten Sie, dass gerade beim Masonry-Style die Sortierung nie 100% eingehalten werden kann.
Details, Titles, etc..: Hier können Sie zu jedem Bild für jede Sprache Meta-Informationen pflegen. Zusätzlich können Sie ein eigenes Thumb als Link hinterlegen. Bitte immer Format „img/[Bildname]“ angeben. Mit dem Feld „Link“ kann man frei bestimmen wohin der Kunde geführt werden soll, wenn er auf das Thumb klickt. Z.B: zu einem Artikel, eine 3D-Ansicht etc.
ACHTUNG: Wenn Sie das Bild aus der Galerie nehmen werden ALLE INFOMRATIONEN gelöscht.
Über das „blaue Fragezeichen-Icon“ rechts oben in der Ecke finden Sie jeweils gesonderte Informationen zu den Masken in denen Sie sich befinden.
Sind alle gewünschten Dinge definiert und eingestellt können Sie das kleine Fenster schließen und die Galerie speichern.
Verwendung:
Die Galerien können in der Mobile-Version an jeder Stelle verwendet werden und in der Desktop Version in den HTML-Includes, in den Artikeldetailanzeigen und auf den Startseiten.
Die Synonyme:
Um eine Galerie auf diesen Seiten anzuzeigen verlinken Sie entweder auf diese oder benutzen folgendes Synonym :#galerie_[Galerien Ids]#[optionen]#
BSP 1): #galerie_1## Zeigt das Thumb der Galerie mit der Description an, zusätzlich ist es mit der Galerie verlinkt.
BSP 2): #galerie_1,2,3## Zeigt die Thumbs der Galerien 1,2 und 3 an.
Sie können mit den Optionen auch noch andere Dinge steuern:
„offen“: Bildet direkt die gesamte Galerie mit Ihrem Template ab.
„Überschrift“: Fügt zu dem Template noch Überschriften hinzu.
BSP 1): #galerie_1,2#offen# Bildet Galerie 1 und 2 hintereinander ab.
BSP 2). #galerie_1,2#offen,Überschrift# Bildet Galerie 1 und 2 mit Überschriften hintereinander ab.
Sollten zu diesem Thema noch Fragen oder Wünsche offen sein, dann zögern Sie nicht uns Bescheid zu geben.