[Gelöst] Dynamischer Image Slider im Layout

[Author]

Artikel

[ReneA3885]

Wenn man ein Layout bearbeitet hat man ja auch die Möglichkeit einen Slider einzufügen.
Dann kann man da ja mehrere Bilder fest auswählen usw.
Diese würden ja dann bei allen Post gleich sein.

Nun hätte ich gerne einen dynamischen Slider.

Das heißt ich das ich zum Beispiel meinem Posttyp mehre Benutzerdefinierte Felder hinterlege z.B. Bild1, Bild2, Bild3.
Dort wähle ich dann für jeden Post andere Bilder aus.
Der Slider liest das dann dynamisch aus und bringt entsprechend dem aktuellen Post die Bilder die dazugehören.

Ist soetwas in der Art möglich?

[Beda]

Ja, aber nicht direkt in Layouts.

Dazu müsstest Du diese DOC konsultieren und eine View bauen, die die Felder in einem slider rendert:
https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/

Wir haben auch Pakete die direkt installiert und gebraucht werden können dazu:
https://toolset.com/documentation/user-guides/using-toolset-module-manager/#toolset-module-library

[ReneA3885]

Ich möchte ja nur innerhalb eines Posts dessen Felder z.B. Bild 1 bis Bild 5 durchschleifen.
Wenn ich es richtig gesehen habe, kann ich mit dem Loop aber ja nur Posts durchschleifen und nicht innerhalb eines Posts die Felder.
Oder habe ich da was übersehen?

[Beda]

Also, da kommt es darauf an ob das Repeating Fields oder Repeatable Fields Groups sind.

Wenn Du das einfach nur ein Image Feld brauchst, das "mehrere werte haben kann", dann kannst Du dieses Plugin installieren um ein Slider daraus zu machen:

Wenn Du nun Repeatable Field Groups (RFG), also die neue Feature wo do ganze Feld Gruppen wiederholen kannst, gebrauchst, dann sieht das ganz anders aus.

Aber ich denke, Du brauchst das "einfache" Image Feld mit wiederholenden werten.
Damit, währe das Plugin oben ganz gut.

1. Download: versteckter Link
2. Dies ist die HTML Struktur die Du dann generier musst:

<div class="flexslider">
<ul class="slides">
 	<li><img src="slide1.jpg" /></li>
 	<li><img src="slide2.jpg" /></li>
 	<li><img src="slide3.jpg" /></li>
 	<li><img src="slide4.jpg" /></li>
</ul>
</div>

Das kann natürlich mit ShortCoden gemacht werden, anstatt es hard code zu schreiben.
3. Im JS editor müsste dann noch dies gebraucht werden:

// Can also be used with $(document).ready()
jQuery(window).load(function() {
  jQueyr('.flexslider').flexslider({
    animation: "slide"
  });
});

Das ist dasselbe wie ich oben gelinkt habe, was Dir erlauben wird, loops durch eines posts Felder zu erstellen und diese als slider zu zeigen.

Loops können auch in einer view, die bloss ein Post wiedergibt erstellt werden.
Mit dem wpv-foreach shortcode kannst Du dann einzelne (wiederholenden) Felder anbringen.
https://toolset.com/documentation/user-guides/views-shortcodes/#vf-153482

Anderseits, kann auch der Separator des wiederholendes Feldes mit HTML gestylt werden, so kannst Du zbsp die Images als Liste, oder komplexere HTML Strukturen ausbringen

[ReneA3885]

Das interessantere wäre schon die Standard Slider Funktion, da hier mit Lazyloading gearbeitet wird - wenn ich es richtig verstanden habe.
Es wird der Inhalt ja erst geladen wenn er sichtbar ist bzw. kann man ja auch einstellen wieviel Elemente vorgeladen werden sollen.
Allerdings ist die Optik nicht ganz so ansprechend.
Warum hat man hier nicht die Standard-Styles vom Bootstrap Carrousell gewählt?

Ich hatte es jetzt nun mit den "Repeatable Field Groups" probiert, allerdings habe ich hier das Problem das er dann immer das Original Bild rein laden will. Es könnte aber auch Sinn machen eine der Vorschau-Varianten auszuwählen.
Aber das ist ja hier nicht machbar - oder?

Die "Reapeatable Fields" sind ja dann nicht als Slider einsetzbar mit Lazyload verhalten - oder?
Was hier allerdings wieder gut funktioniert ist, dass man eine Vorschau-Variante auswählen kann.

[ReneA3885]

Hups war zu schnell.
Habe mir das nochmal angesehen - bei dem Slider ist es ja doch möglich eine Vorschau-Variante des Bildes auszuwählen.
Jetzt wäre nur noch die Frage nach dem Style der ein bisschen mehr an das Bootstrap Caroussell angelehnt sein soll.

Mal so nebenbei:
Das Toolset ist ein richtig krass mächtiges Tool - ist ja echt der Wahnsinn was man damit alles machen kann.

[Beda]

Gut dass das funktioniert hat.

Nun, Toolset ist weniger auf style und mehr auf Struktur fokussiert, deshalb brauchen wir oft entweder gar keine styles oder nur sehr minimale.
Das slider packet ist nicht auf Bootstrap basiert, somit ist es ein anderes "Gerüst"

Allfälligen styles in Toolset sollten von Hand hinzugefügt werden, mit CSS oder JS.

Bootstrap ist natürlich integriert, man kann es dennoch sogar deaktivieren falls nicht benötigt, in Toolset > Settings.

Aber das ist nicht mit dem slider packet verbunden.
Das sind starter Pakete, die zur kickstart einer Entwicklung von uns zur Verfügung gestellt werden.