Einsatz von Isotope Darstellungen für Bildergalerien

Nutzbar ab: Version 010.002.000.000

27. Okt 2015

Unterschiedliche Möglichkeiten, um Bildergalerien in Isotope oder ähnlichen Mauerwerk Layouts darzustellen.

Zur Vielfalt an unterschiedlichen Bildergalerien innerhalb von Weblication® CMS Projekten, können Sie auch externe Plugins wie z.B. die jQuery Plugins Isotope bzw. Masonry nutzen.

Wir zeigen Ihnen nachfolgend Möglichkeiten auf, um eine Listendarstellung von Bildern über Techniken wie z.B. Isotope bzw. rein über CSS3 als Mauerwerk umzusetzen.

Beispiel 1: Bilderliste Mauerwerk über CSS3

Eine Bildergalerie im Mauerwerk-Stil können Sie rein über CSS3 umsetzen, was im folgenden Beispiel aufgezeigt wird.

Weblication® ab CMS 10.x bietet Ihnen hierzu die komfortable Möglichkeit, dies über eine CSS-Only-Variante mit Einsatz von CSS-Only Untervarianten (Subvarianten) in wenigen Zeilen abzubilden.
Nachfolgende Umsetzung basiert auf einem BASE 2.x Projekt mit aktuellem Liste-Weblic® unter Nutzung des Standard-Darstellungstemplates (default.wFilelist.php).

Um die Liste nach Kategorien filtern zu können, fügen Sie über dem Listen-Element das Weblic® / Strukturelement "Kategorienfilter" ein. In den Einstellungen zum Kategorienfilter verweisen Sie auf die gleiche Kategoriendatei, welche auch für die Kategorienzuweisung der Bilder verwendet wird und wählen in der Maske die Listen-ID aus, auf die sich der Quickfilter zum entsprechenden Listenelement beziehen soll (z.B. list_324928fb).
In den Listenoptionen wählen Sie als "Template für die Ergebnisliste" das Standard-Template (default.wFilelist.php) aus und setzen das Layout auf die nachfolgend beispielhaft anfgeführte CSS-Only-Variante 3601 "Mauerwerk Bilder dreispaltig". Im Feld "Kategorien für Quickfilter" geben Sie den xpath an, unter welchem die Kategorien in den auszulesenden Dateien zu finden sind (z.B. /wd:extension/wd:meta/wd:categories).

CSS-Only-Variante im Mauerwerk-Stil über CSS3

/*@wCssFragment{class:listDefault;variant:3601;caption:Mauerwerk Bilder dreispaltig mit Fancybox;caption-en:Masonry Pictures three columns with fancybox}*/
.listDefault_var3601                                                 {display:inline-block;margin-right:0;border:none;-moz-column-count:3;-moz-column-gap:0;-moz-column-width:33.333%;-webkit-column-count:3;-webkit-column-gap:0;-webkit-column-width:33.333%;column-count:3;column-gap:0;column-width:33.333%;-w-usefancybox:yes;-w-editmaskExtended-categoriesquickfilter:yes}
.listDefault_var3601 .listEntry                                      {display:inline-block;overflow:visible;box-sizing:border-box;border:none;padding:1px;margin:0 2px}
.listDefault_var3601 .listEntry:hover                                {background:none}
.listDefault_var3601 .listEntryInner                                 {position:relative;overflow:hidden;height:100%;margin:0;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;border:none}
.listDefault_var3601 .listEntry .beButtonEditRow                     {position:absolute;top:3px;right:46px}
.listDefault_var3601 .listEntry .beButtonDeleteRow                   {position:absolute;top:3px;right:22px}
.listDefault_var3601 .listEntryInner:after                           {content:'';display:block;clear:both;width:0px;height:0px}
.listDefault_var3601 .listEntryQuickfilterVisible   .listEntryInner  {transition:all 0.2s ease-in-out;transform:scale(1)}
.listDefault_var3601 .listEntryQuickfilterInvisible .listEntryInner  {transform:scale(0.8);height:0;padding:0}
.listDefault_var3601 .listEntryQuickfilterChanged   .listEntryInner  {transition:all 0s ease-in-out;transform:scale(0.8);height:0}
.listDefault_var3601 .listEntryQuickfilterVisible                    {transition:all 0.3s linear;opacity:1}
.listDefault_var3601 .listEntryQuickfilterInvisible                  {display:none;opacity:0}
.listDefault_var3601 .listEntryQuickfilterChanged                    {transition:all 0s linear;opacity:0}
.listDefault_var3601 .listEntryTitle                                 {display:none;-w-display:none}
.listDefault_var3601 .listEntryDescription                           {display:none;-w-display:none}
.listDefault_var3601 .listEntryThumbnailOuter                        {overflow:hidden}
.listDefault_var3601 .listEntryThumbnail                             {-w-add-classes:wglFancybox;width:100%;height:auto;margin:0;display:block;float:none}
.listDefault_var3601 .listEntryDate                                  {display:none;-w-display:none}
.listDefault_var3601 .listEntryMoreOnly                              {}

@media only screen and (max-width: 540px){
  .listDefault_var3601                                               {margin-right:0;border:none;-moz-column-count:2;-moz-column-gap:0;-moz-column-width:50%;-webkit-column-count:2;-webkit-column-gap:0;-webkit-column-width:50%;column-count:2;column-gap:0;column-width:50%}
}

@media only screen and (max-width: 400px){
  .listDefault_var3601                                               {margin-right:0;border:none;-moz-column-count:1;-moz-column-gap:0;-moz-column-width:100%;-webkit-column-count:1;-webkit-column-gap:0;-webkit-column-width:100%;column-count:1;column-gap:0;column-width:100%}
}

Für CMS-Versionen ab 10.x finden Sie diese Variante 3601 in aktueller Fassung als CSS-Only-Variante auch zum direkten Installieren (reine CSS-Only Umsetzung):

Liste Mauerwerk - Kategorienfilterzoom
Liste Mauerwerk - Kategorienfilter
Liste Mauerwerk - Listenoptionenzoom
Liste Mauerwerk - Listenoptionen
Liste über CSS3 (Mauerwerk)zoom
Liste über CSS3 (Mauerwerk)
 
Sofern Sie für den Quickfilter eine andere Kategoriendatei als die standardmäßig hinterlegte standard.wCategories.php verwenden, passen Sie die Standard-Dateieinstellungen für die Bilder entsprechend an. Das Beispiel oben verwendet eine andere Kategoriendatei, weshalb dort eine andere "Maske Metadaten" in den Standard-Dateieinstellungen verknüpft wurde (isotope.extension.php ), welche auf die individuelle Kategoriendatei verweist (isotope.wCategories.php).

Beispiel 2: Bilderliste mit Einsatz des Isotope-Plugins

Eine Bildergalerie im Isotope-Stil können Sie z.B. mit dem jQuery-Plugin Isotope umsetzen, was im folgenden Beispiel aufgezeigt wird.

Weblication® ab CMS 10.x bietet Ihnen hierzu die komfortable Möglichkeit, dies über eine CSS-Only-Variante mit Einsatz der Isotop-Javascript Bibliothek abzubilden. Beachten Sie beim Einsatz die Lizenzbestimmungen zu Isotope!
Nachfolgende Umsetzung basiert auf einem BASE 2.x Projekt mit aktuellem Liste-Weblic® unter Nutzung des Standard-Darstellungstemplates (default.wFilelist.php). Das Isotope-JS wird über die CSS-Only-Eigenschaft -w-registerJs für die Listenausgabe referenziert.

Um die Liste nach Kategorien filtern zu können, fügen Sie über dem Listen-Element das Weblic® / Strukturelement "Kategorienfilter" ein. In den Einstellungen zum Kategorienfilter verweisen Sie auf die gleiche Kategoriendatei, welche auch für die Kategorienzuweisung der Bilder verwendet wird und wählen in der Maske die Listen-ID aus, auf die sich der Quickfilter zum entsprechenden Listenelement beziehen soll (z.B. list_d71daad3).
In den Listenoptionen wählen Sie als "Template für die Ergebnisliste" das Standard-Template (default.wFilelist.php) aus und setzen das Layout auf die nachfolgend beispielhaft anfgeführte CSS-Only-Variante 10999 "Isotope Bilder dreispaltig". Im Feld "Kategorien für Quickfilter" geben Sie den xpath an, unter welchem die Kategorien in den auszulesenden Dateien zu finden sind (z.B. /wd:extension/wd:meta/wd:categories).

CSS-Only-Variante mit Einbinden des Isotope-Plugins

/*@wCssFragment{class:listDefault;variant:10999;caption:Isotope Bilder dreispaltig;caption-en:Isotope Pictures three columns}*/
.listDefault_var10999                                                     {-w-registerJs://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.min.js;border-top:none;-w-editmaskExtended-categoriesquickfilter:yes;-w-jquery:jQuery(this).prepend('<li class="sizer"></li>')\3BjQuery(window).load(function()\7BjQuery(".listDefault_var10999").isotope()\7D);-w-add-data:eventafterquickfilter=jQuery(".listDefault_var10999").isotope()}
.listDefault_var10999 .listEntry                                          {-w-usefancybox:yes;width:33.33%;box-sizing:border-box;border:none;padding:0 0 0 0;padding:1px;margin:0px}
.listDefault_var10999 .sizer                                              {width:33.33%}
.listDefault_var10999 .listEntry:hover                                    {z-index:1;box-shadow:0 0 4px rgba(0, 0, 0, 0.5)}
.listDefault_var10999 .listEntryInner                                     {position:relative;overflow:hidden;height:100%;margin:0;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;border:none}
.listDefault_var10999 .listEntry .beButtonEditRow                         {position:absolute;top:3px;right:46px}
.listDefault_var10999 .listEntry .beButtonDeleteRow                       {position:absolute;top:3px;right:22px}
.listDefault_var10999 .listEntryInner:after                               {content:'';display:block;clear:both;width:0px;height:0px}
.listDefault_var10999 .listEntryThumbnailOuter                            {overflow:hidden;margin:0 0 0}
.listDefault_var10999 .listEntryThumbnail                                 {-w-picture-mode:embed;margin:0;width:100%;-w-add-classes:wglFancybox;}
.listDefault_var10999 .listEntryTitle                                     {display:block;opacity:0;position:absolute;bottom:5%;left:0;width:90%;box-sizing:border-box;-moz-box-sizing:border-box;background-color:#ffffff;background-color:rgba(255, 255, 255, 0.8);margin:0 5%;padding:10px 10px;transition:all 0.5s ease-in-out;}
.listDefault_var10999 .listEntry:hover .listEntryTitle                    {display:block;opacity:1}
.listDefault_var10999 .listEntryTitle > a                                 {color:#000000;}
.listDefault_var10999 .listEntrySize                                      {display:none}
.listDefault_var10999 .listIcon                                           {display:none}
.listDefault_var10999 .listEntryDescription                               {display:none}
.listDefault_var10999 .listEntryQuickfilterVisible                        {}
.listDefault_var10999 .listEntryQuickfilterInvisible                      {display:none}

/* Beachten Sie die Hinweise unten zu den Isotope Lizenzbestimmungen! */

Diese ab CMS 10.x lauffähige CSS-Only-Variante mit Isotope-Plugin steht aufgrund von Lizenzbestimmungen nicht zur Installation bereit! Ein Beispiel dieser Umsetzung finden Sie hier:

Liste mit Isotope-Plugin - Kategorienfilterzoom
Liste mit Isotope-Plugin - Kategorienfilter
Liste mit Isotope-Plugin - Listenoptionenzoom
Liste mit Isotope-Plugin - Listenoptionen
Liste mit Isotope-Pluginzoom
Liste mit Isotope-Plugin
 
Achten Sie beim Einsatz von externen Plugins (wie z.B. Isotope oder Masonry) auf die Einhaltung der jeweiligen Lizenzbestimmungen!

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG