Typo3 mit Flashbanner + vererbung | Unterseiten aber nur Bild (tt_content)
Hallo liebe Freunde,
wenn man in Typo3 doch mal Flash verwenden will, gibt es eine tolle EXT: Flash Player Integration (SWF Object)
Wenn man nun den Banner auch noch auf die Unterseiten vererben möchte (beispielhafte Einstellung im TS von TemplaVoila-Mapping):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 20 = CONTENT
20 {
source.current = 1
## by marc
table = tt_content
select {
select.pidInList.if.isTrue.field=tt_content
selectFields = tt_content.*
where = tt_content.colPos=3
groupBy = tt_content.uid
leftjoin = pages ON(pages.uid = tt_content.pid) AND INSTR(pages.tx_templavoila_flex, CONCAT('index="vDEF">', tt_content.uid))>0
}
## by marc - end
stdWrap.required = 1
stdWrap.dataWrap = <div id="feature" class="{register:featureClass}"><!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end--><div class="clearOnly"> </div></div><!-- end #feature -->
slide = -1
} |
[...] Sollte man das Plugin nicht direkt einbinden, sondern per Typoscript.
Damit hat man direkt auch die Möglichkeit alle Paramater übergeben und wenn der Kunde doch mal auf den Unterseiten doch nur noch ein Bild zu sehen ist statt immer die gleiche Animation, ist es durch ein paar Teilen mehr (siehe PIDinRootline) das auch alles kein Thema mehr 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | flash.produkt < plugin.tx_yejjswfobject_pi1 flash.produkt { flash_record { flashmovie = fileadmin//user_upload/xxxx/xxxx/banner.swf width = 980 height = 320 requiredversion = 8 alternativecontent = 3700 } ts_content { flashParams ( wmode|transparent loop|false ) } } [PIDinRootline = 215,250,238,435,240,241] flash.produkt = RECORDS flash.produkt.tables = tt_content flash.produkt.source = 3700 [end] |
Fazit: Die Art etwas mit Typoscript einzubinden ist zwar im ersten Moment nervig und etwas aufwändig, aber kann bei einer großen Webseite das Leben echt leicht machen. Bei mir würde es in dem Fall von 8 Flashbanner und 500 Unterseiten ca. 2 Stunden Arbeit ersparen.
Ich wünsche euch viel Spaß damit und tolle Internseiten
Grüße, euer Marc
TYPO3 – CAL – Timeline | Today – +6 Monate dynamisch
Wie versprochen, zeige ich euch hier eine Timeline, die ich mit mit Calender Base erstellt habe.
Ich habe mir viele Gedanken darüber gemacht, wie man das ausschließlich mit Typoscript und ein bisschen jQuery machen kann. Allerdings ist die Geschichte mit dem Calender Base doch etwas komplexer als vielleicht anfangs gedacht. Doch mit etwas Zeit und Ehrgeiz ist auch das eine Hürde, die man nehmen kann ohne komplett zu verzweifeln.
Der Aufbau für dieses kleine Modul besteht aus TypoScript, jQuery und CSS.
Genutzt werden zudem die Extensions: cal (Calender Base) und tscobj* (Content Element From TypoScript)
*optional oder direkt mit TemplaVoila oder in einen Marker.
Der TypoScript-Aufbau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | /* Aufbau der CAL's (6x) + jeweils den Monat // zum individuellen bearbeiten für jeden CAL ************************************/ lib.month1 < plugin.tx_cal_controller lib.month1 { view { useGetdate = 1 useCustomEndtime = 1 allowedViews = list list.starttime = today #list.starttime = cal:monthstart list.endtime = cal:monthend event.eventViewPid = 75 } } lib.month2 < plugin.tx_cal_controller lib.month2 { view { useGetdate = 1 useCustomEndtime = 1 allowedViews = list list.starttime = cal:monthstart +1 month list.endtime = cal:monthend +1 month event.eventViewPid = 75 } } lib.month3 < plugin.tx_cal_controller lib.month3 { view { useGetdate = 1 useCustomEndtime = 1 allowedViews = list list.starttime = cal:monthstart +2 month list.endtime = cal:monthend +2 month event.eventViewPid = 75 } } lib.month4 < plugin.tx_cal_controller lib.month4 { view { useGetdate = 1 useCustomEndtime = 1 allowedViews = list list.starttime = cal:monthstart +3 month list.endtime = cal:monthend +3 month event.eventViewPid = 75 } } lib.month5 < plugin.tx_cal_controller lib.month5 { view { useGetdate = 1 useCustomEndtime = 1 allowedViews = list list.starttime = cal:monthstart +4 month list.endtime = cal:monthend +4 month event.eventViewPid = 75 } } lib.month6 < plugin.tx_cal_controller lib.month6 { view { useGetdate = 1 useCustomEndtime = 1 allowedViews = list list.starttime = cal:monthstart +5 month list.endtime = cal:monthend +5 month event.eventViewPid = 75 } } /* Generierung der Timeline mit Wraps // Es kann auch anders aufgebaut werden, jedoch // sollten die Class-Names beibehalten werden. ************************************/ lib.eventList = COA lib.eventList { 10 = TEXT 10 { wrap = <div class="event-date">|</div> } 11 = COA 11.1< lib.month1 11.wrap = <div class="event month1"><div class="month-date"></div>|</div> 21 = COA 21.1 <lib.month2 21.wrap = <div class="event month2"><div class="month-date"></div>|</div> 31 = COA 31.1 <lib.month3 31.wrap = <div class="event month3"><div class="month-date"></div>|</div> 41 = COA 41.1 <lib.month4 41.wrap = <div class="event month4"><div class="month-date"></div>|</div> 51 = COA 51.1 <lib.month5 51.wrap = <div class="event month5"><div class="month-date"></div>|</div> 61 = COA 61.1 <lib.month6 61.wrap = <div class="event month6"><div class="month-date"></div>|</div> } |
Somit haben wir die Grundlage geschaffen, sodass die 6 CAL-Module zusammen in einem DIV eingebaut werden.
Der Vorteil dabei ist, dass wir durch Typoscript diese Module jederzeit wieder bearbeiten können und damit auch nicht im BE 6 Module einbauen müssen.
Der jQuery-Aufbau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | jQuery.noConflict(); jQuery(document).ready(function(){ /* Eventline mit Datum von // diesem Jahr + aktuelle Monate *************************** */ pos = 90; var today = new Date(); var m = today.getMonth(); var j = today.getFullYear(); var events = jQuery('.eventline .event'); var date = jQuery('.eventline .event .month-date'); var monat = new Array("Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"); jQuery(".eventline dt").hide(); jQuery(".eventline dt.link").show(); jQuery(".eventline .event-date").html("<p>Events</p>" + "<p>" + j + "</p>"); jQuery(".eventline .link").html('<a href="#"><img src="fileadmin/templates/img/btn_event.gif" /></a>'); for (var i = 0, l = 6; i < l; i ++) { jQuery(events[i]).css({'left':pos+"px"}); pos = pos+150; jQuery(date[i]).html("<p>" + monat[m] + "</p>"); m++; }; /* MouseOver Effekt für die Daten // ausblenden nach 900 MS. *************************** */ jQuery("dt.link").hover(function(){ if(!jQuery(this).next().hasClass("active")) { jQuery("dt.active").fadeOut().removeClass("active"); jQuery(this).next().fadeIn().delay("900").addClass("active"); } else { jQuery("dt.active").fadeOut().removeClass("active"); } return false; }); /* Auslesen der Punkte und // positionierung. *************************** */ var events = jQuery('.eventhandler'); for (var e = 0; e < events.length; e++){ var save = jQuery(events[e]).find(".date").html(); var splitter = save.split("."); posLeft = splitter[0]*4; jQuery(events[e]).prev().css("left",posLeft+"px"); jQuery(events[e]).css("left",posLeft+"px"); } }); |
In dem jQuery Script lass ich durch die Datums bestimmung das Jahr und die aktuellen Monate bestimmen. Desweiteren erlaube ich mir, einen Hovereffekt mit einer Ausblendung von 900 MS zu verwenden. Ich geb’ zu, das es noch nicht perfekt ist, aber ich arbeite noch daran Tipps sind immer willkommen!
Der CSS-Aufbau:
1 2 3 4 5 6 7 8 9 10 11 12 | /* Eventliste ***************** */ .eventline {display:block;position:relative;} .eventline .event {position:absolute;top:10px;border-left:1px solid #a0a2a5;height:50px;padding-left:5px;width:400px;} .eventline .event-date p{font-size:23px;color:#c20016;font-weight:700;margin:0px;} .eventline dt.link {position:absolute;top:20px;} .eventline dt.eventhandler {margin-left:3px;position:absolute;top:30px;background:url(../img/btn_eventbg.png) no-repeat left top transparent;padding:32px 10px 10px 10px;color:#fff;} dt.eventhandler .date {display:block;padding-bottom:5px;} dt.eventhandler .title {display:block;} dt.eventhandler .title a {color:#fff} .eventline dd {display:none;} .eventline .even {background-color:transparent;} |
Im CSS Aufbau ist nichts Dramatisches zu bedenken. Ausgenommen, dass ich eine Grafik verwende, die bei meinen Events einen roten Punkt anzeigen. Zudem lasse ich eine Überlappung der Elemente zu, damit der Titel des Events nicht umbrochen wird. Wie das Aussehen soll, kann man jedoch natürlich selber bestimmen
Der Template-Aufbau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!-- ###TEMPLATE_PHPICALENDAR_EVENT_LIST_ODD_ALLDAY### start --> <dt class="link"></dt> <dt class="eventhandler"> <span> <span class="date">###STARTDATE### ###ENDDATE### </span> <span class="title"><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></span> </span> </dt> <dd>###DESCRIPTION###</dd> <!-- ###TEMPLATE_PHPICALENDAR_EVENT_LIST_ODD_ALLDAY### end --> <!-- ###TEMPLATE_PHPICALENDAR_EVENT_LIST_EVEN_ALLDAY### start --> <dt class="link"></dt> <dt class="eventhandler even"> <span> <span class="date">###STARTDATE### ###ENDDATE### </span> <span class="title"><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></span> </span> </dt> <dd class="even">###DESCRIPTION###</dd> <!-- ###TEMPLATE_PHPICALENDAR_EVENT_LIST_EVEN_ALLDAY### end --> |
Da CAL ja ein eigenes Templates verwendet, hier meine Anpassung an diesem.
Screenshot:
TYPO3 – CAL Zeitbestimmung
In CAL (Calender Base) kann man eigentlich die Zeitbestimmen wie man einen Kalender ausgibt, jedoch ist das auf dem ersten Blick nicht immer sichtlich wie dies funktioniert und da es mal wieder im Web nichts wirkliches dazu gibt, zeige ich euch meine Ansätze dazu.
Die Start und Endzeit für den “Calender Base” ist eigentlich wenn man das Prinzip verstanden hat, sehr leicht.
Basis: strtotime
Und wie wird dies nun gemacht?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | #Grundaufbau plugin.tx_cal_controller { view { useGetdate = 1 useCustomEndtime = 1 } } #optionale möglichkeiten # in der VIEW-Ansicht einbauen #start: heute list.starttime = today #start: Monats anfang list.starttime = cal:monthstart #ende: Monats ende list.endtime = cal:monthend #ende: in einer Woche list.endtime: +1 week #ende: in einem Monat list.endtime = +1 month |
So will man aber nun einen dynamischen Calender Base haben, der auch direkt nur von heute bis zum Ende des nächsten Monats läuft muss man dies wie folgt machen.
1 2 3 4 | #start: heute list.starttime = today #ende: endes dieses Monats + 1 Monat list.endtime = cal:monthend +1 month |
Ich hoffe ihr könnt nun damit weiterarbeiten
Viel Spaß
Typo3 – CAL Title in der List View kürzen (crop)
Hi zusammen,
nach dem ich mich mit CAL etwas auseinander gesetzt habe, musste ich auch den Titel in der List-View ändern.
Dies geht aber nicht mal so einfach und das was man findet im Netz ist nicht richtig. Aber hier die Lösung wie es geht.
1 2 3 4 5 6 7 | # ** # * Startseite # ******************** [globalVar = TSFE:id = 15] #Kürzung des Titels in der Listenansicht auf 25 Zeichen auf der Seite ID:15 plugin.tx_cal_controller.view.list.event.alldayTitle.crop = 25|... [global] |
Viel Spaß