Bannermanagement mit Macina Banners, TemplaVoilà und TYPO3

Für einen Kunden habe ich vor einiger Zeit die Anforderung erhalten zu prüfen, ob und wie eine möglichst einfache Bannerverwaltung in TYPO3 integriert werden kann. In den einschlägigen Foren habe ich häufig den Hinweis auf die Erweiterung „Macina Banners – Advanced Banner Management“ von Wolfgang Becker erhalten. Die Erweiterung wurd über 5000 Mal heruntergeladen und am 2.1.2013 aktualisiert.
Auf Grund dieser Parameter habe ich es auf einen Versuch ankommen lassen und möchte euch in diesem Tutorial zeigen wie ihr die Bannerverwaltung in TYPO3 implementieren könnt.

Macina Banners als Erweiterung installieren

media_1361715878581.png

Im Erweiterungsmanager des TYPO3-Backends sucht einfach unter „Import Extensions“ nach macina_banners

media_1361715903458.png

Durch einen Klick auf den kleinen Pfeil nach links könnt ihr die Erweiterung nun installieren.

media_1361715928438.png

Abschließend ist nur noch ein Klick auf „Make updates“ notwendig.

Integration des Banners in das HTML-Template

media_1361716406274.png

Nun muss im HTML-Template ein Platz für den Banner geschaffen werden. Ich habe dafür im Header ein Div mit dem Titel „headerbanner“ eingefügt, welches ich gleich mit TemplaVoilà mappen werde.

Mapping in TemplàVoila

media_1361716444329.png

Um die Änderung des HTML-Templates auch an TYPO3 bekannt zu machen, wechselt ihr nun in den TemplaVoilà bereich. Hier hat das System schon erkannt, dass sich das HTML-Template geändert hat. Ihr klickt daher auf „Update mapping“.

Da mit dem Banner ein neues Objekt hinzugefügt wird, müsst ihr die Datenstruktur, bzw das Vorlagenobjekt ändern. Ihr müsst daher den Button „Modify DS/TO“ anwählen.

media_1361716492580.png

Hier gebt ihr dem neuen Templateobjekt einen Namen und klickt „Add“.

media_1361716516882.png

Wichtig ist dür Objekt den Editing Type „TypoScript Object Path“ auszuwählen, da wir dieses Objekt später direkt in TypoScript anwählen wollen. Im Anschluss wieder auf „Add“ klicken.

media_1361716543417.png

Nun könnt ihr den Object Path angeben, mit dem ihr später das Objekt aus dem TypoScript-Template heraus referenzieren wollt. Danach klickt ihr einfach auf „Update“.

Mapping festlegen

media_1361716584688.png

Nach einem Klick auf „Map“ könnt ihr nun die Stelle im HTML-Template auswählen, an der ihr vorhin das Div für den Banner eingesetzt habt. Ich habe anschließend „Exclude Tag“ ausgewählt, damit das Div erhalten blibt und ich den Banner einfach per CSS ansprechen kann.

Datensatz „Banner“ erstellen.

media_1361716999400.png

Im List-Modus habe ich mir einen Ordner für die Banner abgelegt. Wenn ihr mit der rechten Maustaste auf den Ordner klickt und neu auswählt, könnt ihr auf der rechten Seite den Datensatztyp „Banner auswählen.

Banner bearbeiten

media_1361717174382.png

Nun öffnet sich eine Eingabemaske, in der der Banner genauer definiert werden kann. Im Reiter Grundeinstellung ändere ich ausschließlich die Bezeichnung des Banners, um diesen im Anschluss wiederzufinden. als TYP kann auch „HTML “ oder „Flash“ ausgewählt werden. Für diesen Test habe ich aber zwei jpg-Grafiken vorbereitet.

media_1361717220702.png

Im Reiter Bannergrafik kann diese Grafik hochgeladen werden. Der Bildtext gibt später den Linktitle an. Als Link kann die Adresse hinterlegt werden, auf die später verlinkt werden soll.

TIPP:
Wenn ihr den Link vorher mit http://bit.ly erstellt und diesen geänderten Link hier einbaut, hat auch der Kunde die Möglichkeiten, die Aufruf- und Klickstatistiken via bit.ly einzusehen ohne sich ins TYPO3-Backend einloggen zu müssen.

media_1361717248827.png

Im Reiter „Anzeige“ könnt ihr dem Banner eine Kategorie/Positionierung zuweisen. Standardmäßig existieren die angegebenen Objekte. Der Clou ist, dass ihr später in der Zuweisung festlegen könnt, aus welche Kategorie die Banner angezeigt werden. Außerdem lassen sich Seiten festlegen oder aussschließen, auf denen der Banner angezeigt wird.

media_1361717349305.png

Wenn ihr eure Eingaben gespeichert habt, könnt ihr weitere Banner anlegen. Für das Beispiel habe ich zwei einfache FBanner gespeichert.

Banner im TypoScript-Template zuweisen

media_1361717962644.png

Abschließend müsst ihr im Bereich „Template“ Euer TypoScrit-Template anpassen und definieren, dass euer angelegtes TypoScript Objeckt mit dem Macina Banners – Plugin gefüllt wird. Dies erzielt ihr mit folgenden Codezeilen:

lib.headerbanner = plugin.tx_macinabanners_pi1
lib.headerbanner {
placement = top
mode = random
pidList = 1166
}

Unter pidList gebt ihr die ID des Ordners an, in dem die Bannersdatensätze gespeichert werden. Die Id erhaltet ihr, in dem ihr mit der Maus über den Ordner fahrt. Unter Placement habe ich die Kategorie angegeben, unter denen ich die Banner angelegt habe und der random-mode gibt an, dass zufällig ausgewählt wird, welche Banner angezeigt. werden.

Banneransicht Macina Banners

desktopblau.png

Ihr seht, es wird sowohl der blaue,…

desktoprot.png

… als auch der rote Banner angezeigt. Damit hat die Testinstallation geklappt.
Nutzt jemand von euch schon macina_banners und hat gute oder schlechte Erfahrungen gesammelt? Auf mich macht die Erweiterung wirklich einen sehr guten Eindruck, zumal neue und bestehende Banner einfach durch die Redakteure gepflegt werden und den Positionen über die Kategorien zugewiesen werden können.