webpage component usage

webpage/content/3-strapi/3-usage.typ

@@ -18,18 +18,109 @@ Komponenten aus `shared` werden verwendet, um Inhalte aus anderen Listen verwend
 
 === Dynamic Zone
 
+#wrap-content(
+  figure(
+    image("../../images/gallery.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Galerie*
 
+Die Komponente Galerie ermöglicht die Anzeige mehrerer Bilder in einer Gitteransicht.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/full-text.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Voll-Text*
 
+Die reine Text-Komponente ermöglicht das schreiben längerer Berichte. So zum Beispiel auch das Impressum oder die Datenschutzerklärung.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/full-image.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Voll-Bild*
 
+Einzelne Bilder können auch auf Größe einer ganzen Seite angezeigt werden.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/text-text-column.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Text-Text-Spalte*
 
+Neben dem 1-spaltigen Layout gibt es auch die Möglichkeit 2 Spalten nebeneinenader anzeigen zu können. Auf kleineren Bildschirmen werden die Texte übereinander angezeigt.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/text-image-column.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Text-Bild-Spalte*
 
+Erweitert kann auch ein Bild in einer Spalte links oder rechts angezeigt werden. Auch hier werden die Inhalte übereinander angezeigt, wenn die Webseite auf kleineren Bildschirmen angezeigt wird.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/file-download.png", width: 6.5cm),
+  ),
+  align: right
+)[
+*Datei-Download*
+
+Es besteht auch die Möglichkeit, Dateien zum Download zur Verfügung zu stellen.
+Diese Komponente ermöglicht die Einbettung von Bildern oder PDFs mit Downloadmöglichkeit. Wird ein PDF oder ein Bild angegeben, so wird dieses angezeigt. Ist eine Datei nicht darstellbar, wird nur der Download-Button angezeigt, sofern dieser nicht ausgeblendet ist.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/embedding.png", width: 6.5cm),
+  ),
+  align: right
+)[
+*Einbettung*
+
+Die Einbettung ermöglicht die Anzeige externer Links. Diese Links können Bilder, PDFs oder Webseiten sein. Ein Beispiel für eine Einbettung wäre die öffentliche Kalender-Ansicht des FF Admin.
+]
+
+
+
 === Shared
 
+#wrap-content(
+  figure(
+    image("../../images/selected-articles.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Artikel hervorheben*
 
+Mit dieser Komponente lassen sich Artikel hervorheben, welche besondere Aufmerksamkeit erhalten sollen. Dazu können dann auch noch ein Titel und eine Beschreibung angegeben werden.
+
+Weiterhin kann zu der URL weitergeleitet werden, unter der die Artikel-Anzeige ist.
+]
+
+#wrap-content(
+  figure(
+    image("../../images/collection-select.png", width: 6.5cm),
+  ),
+  align: right
+)[
 *Inhaltsauswahl*
+
+Die Inhaltsauswahl kann die Listen der Artikel, Einsätze, Fahrzeuge oder Termine anzeigen, sofern diese in der Sammlungsreferenz (@reference) mit der Anzeige konfiguriert wurden.
+Hier kann dann auch eingestellt werden, ob die Ansicht auf die Detailansicht der jeweiligen Einträge weiterleiten kann.
+]