Loops

Loops sind wiederholbare und angepasste Codeblöcke. Im Gegensatz zu den Elementen werden die Loops komplett über die Vision Oberfläche erstellt. So kann deine Seite auch ohne Dateizugriff und Kenntnisse in PHP erweitert werden. Schauen wir uns das ganze Mal an! 

Schritt 1: Elementvorlage

Zuerst benötigen wir einen Ausgangspunkt. Dazu müssen wir eine Elementvorlage einrichten. 

Weitere Informationen
Wie man diese Vorlage konfiguriert und befüllt, erklären wir dir hier.
➜  Elemenvorlagen

Schritt 2: Loop aufbauen

Sobald die Vorlage eingerichtet ist, können wir nun den Loop aufbauen. Dazu öffnen wir einen bereits vorhandenen Loop, welcher als Vorlage dienen kann. Wir benennen den Loop um und speichern ihn als neuen Loop ab. Anschließend befüllen wir den Loop mit Code. An dieser Stelle bleiben wir bei dem Beispiel aus dem Elementvorlagen-Artikel. Wir haben hier ein Bilderkarussell, welche wir gerne wiederholbar und dynamisch haben möchten. 

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Code aufteilen 

Der Code eines Loops wird nach folgendem Schema aufgeteilt:

1. Alles was vor dem Loop passiert
2. Das zu wiederholende Codefragment
3. Alles was danach geschieht

Teilen wir also dieses Karussell mal gedanklich auf. Wir haben zwei Boxen, welche drei Boxen einschließen, worin sich jeweils ein Bild befindet. Also trennen wir die beiden umschließenden Boxen von den drei Boxen im Inneren. Damit haben wir Punkt 1 und Punkt 2 abgearbeitet. 

Zur Hilfe hier eine kurze Übersicht.

Alles was vor dem Loop passiert

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">

Das zu wiederholende Codefragment

<div class="carousel-item active">
	<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
	<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
	<img class="d-block w-100" src="..." alt="Third slide">
</div>

Alles was danach geschieht

	</div>
</div>

Kommen wir nun zu Punkt 2. Hier nehmen wir uns beispielhaft einer dieser Boxen und nutzen Grundlage für unseren Loop. Und tragen den extrahierten Code in unseren Loop ein. 

<div class="carousel-item active">
	<img class="d-block w-100" src="..." alt="First slide">
</div>

Code dynamisch gestalten

Jetzt machen wir das Ganze noch dynamisch. Dazu schauen wir uns kurz nochmal den Aufbau an. Hierbei haben wir eine Box mit ein paar Klassen zum Style. Die können wir eigentlich so lassen, wie sie ist. Im inneren haben wir allerdings ein Bild, welches wir austauschen möchten.

Das ganze besteht ebenfalls aus einer Klassendeklaration für den Style des Bildes. Dem src-Attribut, welcher die Quelle enthält und dem Alt-Attribut, welches nicht nur die Suchbarkeit in der Suchmaschine deiner Wahl verbessert, sondern auch für einen Alternativtext sorgt, falls das Bild nicht angezeigt werden sollte.

Die Klassendeklaration können wir in Ruhe lassen. Im src-Attribut brauchen wir den Pfad unseres Bildes, damit das Bild angezeigt werden kann. Hier nehmen wir also auf jeden Fall den Tag [[image]]. Wie groß soll das Karussell werden? Soll es die ganze Seite umspannen? [[image_1200]]Ansonsten ist in den meisten Fällen der 400er Tag ausreichend. [[image_400]]

Dann brauchen wir noch das alt-Attribut. Dieses haben wir in der Elementvorlage bereits eingerichtet und wählen hier [[value1]] aus und speichern anschließend den Loop. Im Anschluss sollte das ganze so aussehen:

<div class="carousel-item active">
	<img class="d-block w-100" src="[[img_400]]" alt="[[value1]]">
</div>

Schritt 3: Loop platzieren

Jetzt müssen wir uns fragen, auf welchen Seiten und wo der Loop auf den Seiten angezeigt werden soll. Dazu gehen wir in die Seitenstruktur und schauen uns an, welches Template für die jeweilige Seite verwendet wird. Nehmen wir mal als Beispiel die Startseite, welche das Startseiten-Template verwendet.  

Jetzt müssen wir den Loop platzieren. Dazu gehen wir ins Template und platzieren den Loop an der gewünschten Stelle. Anschließend speichern wir das Template.

Schritt 4: Loop freischalten

Wenn der Loop platziert ist, erteilen wir ihm die Freigabe für die Befüllung. Den Loop findest du in der gleichen Auflistung wie die anderen Elemente.

Nun, da die Freigabe erteilt ist, können wir den Loop wie ein neues Element erstellen, bearbeiten und befüllen.