svt:Timer - für eine Galerie wechselnder Bilder

Tests für Viewhelpers von SVT inklusive Timer

Das folgende Plugin zeigt, dass ein Timer auch jede Minute gesetzt werden kann. Gleichzeitig zeigt das Beispiel, wie SVG flexibel zur Darstellung von Diagrammen verwendet werden kann. Die benötigten arithmetischen Operationen in der Ansicht für ein dynamisches Rendering erledigt der Viewhelper <svt: calculate>.

Da der Verweis auf die SVT-Datei um eine Timerfunktion erweitert wurde, können Sie auch benutzerdefinierte Vorlagen verwenden, um Bilder zu unterschiedlichen Zeiten ein- und auszublenden. Gute Technologie für zeitnahe Marketingkampagnen und Websiteauftritte. Sie können alle wichtigen Contentelemente schnell konvertieren, wenn Ihre Website in TYPO 8.7 programmiert ist.

Bereite das Testplugin von 'svt' zum Testen vor

  1. Definieren im TYPO3-Backend einen System-Ordner für die Timer-Definitionen.
  2. Definiere einen Timer mit folgender periodischer Struktur:
    • aktiv für eine Minute
    • passiv für eine Minute
    • passiv für eine Minute
  3. Definiere einen zweiten Timer mit folgender periodischer Struktur:
    • passiv für eine Minute
    • aktiv für eine Minute
    • passiv für eine Minute
  4. Erstelle ein Content-Element mit diesem Plugin.
    (Wenn du dies liest, hast du es natürlich schon getan.)
  5. Füge als Ressource zwei svg-File als Alternative Partials zu dem Plugin hinzu:
    • Markiere im IRRE-Element die erste svg-Datei/Partial mit der ersten Timer-Definition.
    • Markiere im IRRE-Element die zweite svg-Datei/partial mit der zweiten Timer-Definition.
    Wenn Sie diese Erweiterung installiert haben, finden Sie zwei Teiltabellen im Ordner /fileadmin/svt/ diaagramms. Andernfalls müssen Sie vorher die svg-Dateien/partials aus /typo3conf/ext/svt/Initialisierung/Dateien/Diagramme/ in Ihrer TYPO3-FAL verfügbar machen.
  6. Lade jede Minute die Seite, die dieses Plugin enthält, neu und sieh, wie es funktioniert.

Generiere CSS und JS dynamisch mit TYPO3

Generiere dynamisch CSS bzw. Sytylesheets

german flag could change temporay (typoscript-time-condition)

CSS-Klassen für die flagge von der Erweiterung angefordert und dynamisch von TYPO3 generiert

Statisch eingebundenes JavaScript, das dynamisch von TYPO3 generiert wird

Öffnen Sie die Konsole Ihres Browsers. Sie sollten zwei Nachrichten finden: eine aus der statischen Datei und eine aus dem dynamisch generierten Stream.

Berechnung Ergebniss erwartet geprüft
2 ↑ -3 ↓ 5 ↑ 333 okay
2 ↑ (-3 ↓ 5) ↑ 3 33 okay
30 *sin(30°) +14 2929 okay
round(30 *sin(30°) +14) 2929 okay
abs(3*5+6*-4+3^2-1)11 okay

Testen Sie die SVG-Diagramme

Sie müssen einen periodischen Timer in einem separaten Ordner definieren. Der Timer sollte drei Minuten umfassen. Fügen Sie diesem Plugin ein Diagramm aus dem Ordners 'fileadmin / svt / Diagramms' als 'alternativ partiell' bei. Kombinieren Sie das Diagramm mit dem definierten 'Drei-Minuten-Timer'.

Liste von Zahlen für das Balkendiagramm

Dies ist das Standard-Partial. Es zeigt eine Tabelle (uid, value, color}. Hierfür ist kein aktives Alternative Partial definiert.
Uid Wert Farbe
1-42179darkred
2911darkblue
35715gray
4-12729silver
5-325770green
6-75945gainsboro
7-70166gold
8-12315darkred

Das Partial für das Diagramm überschreibt das List-Partial

Neuer Pfad überschreibt Objekt

Wenn Sie mindestens einen zu überschreibenden Teil definiert haben, überschreibt dieser teilweise immer den standardmäßig vom Plugin definierten Standard.
Heinz: -42179Michael: 911Laurin: 5715Klaus: -12729Thomas: -325770Wolfgang: -75945Peach: -70166Pit: -12315

Überschreiben mit dem im String definierten Pfad

Vorlage mit Diagramm überschreiben regelmäßig Vorlage mit Text

Timer in If-Bedingung verwendet

Dieser Teil verwendet den Viewhelper <svt: timerActive>. Der Viewhelper generiert eine '1', wenn der Timer aktiv ist. In diesem Beispiel können Sie zwischen zwei alternativen Vorlagen (Partials) wechseln.
  • ### Michael: 911
  • ### Laurin: 5715
  • ### Heinz: -42179
  • ### Klaus: -12729
  • ### Thomas: -325770
  • ### Wolfgang: -75945
  • ### Peach: -70166
  • ### Pit: -12315

Wahl von Partial aus Liste durch Timer

Der Viewhelper wählt als alternatives Partial den ersten Treffer aus einem Objektspeicher aus. Dieser kann eine Liste alternativer Partials enthalten. Sie können den Viewhelper auch nutzen, um verschiedene alternative Partials mit überlappenden Zeitrahmen ohne Konflikte verwenden zu können.
  • ### Michael: 911
  • ### Laurin: 5715
  • ### Heinz: -42179
  • ### Klaus: -12729
  • ### Thomas: -325770
  • ### Wolfgang: -75945
  • ### Peach: -70166
  • ### Pit: -12315

Schalte zeitgesteuert zwischen verschiedenen Teasern um

Nutze SVG inline im HTML, um unterschiedliches Aussehen bei Teasern zu erzeugen. Wenn der Entwickler es ermöglicht, kannst du ein bestehende Template/Partial durch ein hochgeladenes partial überladen. In dieseer Testsituation wird lediglich das zeiggesteuerte Umschalten zwischen zwei SVG-Partials erlaubt. Die nachfolgende Tabelle zeigt die konstant verwendeten Informationen.
Ihre Spende unterstützt das dynamische kreative Internet.59,-€SUPERMein Geschenk für Dich

Informationden, die in jedem Teaser gleich blieben
Pfad zum Bild Kurze Beschreibung Preis Marktschrei Aufruf
/typo3temp/assets/_processed_/3/c/csm_FarbeImLeben_56611a851b.jpgIhre Spende unterstützt das dynamische kreative Internet.59,-€SUPERMein Geschenk für Dich

Und nicht vergessen

Nach seinem Test könnte der Editor vergessen, die Testdaten durch ein historisches Datum zu ersetzen. Aktivieren Sie den Scheduler von 'svt', der dann das Testdatum in der Datenbank automatisch zurückstellt.