Gefiltert nach Tag typo3

TYPO3 version chart with jQuery UI and Isotope

22. April 2013, Felix Nagel in jQuery, TYPO3

  • Schreenshot der TYPO3 version chart Java-Script Applikation von Felix Nagel
    Schreenshot der TYPO3 version chart Java-Script Applikation von Felix Nagel

A TYPO3 version visualization.

It's powered by jQuery, jQuery UI and jQuery Isotope. The used json data is provided by the TYPO3 server team and queried via YQL. Thanks for providing such great tools and services!

Please report bugs via GitHub's Bugtracker (Issues) or make a patch and send a pull request. Please feel free to add feature requests for adding additional information regarding specific TYPO3 versions or branches!

Grab the source at GitHub or download the latest zip. It's Open Source - inspiring people to share!



TYPO3 Version Chart




TYPO3 version chart with jQuery UI and Isotope

How to use XLF files in TYPO3 extbase extensions

09. November 2012, Felix Nagel in TYPO3, Extbase & Fluid

  • logo-typo3 01
    (c), CC BY-ND 2.5

Adding a localization to an "Extension Builder" generated TYPO3 extbase extension could be a little tricky as it uses the xlf (XLIFF) format.


This is a simple way to add new localizations without using extra tools like Virtaal or a Pootle server.

  1. copy file and prefix filename with language coed: example.xlf to de.example.xlf
  2. add target-language="de" attribute to node file
  3. change source nodes to target



Please make sure...

  • your files are UTF8 encoded
  • to encapsulate special chars in CDATA
															<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
															<xliff version="1.0">
															<file source-language="en" datatype="plaintext" original="messages" date="2012-06-05T10:52:05Z" product-name="ty_myext">
															<trans-unit id="demo_id">
															<source>Dummy text</source>
Default language xlf file (locallang.xlf)
														<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
														<xliff version="1.0">
														<file source-language="en" target-language="de" datatype="plaintext" original="messages" date="2012-06-05T10:52:05Z" product-name="tx_myext">
														<trans-unit id="demo_id">
														<target>Das ist ein Test.</target>
German language xlf file (de.locallang.xlf)

How to use XLF files in TYPO3 extbase extensions

TYPO3: Use Content Element uid in extbase / fluid templates

20. Juli 2012, Felix Nagel in TYPO3, Extbase & Fluid, English

  • logo-typo3 01
    (c), CC BY-ND 2.5

Currently extbase and fluid do not have a built-in functionality to use the uid of the current content element (aka our extbase plugin) within a fluid template.


This is an example of how to get the uid using a simple viewHelper. This works for third party extensions as we don't need to assign the uid to a view.


I use this to set a unique HTML id attribute so its easier to select the element with jQuery.

															class Tx_MyExt_ViewHelpers_UidViewHelper extends Tx_Fluid_Core_ViewHelper_AbstractViewHelper {
															* @var Tx_Extbase_Configuration_ConfigurationManagerInterface
															protected $configurationManager;
															* @param Tx_Extbase_Configuration_ConfigurationManagerInterface An instance of the Configuration Manager
															* @return void
															public function injectConfigurationManager(Tx_Extbase_Configuration_ConfigurationManagerInterface $configurationManager) {
															$this->configurationManager = $configurationManager;
															* Set uid of the content element
															* @return int $uid The uid of the content element
															public function render() {
															// fallback
															$uid = uniqid();
															if ($this->templateVariableContainer->exists("contentObjectData")) {
															// this works for templates but not for partials
															$contentObjectData = $this->templateVariableContainer->get("contentObjectData");
															$uid = $contentObjectData['uid'];
															} else {
															// this should work in every circumstance
															$cObj = $this->configurationManager->getContentObject();
															$uid = $cObj->data['uid'];
															return $uid;
How to receive the CE uid in a fluid view helper

TYPO3: Use Content Element uid in extbase / fluid templates

Plupload Frontend Plugin and API for TYPO3

14. Februar 2012, Felix Nagel in TYPO3, jQuery, English

  • logo-typo3 01
    (c), CC BY-ND 2.5

My new TYPO3 extension "Plupload for FE" (EXT:pluploadfe) provides an API for using Plupload within your own extensions. Plupload is a highly usable and advanced upload handler.



Basically I've implemented an eID to handle file uploads managed by simple configuration records. You are able to build whatever is possible with Plupload by using TypoScript and template files.


What exactly is Plupload?

Cite from

Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.


The developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.


The extension additionally provides a simple FE plugin. The demo template provides a nice jQuery UI widget which uses the best technology available on clientside. 


An API example to upload files and send download links via email is available in TER, search for EXT:mailfiles.




Plupload for FE is available in the TYPO3 TER



Plupload Frontend Plugin and API for TYPO3

TYPO3 Extension: Per Scheduler automatisch Dateien löschen

18. Dezember 2011, Felix Nagel in TYPO3

  • logo-typo3 01
    (c), CC BY-ND 2.5

Meine neue TYPO3 Extension deletefiles löscht per Scheduler Task automatisch Dateien und Ordner. Perfekt um Wartungsprozesse zu automatisieren oder den Datenschutz zu verbessern.


Deletefiles löscht per Cronjob (genauer einem Scheduler Task, verfügbar seit TYPO3 4.3) in vorgegebenen Intervallen alte Dateien und Ordner. Man kann dabei zwischen verschiedenen Modi wählen (einem gesamten Ordner, nur Dateien, nur Ordner, Ordner und Dateien, Ordner und Dateien mit rekursiver Prüfung) und das minimale Alter konfigurieren.

Ursprünglich wurde die Extension für den Kundenbereich der Webseite der väterlichen Druckerei Nagel entwickelt und mithilfe meines Arbeitgebers Paints Multimedia GmbH weiter verbessert und ausgebaut. 


Die Extension ist im TER verfügbar:


deletefiles im TER



Kommentare bitte hier oder per Mail.



TYPO3 Extension: Per Scheduler automatisch Dateien löschen

TYPO3 RTE processing rules und htmlarea Konfiguration

12. November 2011, Felix Nagel in TYPO3

  • logo-typo3 01
    (c), CC BY-ND 2.5

Eine für die meisten Standard Use Cases passende Konfiguration für den bei TYPO3 mitgelieferten Rich Text Editor htmlarea.

Inklusive der passenden processing rules und Unerstützung von DAM (auch in tt_news).


Ich erweitere hier, im Gegensatz zur früheren Konfiguration, die bei htmlarea mitgelieferte Standard Konfiguration.

Beide Snippets müssen ins Page TS. Die processing rules sollten vor den htmlarea Einstellungen platziert werden.


Im Extension Manager müssen idealerweise die folgenden Einstellungen getroffen werden:



  • Default configuration settings [defaultConfiguration] auf "Typical" einstellen
  • Enable images in the RTE [enableImages] aktivieren wenn benötigt
  • Enable additional inline elements [enableInlineElements] deaktivieren



  • media tag [mediatag] aktivieren
  • htmlArea RTE integration [htmlAreaBrowser] aktivieren



Ggf. müssen noch die erlaubten tags (allowTags) in den Constants erweitert werden (siehe letztes Snippet), zum Beispiel wenn attr als tag benutzt werden soll.



																		# ***************************************************************************************
																		# TYPO3 htmlArea RTE configuration
																		# Author: 		Felix Nagel for Paints Multimedia GmbH,
																		# Info & DL:
																		# ***************************************************************************************
																		# we need to include default parsing rules
																		<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/skin_standard/typoscript/system/tsconfig_rte_proc_rules.ts">
																		# Define labels and styles to be applied to class selectors in the interface of the RTE
																		RTE.classes >
																		# this class needs to be added to you CSS file (contentCSS)
																		RTE.classes.special-text {
																		name = Abgesetzter Text
																		# Anchor classes configuration for use by the anchor accesibility feature (htmlArea RTE only)
																		RTE.classesAnchor >
																		# Default RTE configuration
																		RTE.default {
																		# add CSS file for rte
																		contentCSS = fileadmin/templates/css/rte.css
																		# disable right click
																		disableRightClick = 1
																		# acronym sys folder (id, not needed for admins as webmount is used)
																		# buttons.acronym.pages = 306
																		# buttons.lockBEUserToDBmounts = 1
																		# image in RTE relevant
																		# please note you need to enable images in the EM and add width and height to RTE.default.proc.entryHTMLparser_db.tags.img.allowedAttribs
																		# media_ prefix when using DAM, see
																		buttons.image.options.removeItems = dragdrop, media_dragdrop, magic, media_magic
																		buttons.image.options.plain.maxWidth = 960
																		buttons.image.options.plain.maxHeight = 1000
								 = align, border, float, paddingTop, paddingRight, paddingBottom, paddingLeft, clickenlarge
																		# clean out crap
																		removeComments = 1
																		enableWordClean = 1
																		# removed strike and u tag from default config
																		removeTags = center, font, o:p, sdfield
																		# modified showButtons array (should be sufficient in most use cases)
																		# row 1: text styles and tools
																		# row 2: standard buttons
																		# row 3: table operations
																		showButtons (
																		blockstyle, formatblock, bar, copy, cut, paste, pastebehaviour, pastetoggle, findreplace, bar, undo, redo, bar, linebreak,
																		link, image, bar, bold, italic, underline, strikethrough, bar, subscript, superscript, bar, orderedlist, unorderedlist, acronym, insertcharacter, line, bar, removeformat, chMode
																		# need to use one line! Just copy showButtons into one line!
																		toolbarOrder = blockstyle, formatblock, copy, cut, paste, pastebehaviour, pastetoggle, findreplace, bar, undo, redo, bar, linebreak, link, image, bar, bold, italic, underline, strikethrough, bar, subscript, superscript, bar, orderedlist, unorderedlist, acronym, insertcharacter, line, bar, removeformat, chMode
																		# added div element to default config
																		hidePStyleItems = pre,address,div
																		# Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only).
																		# ignoreMainStyleOverride = 1
																		# List all class selectors that are allowed on the way to the database
																		proc.allowedClasses (
																		# Configuration of the anchor accessibility feature (htmlArea RTE only)
																		# These classes should also be in the list of allowedClasses.
																		classesAnchor = more, more-button, external-link, modalbox, modalbox-big, company, exploration, oilgas
																		classesAnchor.default {
																		page =
																		url =
																		file =
																		mail =
																		# needed, otherwise enableWordClean wont work, regression, see
																		RTE.default.showButtons := addToList(cleanword)
																		RTE.default.toolbarOrder := addToList(cleanword)
																		# Use same processing as on entry to database to clean content pasted into the editor
																		RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db
																		# remove all classes so we have a clean start after pasting (allowed classed wont work on enableWordClean)
																		RTE.default.enableWordClean.HTMLparser.tags.p.fixAttrib.class.unset = 1
																		# make DAM usable in tt_news entries
																		RTE.config.tt_news.bodytext.proc.overruleMode = ts_css,txdam_media
TYPO3 htmlArea RTE configuration
																	# ***************************************************************************************
																	# TYPO3 RTE processing rules for htmlArea RTE
																	# Author: 		Felix Nagel for Paints Multimedia GmbH,
																	# Info & DL:
																	# ***************************************************************************************
																	# Default RTE processing rules
																	RTE.default.proc {
																	# TRANSFORMATION METHOD
																	# We assume that CSS Styled Content and DAM is used.
																	overruleMode = ts_css, txdam_media
																	# TAGS ALLOWED OUTSIDE P & DIV
																	# add some more standard elements
																	allowTagsOutside = hr, address, ul, ol, li, img, table, object, embed, code, pre
																	entryHTMLparser_db {
																	tags {
																	# IMAGE TAGS (Extension Manager must be enabled, too)
																	img.allowedAttribs = style,class,id,src,width,height
																	img.rmTagIfNoAttrib = 1
																	# disable above and enable below to remove all images
																	# img.allowedAttribs = 0
																	# try to clean up Word crap (advise users to use clean copy button!)
																	# id is needed for RTE internal reasons
																	span.allowedAttribs = id
																	span.rmTagIfNoAttrib = 1
																	div.rmTagIfNoAttrib = 1
																	# add acronym
																	acronym.allowedAttribs = id, title, dir, lang, xml:lang, class
																	# We use this rule instead of the denyTags rule so that we can protect custom tags without protecting these unwanted tags.
																	# modify default config
																	removeTags = center, font, link, meta, o:p, sdfield, style, title, big, small
																	exitHTMLparser_db {
																	# remap some old tags
																	tags {
																	b.remap = strong
																	i.remap = em
																	s.remap = strike
																	# Make sure we use ts_css transformation
																	# add DAM
																	RTE.config.tt_content.bodytext.proc.overruleMode = ts_css, txdam_media
																	RTE.config.tt_content.bodytext.types.text.proc.overruleMode = ts_css, txdam_media
																	RTE.config.tt_content.bodytext.types.textpic.proc.overruleMode = ts_css, txdam_media
																	# needed for DAM media tag within tt_news
																	RTE.config.tt_news.bodytext.proc.overruleMode = ts_css, txdam_media
TYPO3 RTE processing rules for htmlArea RTE
																# Add tags to constants
																styles.content.links.allowTags := addToList(abbr, acronym)
TYPO3 add tags to constants

TYPO3 RTE processing rules und htmlarea Konfiguration

TYPO3 formidable with jQuery Datepicker

22. Oktober 2011, Felix Nagel in TYPO3, jQuery, English

  • logo-typo3 01
    (c), CC BY-ND 2.5

The TYPO3 extension Seminars uses Formidable for rendering forms and some Java-Script wigdets. We're using jQuery for all our JS based scripting and jQuery UI for a few User Interface related purposes. To achieve a consistent look for all JS UIs we wanted to change the pretty unusable and unsexy looking default DHTML Calendar of formidable with the jQuery UI one. 

As the default jQuery UI Datepicker does not support time selection I've added the jQuery Timepicker Addon.


To change the hardcoded formidable rendering I've implemented an own renderlet based upon the example renderlet extension by Jerome Schneider.


I released my resulting extension to the TER as I was asked so in the Mailinglist. Please give feedback or ask a question via email or (better) as a comment down below.





Formidable DATE Renderlet with jQuery support

TYPO3 formidable with jQuery Datepicker

TYPO3: lokalisierte Datumsausgabe mit Fluid

07. Oktober 2011, Felix Nagel in TYPO3, Extbase & Fluid

  • logo-typo3 01
    (c), CC BY-ND 2.5

Um innerhalb von TYPO3 mit Extbase bzw. dessen Template-Engine Fluid aus einem Zeitstempel (wie zum Beispiel in einem crdate oder tstamp Datenbankfeld) lokalisierte Datumsausgaben zu rendern gibt es verschiedene Ansätze. 


Da wären der eigene ViewHelper oder die offizielle Variante per locallang Datei und Bordmitteln. Beide sind recht umständlich, letztere nötigt dem Entwickler die nicht unerhebliche Mehrarbeit auf für alle Sprachen Übersetzungen zu hinterlegen.


Dabei geht es, ebenfalls mit Fluid Bordmitteln, auch sehr einfach. Mit etwas Typoscript und dem CObject standard view helper.



Dazu muss im der Datensatz mit dem Timestamp (in diesem Fall newsItem.datetime) an den view helper übergeben werden. Dazu muss die inline Notation genutzt werden. Das Ergebnis übergeben wir dann an das zuvor verfügbar gemachte Typoscript Snippet das die eigentliche Formatierung übernimmt.

																		<!-- Fluid view helper -->
																		<f:cObject typoscriptObjectPath="lib.ll_date" data="{'U' date:'{newsItem.datetime}')}" />
Lokalisierte Datumsausgabe: Fluid Templating
																	# localize date format, used within the fluid templates
																	lib.ll_date = TEXT
																	lib.ll_date {
																	current = 1
																	strftime = %d. %B %Y
Lokalisierte Datumsausgabe: Typoscript

TYPO3: lokalisierte Datumsausgabe mit Fluid

Eigene Typoscript conditions

30. Juli 2011, Felix Nagel in TYPO3, Open Source

  • logo-typo3 01
    (c), CC BY-ND 2.5

TypoScript Conditions sind eine der vielen praktischen Seiten die mit der Verwendung von TypoScript einhergehen. TYPO3 kommt standardmäßig mit verschiedenen nützlichen Weichen (siehe z.B. hier oder hier) aber manchmal hat man Bedarf für eine eigene TypoScript Condition. Dieser Blogpost beschreibt was dazu nötig ist und beinhaltet eine Beispielextension.


Alles was man benötigt ist eine kleine PHP Funktion (die in jedem Fall mit user_ beginnen muss) in der typo3conf/localconf.php oder in eine ext_localconf.php einer Extension:

																		function user_isInDevIpMask(){
																		global $TYPO3_CONF_VARS;
																		$flag = false;
																		// IP-based Access restrictions
																		$devIPmask = trim($TYPO3_CONF_VARS['SYS']['devIPmask']);
																		$remoteAddress = t3lib_div::getIndpEnv('REMOTE_ADDR');
																		if (t3lib_div::cmpIP($remoteAddress, $devIPmask)) {
																		$flag = true;
																		return $flag;
Beispiel Funktion Typoscript Condition

In diesem Beispiel teste ich ob die Anfage aus dem in den TYPO3 Conf Vars definierten IP Bereich stammt. Auf diese Art lassen sich zum Beispiel bestimmte Scripte wie Firebug Lite oder JsLint einbinden wenn man sie benötigt:

																	# when in dev IP mask and not Firefox
																	[userFunc = user_isInDevIpMask] && [browser = msie,netscape,opera,safari]
																	page.headerData.3 = HTML
																	page.headerData.3.value = <script type="text/javascript" src=""></script>
Typoscript Code für eigene condition

Dieses Beispiel ist im TYPO3 TER verfügbar unter dem Namen devipmask:



devipmask im TER

Eigene Typoscript conditions

Neue TYPO3 Extension: Generic Gallery

28. Mai 2011, Felix Nagel in TYPO3, Webentwicklung

  • logo-typo3 01
    (c), CC BY-ND 2.5

Bereits seit einiger Zeit ist eine neue Extension von mir im TER: Generic Gallery. Entstanden aus dem Wunsch nicht mehr für jede, wenig aber genug vom Standard abweichende, Bildergalerie, Teaser oder Visual Slide Geschichte eine neue Extension zu programmieren. Ziel war es ein einheitliches Formular im Backend und maximale Flexibilität im Forntend zu gewährleisten.


Die Extension bietet ein ausgeklügeltes, auf schnelle Frontend Entwicklung ausgelegtes Templating und ein einfaches aber funktionales Backend Layout. Das erste Bild fest im Quellcode alle weiteren per Java-Script hinzufügen? Reihen mit einer bestimmten Anzahl von Bildern? Mehrere Thumbs in verschiedener Größe und zugeschnitten? Kein Problem.


Die Extension kann mit jedem DAM Feld umgehen (und unterstützt dabei Fallback Felder), kann EXIF sowie IPTC Daten verarbeiten und hat eine AJAX Schnittstelle (XML oder JSON). Damit sollte so ziemlich jede Anforderung im Rahmen der Möglichkeiten von HTML, CSS und einem Java-Script Framework wie jQuery oder MooTools umsetzbar sein.


Gepflegt wird entweder, für eine große Anzahl von Bildern, duch einfaches hinzufügen oder jedes Bild einzeln per angenehmen AJAX gestütztem IRRE Formular. Dann kann auch für jedes Bild noch Titel, Link und per RTE gepflegter Text eingegeben werden.


Screenshots Backend

Generic Gallery Template

															<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
															<html xmlns="" xml:lang="en" lang="en">
															<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
															<title>generic gallery default template file</title>
															<!-- ###TEMPLATE_FILES### begin -->
															<link href="" rel="stylesheet" type="text/css" />
															<script src=""></script>
															<script src=""></script>
															<script type="text/javascript" src="typo3conf/ext/generic_gallery/res/js/ui.ariaLightbox.js"></script>
															<link href="typo3conf/ext/generic_gallery/res/css/lightbox.css" rel="stylesheet" type="text/css" />
															<style type="text/css">
															.tx-genericgallery-pi1 div { float: left; margin: 0 10px 10px 0;}
															<!-- ###TEMPLATE_FILES### end -->
															<script type="text/javascript">
															<!-- ###TEMPLATE_CODE### begin -->
															$(function() {
															<!-- ###TEMPLATE_CODE### end -->
															<h3>content template</h3>
															<!-- ###TEMPLATE_CONTENT### begin -->
															<div id="gallery###UID###">
															<!-- ###ROW### begin -->
															<!-- ###IMAGE_1### begin -->
															<a href="###IMAGE###" class="lightbox">
															<img src="###THUMB_1###" alt="###DAM_TITLE###" title="###DAM_DESCRIPTION###" />
															<span><a href="###LINK###">###TITLE###</a></span>
															<!-- ###IMAGE_1### end -->
															<!-- ###ROW### end -->
															<!-- ###TEMPLATE_CONTENT### end -->
Beispiel Template Datei (default.html Demo): alles was HTML, CSS und Java-Script angeht kann bequem in einer HTML Datei erledigt werden.

Generic Gallery TypoScript

														plugin.tx_genericgallery_pi1 {
														gallery {
														default {
														name = Default Gallery
														template = EXT:generic_gallery/res/templates/default.html
														damMarker = title, description, file_name, file_path, file_size, file_type, alt_text, caption, hpixels, vpixels, color_space
														marker {
														# multiple fields possible as backfall
														IMAGE_DESCRIPTION = description // caption // alt_text // title
														range {
														content = 1-1000
														# code = 1-100
														image {
														maxW = 800
														maxH = 600
														thumb {
														1 {
														maxW = 200
														maxH = 100
Konfiguration für einen Galerie Typ, Erklärung der Einstellungen in der Dokumentation

Demo & Download

In der neuen Version 3.0.0 kamen die marker mit Backfall und die leider noch undokumentierten custom marker hinzu. Außerdem hab ich die Demos verbessert.


Zur Zeit ist die Nutzung der Extension DAM Pflicht. Zumindest sobald ich es brauche oder jemand mir einen patch zukommen lässt.




Demo Fotogalerie




Ext Key: generic_gallery

Neue TYPO3 Extension: Generic Gallery