RSS

Archive for the ‘Allgemein’ Category:

TemplaVoila – Selectbox mit Ausgabe über Typoscript

3 Comments | This entry was posted on Jul 13 2011

Hallo zusammen, so kann man mit TypoScript und TemplaVoila direkt etwas an den Content rendern.
Hier die genauen Schritte wie das gemacht wird.

Erst gehen wir in TemplaVoila in die Edit-Ebene:

1) Erstellen eines Feldes in TemplaVoila “Not mapped”
1a) fieldname: field_checker
2) Element Preset: Selecter Box
3) unter Form die Parameter angeben

1
2
3
4
5
6
7
8
9
10
11
12

<type>select</type>
<items type="array">
	<numIndex index="0" type="array">
		<numIndex index="0">nein</numIndex>
		<numIndex index="1">0</numIndex>
	</numIndex>
	<numIndex index="1" type="array">
		<numIndex index="0">ja</numIndex>
		<numIndex index="1">1</numIndex>
	</numIndex>
</items>
<default>1</default>

Wobei: numIndex index=”0″ der Wert ist, den man im Backend sieht, und der numIndex index=”1″, der Wert womit gearbeitet wird.

Nach dem das fertig ist, gehen wir in unser TemplaVoila-Feld wo wir in meinem Beispiel, etwas einfügen wollen.
Es geht auch so, dass man sich ein eigenes Feld macht.

Mein Feld ist ein Plugin, welches eingeladen werden soll, wenn der Wert auf “Ja” also “1″ gesetzt ist.

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

# default by templaVoila
	 5 = LOAD_REGISTER
 
	 10 = RECORDS
	 10.source.current=1
	 10.tables = tt_content
	 # 10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
 
	 15 = RESTORE_REGISTER
# default - end
 
70 = COA
70 {
	 if.value = 1
	 if.equals.field = field_checker
	 insertData = 1
	 10 = TEXT
	 10.value = Das sehe ich wenn das Feld "Ja" ausgewählt ist
}
 
75 = COA
75 {
	 if.value = 0
	 if.equals.field = field_checker
	 insertData = 1
	 10 = TEXT
	 10.value = Das sehe ich wenn das Feld "nein" ausgewählt ist
}

Somit haben wir zudem die Möglichkeiten einen Text, Class oder sogar ein Modul einzuladen.
Dazu ist es für die Redakteure am einfachsten mit einer Select-box das Verhalten auszuwählen.

Liebe Grüße
Marc

, , , , ,
Allgemein, Typo3 Stuff

TYPO3 – WT Directory RealURL

0 Comments | This entry was posted on Jun 28 2011

Mit dem kleinen Code unter euren postVars macht ihr WT Directory SEO-Freundlich.

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

..
..
        'postVarSets' => array (
            '_DEFAULT' => array (
 
// WT Directory
              'index' => array(
                  array(
                      'GETvar' => '',
                  ),
              ),
      		'info' => array(
                  array(
                      'GETvar' => 'tx_wtdirectory_pi1[show]',
                                'lookUpTable' => array (
                                        'table' => 'tt_address',
                                        'id_field' => 'uid',
                                        'alias_field' => 'name',
                                        'addWhereClause' => ' AND NOT deleted',
                                        'useUniqueCache' => 1,
                                        'useUniqueCache_conf' => array (
                                                'strtolower' => 1,
                                                'spaceCharacter' => '_',
                                                ),
					),
                  ),
                  array(
                      'GETvar' => 'tx_wtdirectory_pi1[catfilter]',
                  ),
                  array(
                      'GETvar' => 'tx_wtdirectory_pi1[filter][name]',
                  ),
              ),
	'a-z' => array(
		array(
			'GETvar' => 'tx_wtdirectory_pi1[filter][last_name]',
			'valueMap' => array(
				'a'=>'a%',
				'b'=>'b%',
				'c'=>'c%',
				'd'=>'d%',
				'e'=>'e%',
				'f'=>'f%',
				'g'=>'g%',
				'h'=>'h%',
				'i'=>'i%',
				'j'=>'j%',
				'k'=>'k%',
				'l'=>'l%',
				'm'=>'m%',
				'n'=>'n%',
				'o'=>'o%',
				'p'=>'p%',
				'q'=>'q%',
				'r'=>'r%',
				's'=>'s%',
				't'=>'t%',
				'u'=>'u%',
				'v'=>'v%',
				'w'=>'w%',
				'x'=>'x%',
				'y'=>'y%',
				'z'=>'z%',
			),
		),
		array(
			'GETvar' => 'tx_wtdirectory_pi1[pointer]',
		),
	),
// WT Directory : END
     ),
),
..
..

#updatet: 04-07-2011

, , , ,
Allgemein

TYPO3 – CAL – Timeline | Today – +6 Monate dynamisch

1 Comment | This entry was posted on Jun 27 2011

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:

, , , , ,
Allgemein
Older Entries
Newer Entries