Image Rotator auf Startseite, einbinden von Artikelteasern (wie bei XML Imagerotator)

[andy84]

Liebe Contao-Community!

Ich habe ein Problem: Ich würde gerne auf der Startseite einen großflächigen Image Rotator einbinden, welcher neben dem großen Bild auch einen Artikelteaser anzeigt. Sowas kann man zum Beispiel auf der http://www.allianz.com bewundern. Das ganze sollte natürlich möglichst einfach zu warten sein. Ist es theoretisch möglich, das Contao Image Rotator Modul so zu konfigurieren, dass dieses ausgewählte Artikelteaser mit Links zu den jeweiligen Artikeln anzeigt?
Ich bin bei meinen Web-Recherchen auf einen "Free Flash-XML Image Rotator" gestoßen:

http://www.webresourcesdepot.com/free-flash-xml-image-rotator/

Diesen könnte man natürlich auch einsetzen, allerdings müsste man dann immer nach der Erstellung eines Artikels die XML-Datei aktualisieren bzw. um den jeweiligen Artikel ergänzen, und den Link noch manuell einfügen... nicht sehr benutzerfreundlich!

Vielen Dank im Voraus für Eure Beiträge!

[Schlauchbeutelmaschine]

Hallo Andy,

sofern du über Grundkenntnisse von PHP verfügst solltest du das anpassen können.
Ich würde mir als Basis auch nochmal die monoslideshow angucken, da die glaube ich auch eine XML Datei erstellt.

Wenn du das direkt mit mehreren Artikeln machen möchtest und dann am Anfang und Ende einen Wrapper herum legst schau dir auch mal einen Contentslider an.

[andy84]

Hallo!

Habe jetzt endlich mal wieder Zeit gefunden, mich weiter mit der Thematik zu beschäftigen!
Ich habe jetzt besagten XML Flash Rotator heruntergeladen, und versucht in typolight einzubinden. Das ist allerdings schwieriger als gedacht. In dem heruntergeladenen Flash Rotator Paket befindet sich auch eine statische HTML-Datei. Ich habe nun die Ordnerstruktur in das plugin-Verzeichnis von typolight hochgeladen (plugins/deploy). Allerdings scheitere ich im Moment noch an der Einbindung des Flash-Films! Hier ist der Quellcode der statischen Seite, mit der die Anzeige des Flash Films schon funktioniert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   
   <head>
        <title>XML Banner Rotator</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <script type="text/javascript" src="js/swfobject.js"></script>
    </head>
    
    <body>

       <script type="text/javascript">
			// PARAMS
			var params = {};
		    params.bgcolor = "#FFFFFF";
		    params.menu = "false";
		    params.scale = 'noScale';
		    params.wmode = "opaque";
		    params.allowScriptAccess = "always";
		    
		    // ATTRIBUTES
		    var attributes = {};
		    attributes.id = 'FlabellComponent';
		    attributes.name = 'FlabellComponent'
		    
		    // JAVASCRIPT VARS 
			// cache buster
			var cacheBuster = Date.parse(new Date());		    
		    
		    // stage dimensions
		    var stageW = 560;
			var stageH = 374; 
			
		    /** FLASH VARS **/
		    var flashvars = {};
		    
		    // component dimensions inside the SWF file
		    flashvars.componentWidth = 560;
			flashvars.componentHeight = 374;
			
			// path to files (can be "")
			flashvars.pathToFiles = "banner/";
			
			// path to content XML
			flashvars.xmlPath = "xml/banner.xml";
		    
		    /** EMBED THE SWF**/        
            swfobject.embedSWF('preview.swf', 'FlabellComponent', stageW, stageH, '9.0.45', 'js/expressinstall.swf', flashvars, params, attributes);
           
        </script>
        
        <style type="text/css">
            /* hide from ie on mac \*/
            html, body {
                height: 100%;
                overflow: hidden;
            }
            /* end hide */
            body {
                background: #000000;
                font: 86% Arial, "Helvetica Neue", sans-serif;
                margin-top: 200px; 
                text-align : center;               
            }
        </style>
	    
        <div id="FlabellComponent" style="width:100%;height:100%;">
            <p>In order to view this page you need Flash Player 9+ support!</p>
            <p>
                <a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                </a>
            </p>
        </div>
		        
    </body>
    
</html>

Mein Ansatz wäre nun gewesen, zu aller erst die "swfobject.js" Datei in den Header-Bereich des verwendeten Seitenlayouts einzufügen:

<script type="text/javascript" src="plugins/deploy/js/swfobject.js"></script>

Nun hätte ich mit dem Modul "eigener HTML-Code" den folgenden Teil der statischen HTML-Seite übernommen:

<script type="text/javascript">
			// PARAMS
			var params = {};
		    params.bgcolor = "#FFFFFF";
		    params.menu = "false";
		    params.scale = 'noScale';
		    params.wmode = "opaque";
		    params.allowScriptAccess = "always";
		    
		    // ATTRIBUTES
		    var attributes = {};
		    attributes.id = 'FlabellComponent';
		    attributes.name = 'FlabellComponent'
		    
		    // JAVASCRIPT VARS 
			// cache buster
			var cacheBuster = Date.parse(new Date());		    
		    
		    // stage dimensions
		    var stageW = 560;
			var stageH = 374; 
			
		    /** FLASH VARS **/
		    var flashvars = {};
		    
		    // component dimensions inside the SWF file
		    flashvars.componentWidth = 560;
			flashvars.componentHeight = 374;
			
			// path to files (can be "")
			flashvars.pathToFiles = "banner/";
			
			// path to content XML
			flashvars.xmlPath = "xml/banner.xml";
		    
		    /** EMBED THE SWF**/        
            swfobject.embedSWF('preview.swf', 'FlabellComponent', stageW, stageH, '9.0.45', 'js/expressinstall.swf', flashvars, params, attributes);
           
        </script>
        
        <style type="text/css">
            /* hide from ie on mac \*/
            html, body {
                height: 100%;
                overflow: hidden;
            }
            /* end hide */
            body {
                background: #000000;
                font: 86% Arial, "Helvetica Neue", sans-serif;
                margin-top: 200px; 
                text-align : center;               
            }
        </style>
	    
        <div id="FlabellComponent" style="width:100%;height:100%;">
            <p>In order to view this page you need Flash Player 9+ support!</p>
            <p>
                <a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                </a>
            </p>
        </div>

Leider funktioniert das so aber nicht, da ja bekanntlich einige Tags (z.B. der <script>-Tag) aus Sicherheitsgründen deaktiviert sind im Modul "eigener HTML-Code". Habt ihr eine Idee, wie ich diesen Flash Rotator nun eingebunden bekomme?
Vielen Dank im Voraus für Eure Hilfe!

EDIT:
Ich habe gerade gesehen, dass wohl auch noch einige Links im Quellcode abgeändert werden müssen, da die Dateien ja nicht im Root-Verzeichnis von typolight liegen, sondern unter plugins/deploy!

Statt

swfobject.embedSWF('preview.swf', 'FlabellComponent', stageW, stageH, '9.0.45', 'js/expressinstall.swf', flashvars, params, attributes);

müsste es also z.B. folgendermaßen heißen:

swfobject.embedSWF('plugins/deploy/preview.swf', 'FlabellComponent', stageW, stageH, '9.0.45', 'plugins/deploy/js/expressinstall.swf', flashvars, params, attributes);

[andy84]

Ok, ich habe es nun hinbekommen:
Ich habe einfach die <embed> sowie <script> Tags freigeschalten, sowie die Links wie im letzten Posting angesprochen abgeändert. Allerdings fühle ich mich nicht so wohl mit dem Freischalten der entsprechenden Tags: das hat doch bestimmt einen Grund wieso diese normalerweise nicht freigeschalten sind oder? Kann man das auch ohne das Freischalten dieser Tags realisieren?

[Schlauchbeutelmaschine]

Hallo Andy,

sofern mehrere Personen das CMS bedienen ist es natürlich immer etwas heikel.

Aber du könntest einfach eine andere Erweiterung nehmen und dort alles im Haupttemplate löschen (wie z.B. beim Imageslider mod_imageslider) und dann dort deinen Inhalt einfügen.

Oder du verwendest einen Insert-Tag in dem du eine PHP Datei einbindest, da musst du hier einfach mal im Forum suchen, da gibt es auch einige Beispiele.

[andy84]

Ok vielen Dank für die Tipps, werde mir das mal näher anschauen mit den Insert-Tags!