Shapetypen regeln das Layout, die Eigeschaften und den Aufbau von Inhaltselementen (= Shapes). Jeder Typ von Shape muss, bevor er von Autoren angelegt werden kann, hier aktiviert werden. Shapetypen, die voneinander abhängig sind, werden bei der Aktivierung eines Typs automatisch mitaktiviert.
Standard-Shapetypen von CONTAILOR (Vorlagen)
CONTAILOR stellt eine Reihe von Standard-Inhaltselementen zur Verfügung, diese können in jeder Instanz eingesetzt werden, sie müssen lediglich aktiviert werden. Zudem eignen sich diese, um als Vorlage für eigene Shapes zu dienen. Im Folgenden findet sich eine Aufstellung aller Standard-Shapes.
Akkordeon (Accordion)
Ein klassisches Akkordion, mit dem mehrere Tabs verwaltet werden können.
Akkordeon-Tab (AccordionTab)
Ein einzelner Tab eines Akkordions. Dieser ShapeType kann nur innerhalb eines Accordions angelegt werden.
Audio (Audio)
Ein HTML5-Audio-Element, dem eine Audio-Datei hinzugefügt werden kann.
Kontaktformular (ContactForm)
Ein Standard-Kontaktformular, mit dem Kontaktanfragen realisiert werden können.
CONTAILORmade (CONTAILORmade)
Standardshape für Impressum, um auf das CMS CONTAILOR zu verweisen.
Download-Liste (DownloadList)
Eine einfache Liste von Links, mit denen Dateien heruntergeladen werden können. Diesem ShapeType können die entsprechenden Dateien zugewiesen werden.
Formular (Form)
Ein Formular mit beliebig vielen Eingabefeldern, welches per Mail versendet wird.
Formular Checkbox (FormInputCheckbox)
Eine Checkbox, welche in einem Formular ausgefüllt werden kann.
Formular E-Mail Feld (FormInputEMail)
Ein E-Mail Feld, welches in einem Formular ausgefüllt werden kann.
Formular RadioButton (FormInputRadio)
Ein RadioButton, welcher in einem Formular ausgefüllt werden kann.
Formular Dropdown (FormInputSelect)
Ein Dropdown, welches in einem Formular ausgewählt werden kann.
Formular Textfeld (FormInputText)
Ein Textfeld, welches in einem Formular ausgefüllt werden kann.
Formular Textbox (FormInputTextArea)
Eine Textbox, welche in einem Formular ausgefüllt werden kann.
Formular Upload (FormInputUpload)
Ein Uploadfeld, mit dem einem Formular Dateien angehangen werden können. Die hochgeladenen Dateien werden darunter angezeigt.
Google Maps (GoogleMaps)
Eine Google-Maps-Karte, die individuell konfiguriert werden kann.
Bild mit Text (ImageAndText)
Ein Shape, in dem ein Bild mit voller Breite mit einem Text darunter gepflegt werden kann.
Bildergalerie (ImageGallery)
Eine einfache Bildergalerie.
Bilder mit Texten (ImageWithTextTeaser)
Ein dreispaltiges Shape, welches in jeder Spalte ein Bild mit ovalem Ausschnitt und einem kurzem Beschreibungstext vorhält.
Bildergalerie (Lightbox) (LightboxGallery)
Eine Bildergalerie, welche Lightbox zur Anzeige verwendet.
Link (Link)
Ein einfacher Link als Button im CONTAILOR-Stil.
Literal (Literal)
Hier kann beliebiger HTML-Code eingetragen werden, der auf der Seite interpretiert angezeigt wird.
Login/Logout (LoginLogout)
Ein einfacher Login, der zu einem Logout wird, wenn man angemeldet ist.
Newsletter (Newsletter2Go)
Shape zur Steuerung des Newsletter-Moduls mit Newsletter2Go
Opt-In (OptIn)
Stellt einen Opt-In-Layer dar, der die Zustimmung zu Google-Analytics, Cookies, etc. verlangt.
Absatz (Paragraph)
Ein Shape, welches einen einfachen Text enthält. Dieser wird auf der Webseite als <p> (Absatz) dargestellt.
Absatz mit Unterüberschrift (ParagraphWithSubHeadline)
Ein Absatz, der zusätzlich eine Überschrift über dem eigentlichen Text führt. Die Überschrift wird auf der Webseite als <h2>-Element umgesetzt.
Suchformular (Search)
Formular für die Seitensuche mit Ergebnisliste. Eine einfache Suche, die alle Seiten und Shapes durchsucht und das Ergebnis in einem Baum darstellt.
Slider (Slider)
Ein Slider, mit dessen Hilfe eine Abfolge von automatisch wechselnden Bildern realisiert werden kann. Die Geschwindigkeit, Laufrichtung und weitere Parameter sind individuell einstellbar
SliderItem (SliderItem)
Ein einzelnes Element, das innerhalb eines Sliders verwendet wird. Dieser ShapeType kann nur innerhalb eines Sliders erstellt werden.
Benutzerpasswort zurücksetzen (UserPasswordReset)
Bietet die Möglichkeit, das Passwort eines Benutzers zurückzusetzen und stellt dafür sowohl die Eingabe der E-Mail-Adresse als auch die des neuen Passworts bereit.
Video (Video)
Ein individuell anpassbarer HTML5-Video-Player, dem genau ein Video zugeordnet werden kann. Dieser ist mit dem <video>-Element realisiert.
Youtube (Youtube)
Direkte Einbindung eines Youtube Videos mit vielen Einstell-Optionen.
Erstellung von ShapeTypes
Zur Erstellung eines eigenen ShapeTypes sind folgende Schritte nötig:
- Unter <Instanzname>\View\ShapeType einem neuem Ordner mit dem Namen des neuen ShapeTypes anlegen.
- Innerhalb des neuen Ordners folgende zwei Dateien mit, sofern nicht anders angegeben, genau diesem Namen anlegen:
- ShapeType.config: Diese regelt die Einstellungen des ShapeTypes. Wie sie auszusehen hat siehe unter ShapeType.config.
- Template.vbhtml: Diese Datei regelt das genaue Aussehen von Shapes diesen Typens.
- Wird ein Default-Bild für eine Bildbox im Shape benötigt, kann es an beliebiger Stelle mit beliebigem Namen innerhalb des Ordners gelegt werden, auch in einem neuen Unterordner. Es ist dann nur darauf zu achten, dass im Eintrag "PlaceholderPath" des Bild-Attributs in der ShapeType.config der Pfad zu dieser Datei korrekt gesetzt ist.
- Sollten für den neuen ShapeType weitere Dateien (z.B. JavaScript) nötig sein, können diese ebenso in den Ordner des ShapeTypes gelegt werden.
Soll ein Default-ShapeType überschrieben werden, so muss der neu anzulegende Ordner lediglich dessen Namen tragen.