The most basic special element consists of a HTML template which can be filled dynamically with the use of markers.
The markers are named like the database fields of the tt_content table. For more flexibility you can use TypoScript to manipulate the values of the markers eg. Rendering the “title”-field as picture, calling user functions,....
A special element consists of the following directory/file structure:
a main direcotry – this is also the unique specialelement key (like extension-key)
the following files within the main direcotry:
ext_tables.php: you can change the TCA array of tt_content for the element. eg. Headline for “title” field should be named “enter title here” instead of “title”
ext_tables.sql: if your element extends the tt_content database, enter the SQL statement here
ext_typoscript_setup.txt: rendering definition (TS) for markers used in HTML-template
icon.gif: specialelement icon shown in the “create new content element” wizard and in the BE-module
locallang.php: translation of texts used in the specialelement
template_normal.html, template_print.html, template_[whatever].html: HTML-templates used for rendering
locallang_csh.php (optional): to override default help-messages
If one of the files is missing, it's highlighted in the BE as shown here:
Instead of using a hardcoded path to the specialelement you should use the placeholder “{elementPath}” because the path can be different from installation to installation. Attention:{elementPath} includes already a / at the end.
If you are tired typing the element name, you can use the placeholder “{elementName}”.
<?php
# overrides the standard bodytext label for this specialelement
$temp_tca['columns']['bodytext']['label'] = 'LLL:{elementPath}{elementName}/locallang.php:bodytext';# sometimes TCA settings won't be overridden correctly because of array-merge.
# In this case type the fields seperated with “,” here
$clearColumns = 'header_layout,bodytext';
?>
Using IRRE functionality within a SpecialElement?
You need to define a DB-field for storing the relation to the IRRE elements.
example:
$temp_tca['columns'] = array(
"th_specialelements_programs" => Array (
"exclude" => 1,
"label" => "LLL:EXT:irre_hotel/locallang_db.xml:tx_irrehotel_hotel.programs",
"config" => Array (
"type" => "inline",
"foreign_table" => "tx_irrehotel_program",
"foreign_field" => "parentid",
"foreign_table_field" => "parenttable",
"maxitems" => 10,
)
),
);
In order to make sure, that the IRRE elements are also copied when the SE is copied, you have to define the DB-field in the global TCA array as well:
$TCA['tt_content']['columns']['th_specialelements_programs'] = Array (
"exclude" => 1,
"label" => "LLL:EXT:irre_hotel/locallang_db.xml:tx_irrehotel_hotel.programs",
"config" => Array (
"type" => "inline",
"foreign_table" => "tx_irrehotel_program",
"foreign_field" => "parentid",
"foreign_table_field" => "parenttable",
"maxitems" => 10,
)
);
## Table structure for table 'tt_content'#CREATE TABLE tt_content (title2 varchar(45) DEFAULT '' NOT NULL);
Instead of using a hardcoded path to the specialelement you should use the placeholder “{elementPath}” because the path can be different from installation to installation. Attention:{elementPath} includes already a / at the end.
If you are tired typing the element name, you can use the placeholder “{elementName}”.
##################
# TypoScript definitions
##################
lib.image = IMAGE
lib.image {file.maxW < temp.width
imageLinkWrap = 0
stdWrap.spaceAfter=5
wrap = |<br>
altText.field=altText
}
includeLibs.rss_display = {elementPath}{elementName}/userfunc_rss_display.php# fetch the RSS-feed
lib.rss = USER
lib.rss {userFunc = user_rss_display->user_rss_fetch
}
##################
# which HTML-template should be used in page type 0
##################
template = template_normal.html
##################
# which HTML-template should be used in page type 98##################
[globalVar = TSFE:type=98]template = template_print.html[global]
##################
# TS rendering of elements (= fieldnames in tt_content)
# syntax:
# elements.[fieldname of tt_content] = [TS]
##################
elements.bodytext =< lib.parseFunc_RTE
elements.image < lib.image
##################
# TS rendering of self-defined markers
# syntax:
# markers.[youown markername] = [TS]
markers.rss < lib.rss
##################
# element/markers for print template
##################
98 {elements < elements
}
Special TypoScript:
includeCSS.[name] = path
possible to add more than one stylesheet
Guidelines for icons:
green: normal text
orange: photo
green border: headline
blue: links
lila: flash
yellow: HTML/phpscript output
loops are symbolised with a + (eg. Several images below each other)
Examples:
(specialelement title is defined here in “be_title”)
<?php
$LOCAL_LANG = Array (
"default" => Array (
# be-title of this specialelement
'be_title' => 'RSS display',
# be-description of this specialelement
'be_description' => 'displays RSS newsfeeds on your webpage',
# overruled TCA label for “header” field
'header' => 'default URL (.xml, .rdf)',
),
"de" => Array (
'be_title' => 'RSS Anzeige',
'be_description' => 'zeigt RSS in Listendarstellung an',
'header' => 'default URL (.xml, .rdf)',
),
);
?>
use ###db_[db fieldname of tt_content table]### for raw output of the value as it's stored in the DB
use ###[db fieldname of tt_content table]### for TS rendered value (must be defined in TS as element.[db fieldname] = [TS]
<table border="0" width="100%">
<tr>
<td align="left">
<b>###db_header###</b><br>
<i>###db_subheader###</i><br>
###bodytext###<br>
</td>
</tr>
</table>
Loops (image, media):
In fields like “images”, “media” multiple files are stored seperated by “,”. To loop through these files in your HTML-template you have to use the following syntax:
HTML-template example for image-loop:
<table border="0" cellspacing="0" width="20" cellpadding="0"><!-- ###image### begin --><!-- ###LOOP_image### begin--><tr> <!-- ###image0### begin--><td style="padding:5px 12px 5px 0px;">###image_0### ###altText###</td><!-- ###image0### end--> <!-- ###image1### begin--><td style="padding:5px 12px 5px 0px;">###image_1### ###altText###</td><!-- ###image1### begin--></tr><!-- ###LOOP_image### end--><!-- ###image### end --></table>
TS-snippet for image-loop:
lib.small_image = IMAGElib.small_image { file.maxW = 215 imageLinkWrap = 1 imageLinkWrap { enable=1 JSwindow = 1 width=800m height=600 bodyTag = <BODY bgColor=white> wrap = <A href="javascript:close();"> | </A> JSwindow.expand = 17,20 } stdWrap.spaceAfter=0 altText.field=imagecaption # special TS for use in specialelements: altText.marker.wrap = <br>|}elements.image < lib.small_image
Overwrites the default help-texts in the help-popup for the specific field.
$LOCAL_LANG = Array (
'default' => Array (
# “header” field
'header.description' => '11111111111111111111111.',
'header.details' => '22222222222222222222.',
'header.image' => '',
'header.seeAlso' => '',
# “pages” field
'pages.description' => '3333333333333333333333.',
'pages.details' => '444444444444444444444444',
'pages.image' => '',
'pages.seeAlso' => '',
),
);
How to adjust the backend view of a special element
create a folder "be" in the folder of the special element
create at least the files "ext_typoscript_setup.txt" and a template file in this folder.
it is possible to call user functions!
for backend view, the typoscript setup gets parsed and the view gets generated.
known Problems:
It is not possible to use stylesheet files in BE. Please write your CSS-styles for BE-view inline into the template file
image processing in BE does not work
Tipp:
If you are using user-functions, you can call the same function in FE and BE rendering – in case you need some conditions depending on FE/BE rendering, you simply can pass a variable to the user-function so that you know if it's called from FE or BE.
Example:
-- be/ext_typoscript_setup.txt --
# include the userfunction class
includeLibs.somthing = {elementPath}{elementName}/userfunc.php#userFunc
content = USER
content {# call user function
userFunc = user->doSomething
# additional parameter because this user function is used to generate both frontend and backend view
be-mode = 1
}
#set templates
template = template_normal.html
markers.content < content
