Einsatz von Isotope Darstellungen für Bildergalerien

Navigation

Nutzbar ab: Version

Veröffentlichungsdatum: 27. Oktober 2015
Änderungsdatum: 04. November 2021

weblication liste bildergalerie jquery plugin isotope mauerwerk kategorienfilter kategorien-filter

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
Beispiel 2: Bilderliste mit Einsatz des Isotope-Plugins

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):

CSS-Only-Variante Liste Mauerwerk-Bilddarstellung

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).

Tipp
Die BASE (Mobile First) bietet bereits im Standard ab CMS-Version 16 mit der Listen-Variante 3601 ("Mauerwerk Bilder dreispaltig mit Lightbox") eine Darstellung rein über CSS.

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:

CSS-Only-Variante Liste Isotope-Bilddarstellung