Zufällige Hintergrundgrafik ausgeben

Um eine Hintergrundgrafik per Zufall auszugeben, braucht es kein selbstgeschriebenes PHP-Script in Typo3. Zumindest nicht zwangsläufig, denn einige Typo3-Extensions tun bereits das was wir wollen. Wir müssen nur etwas Hand anlegen.

Um die gewünschte Funktionalität zu gewährleisten, habe ich die Erweiterung RandomImage (cc_random_image) missbraucht, um die Hintergrundbilder per Zufall auslesen zu lassen. Der Vorteil an dieser Extension ist, dass sie einem Marker nicht nur den Dateinamen des Zufallsbildes mitgibt, sondern den kompletten Pfad mitsamt Dateiname. Dieser lässt sich natürlich vorzüglich in einem kleinen CSS-Block verwenden.

Installieren Sie zunächst die Extension wie in der beiliegenden Anleitung beschrieben und aktivieren Sie dabei das Häkchen CType Plugin! Dies brauchen wir später, um die Zufalls(hintergrund)bilder auf die Seite zu bringen.

Erstellen Sie dann einen Ordner im fileadmin-Verzeichnis, aus dem die Bilder für den Hintergrund später gelesen werden sollen. Nun erstellen Sie eine neue versteckte Seite und fügen das Plugin als Content-Element ein. In diesem Fall wird die Extension in die Rand-Spalte abgelegt, kann aber in jede der Spalten abgelegt werden (nur müssen Sie später im TypoScript-Code darauf achten, die korrekte Spalte anzugeben).

Haben Sie die Extension ausgewählt und eingefügt, fügen Sie nun folgenden Code in die TS-Setup-Textarea zu:

path = fileadmin/bg_pics/
fileExt = jpg,jpeg,gif,png
renderObj = HTML
renderObj.wrap = |
renderObj.value (
  <style type="text/css" media="screen">
  #content {
     background: url('###FILE_1###');
  }
  </style>
)

Wichtig ist hier die erste Zeile, in der Sie den Pfad angeben müssen, den Sie zuvor erstellt haben und in dem die Bilder liegen, die als Hintergrund dienen sollen.

In diesem Fall wird das Hinergrundbild einem Element mit der ID #content zugewiesen. Sie können das natürlich anpassen. Der Marker ###FILE_1### übergibt den kompletten Pfad mitsamt Dateiname.

So weit, so gut.

Um die Ausgabe auf die Seite zu bringen, genügen zwei TypoScript-Zeilen im Haupttemplate-Setup:

page.10.marks.RANDPIC < styles.content.getBorder
page.10.marks.RANDPIC.select.pidInList = 34

pidInList ist die ID jener Seite, auf der Sie das Plugin als Content-Element eingefügt haben. getBorder heißt, dass das Content-Element sich in der Rand-Spalte befindet.

Nun müssen Sie noch den Marker ###RANDPIC### in Ihrem Template-File platziere, um den CSS-Code auszugeben.

Fragen bitte in die Comments.

Get Shareaholic

Über den Autor

Dieser Beitrag wurde von Oliver Schlöbe verfasst. Er arbeitet als Web- und (TYPO3-)-Entwickler, schreibt redaktionell über Windows Vista/ Windows 7, ist aktives Mitglied bzw. Administrator oder Moderator in diversen Webforen, darunter die TYPO3- und WordPress-Communities, und sammelt seine bisherigen Erweiterungen für diverse Systeme unter http://extend.schloebe.de/
Bei Fragen nutzen Sie die Kommentare oder wenden Sie sich an info@typo3.schloebe.de.

Über diesen Eintrag

Sie lesen gerade “Zufällige Hintergrundgrafik ausgeben,” einen Eintrag auf typo3.schloebe.de

Veröffentlicht:: 22.07.07

Kategorie:: TypoScript

Angesehen:: 7.592 mal

Bewerten:: (2 Wertungen, Durchschnitt: 4,50 von 5)

Tags:: :bild, hintergrund grafik, media feld, random, typo3, TypoScript, zufällig

Drucken:: Diesen Eintrag drucken

Interessante Links

↑ Diesen Banner für Ihre Webseite?

Informiert bleiben

Alex 04.09.07 / 16:24

Das ist genau, wonach ich gesucht habe. Ich würde diese Idee gerne verwenden.

Einen kleinen Punkt würde ich ändern/präzisieren in deiner sonst sehr genauen Beschreibung, falls dieses Phänomen nicht nur bei mir auftritt.

Bei mir funktionierte es erst, als ich keine “versteckte Seite” sondern eine “Nicht im Menü” Seite verwendete.
(Weiterhin sollte man sicherstellen, dass im Haupttemplate die beiden “random-image” objekte im “include static (from extension)” feld und im “content (default)”, “styles.content (default)” im “include static” eingefügt sind… was aber bei letzterem meist sowieso der Fall sein wird.)

Vielen Dank für die tolle Arbeit!

Richard 14.11.07 / 00:20

Hi,

was schreibe ich denn ins setup wenn ich templavoila benutze?

Danke schonmal im Voraus!

Mario 16.11.07 / 20:50

Ich habe es in Templavoila angewendet. Du musst nicht unbedingt das Häkchen CType Plugin setzen, du kannst es auch direkt mit TS einrichten.

zuerst im TS mal den Pfad angeben zu den Bildern:
plugin.tx_ccrandomimage_pi1{
path = fileadmin/Zufallsbilder/
}

Im TV musst du ein neuer Bereich oder Section (sorry, korrekte Bezeichnung fällt mir grad nicht ein, auf jedenfall unter Mapping ein neues Mapping machen und als Inhalt “library” wählen. Es wird dann ein Platzhalter im Code erstellt, wo du deine Library abfüllen kannst, z.B. so:

ib.randImage
#content {
background: url(‘###FILE_1###’);
}

)

lib.randImage ist der Name, den du dem Platzhalter im TV gegeben hast.

Funzt bei mir wunderbar, ich habe zusätzlich eine Condition bei der Pfaddefinition gemacht um je nach Haupttree der Webseite andere Bilder laden zu können…

Hoffe das hilft!

Mario 16.11.07 / 20:53

Sorry, da hats den HTML code natürlich rausgehauen…also nochmal:
lib.randImage kleinerals-Zeichen plugin.tx_ccrandomimage_pi1
lib.randImage.renderObj = HTML
lib.randImage.renderObj.wrap = |
lib.randImage.renderObj.value (
style type=”text/css” media=”screen”
#content {
background: url(‘###FILE_1###’);
}
/style
)

Oliver Schlöbe 18.11.07 / 19:27

Danke für deine Hilfe, Mario. Ich nutze TemplaVoilá nämlich nicht.

Richard 25.11.07 / 12:40

Sorry für das späte Feedback, aber funktioniert jetzt einwandfrei, danke Mario

habs aber doch etwas anders gelöst, dann brauch ich nicht das TV-template anpassen:

Constants:
plugin.tx_ccrandomimage_pi1{
path = fileadmin/randimgs/
}

Setup:
page.headerData.35 < plugin.tx_ccrandomimage_pi1
page.headerData.35{
renderObj = HTML
renderObj.wrap = |
renderObj.value (
<style type=”text/css” media=”screen”>
.main{
background: url(###FILE_1###) top left no-repeat;
}
</style>
)
}

tobi 12.09.08 / 09:49

Hallo,

wollte obiges gerade auf meiner Seite einbinden, was aber leider nicht funktionierte. Nach dem Hinweis aus dem 1. Comment, dass man die Seite nicht verstecken sondern nur aus dem Menü ausblenden müsse, kommt an meinem Marker im Template immerhin dieser Code an:

(vorher erschien nichts…).
der gewünschte HTML-Code ist aber noch nicht drinnen, was wohl irgendwie an dem Plugin bzw. dessen Objekt hängen muss.
Leider konnte ich den zweiten Hinweis aus dem 1. Kommentar

[zitat]
(Weiterhin sollte man sicherstellen, dass im Haupttemplate die beiden “random-image” objekte im “include static (from extension)” feld und im “content (default)”, “styles.content (default)” im “include static” eingefügt sind… was aber bei letzterem meist sowieso der Fall sein wird.)
[/zitat]

nicht umsetzen. Wo befinden sich den die genannten Felder? Ist das ein Feld einer Eingabemaske oder ein Feld (also Array) in TypoScript?

Für Hilfe wäre ich sehr dankbar

Viele Grüße
tobi

Max 05.11.08 / 18:53

Genau das habe ich auch gesucht, aber wie kann man eine 2. Grafik (also 2. Random-Wert) aus dem Ordner “fileadmin/bg_pics/” beziehen, um diese an anderer Stelle zu includen?

typo3.schloebe.de

Zufällige Hintergrundgrafik ausgeben

Über den Autor

Über diesen Eintrag

Interessante Links

Informiert bleiben

8 Kommentare

Ihr Kommentar