I create many models and attributes in an extbase extension outside the extension builder. For this i have cerated a simple small code template for my aptana instance to make the writing for model getter and setter more simply. For this i have created an own ruby bundle. In my bundle.rb comes the following code in action:

You can use this code template in your aptana/eclipse too. Then in your model write as example “description” without the quotes, mark the word and press control+g. Under your word a complete getter/setter function with a protected var appears. Change the \string in to your prefers datatype. It’s for TYPO3 Extensions that are using namespaces.

 

Enjoy this one :-)

Für eine Form Validierung gibt es viele Methoden. parsley.js ist eine Möglichkeit. Die Stärken von parsley.js sind in der einfachen Einbindung und Nutzung zu erkennen. Für die Einbindung reicht es aus nach dem einbinden von jQuery das parsley.js einzubinden. Nach belieben kann auch zuvor eine der vielen Lokalisierungen eingebunden werden. Die Validierung selbst findet in dem Form Element bei den einzelnen Felder über data Attribute statt. Hier gibt es auf der Projektseite eine Umfangreiche Dokumentation. Neben verschiedenen eingebauten Feldvalidatoren wie Inhaltsprüfung, Längenprüfung oder auch Vergleichsprüfung von zwei Feldern, stehen auch Validatoren für Emailadressen und URL sowie viele andere zur Verfügung. Hier ein kleines Beispiel wie das ganze genutzt werden kann (Codequelle: parsleyjs.org)

Einbinden des JavaScripts:

Und so wird das Form aufgebaut:

Auf den ersten Blick ist das alles sehr simpel gehalten. Auf den zweiten Blick übrigens auch :-)

Hier noch ein paar wichtige weiterführende Links:

parsley.js Home

parsley.js Dokumentation

parsley.js API Dokumentation

Download bei github

Adaptive Images in TYPO3. Ein kleiner Workarround für gute Ergebnisse.

Responsive ist gut und schön, allerdings sollte nicht nur die Darstellung des HTML und CSS bei der Umsetzung einer Seite bedacht werden sondern auch die Größe der Bilder die auf dem mobilen Endgerät herunter geladen werden müssen. Nun gibt es ja viele Wege die nach Rom führen, bekanntermaßen. Hier möchte ich einen Weg vorstellen der mit einfachsten Mitteln umzusetzen ist und im Prinzip noch nicht mal etwas mit TYPO3 zu tun. Es geht dabei um das PHP Script von adaptive-images.com. Hier eine Infografik was sich damit erzielen lässt:

Wirkungsgrad adaptive-images.com

Wirkungsgrad adaptive-images.com

 

Der Einbau dieser Adaptive Images Technik ist denkbar Einfach. Unter dem Downloadlink http://adaptive-images.com/download.htm die letzte Version des Scripts herunterladen. Das Archiv wird nun entpackt. Die Datei adaptive-image.php wird auf den Server geladen. Die Datei wird direkt im Document Root abgelegt. Danach wird ein Verzeichnis mit dem Namen “ai-cache” in dem die Adaptive Images abgelegt werden im Document Root erstellt.

Im nächsten Schritt muss ein kleines JavaScript in den “Head” Bereich der Seite eingebaut werden. Am besten gleich am Anfang.

Um dieses JavaScript in TYPO3 gleich nach dem Head Tag zu plazieren kannst Du in Deinem Haupt Template im Setup folgenden Code nutzen:

Mit dem JavaScript wird die Auflösung des Clients für die Auslieferung der Adaptive Images bestimmt.

Auf diese Weise wird der Head Tag von TYPO3 überschrieben und danach sofort das JavaScript eingebunden. Als letzte Maßnahme muss noch die .htaccess Datei im Document Root angepasst werden. Dieser Code muss eingebunden werden:

Wichtig hierbei ist, das dieser Code sehr weit am Anfang der .htaccess Datei steht. Kommt dieser Code zu spät funktioniert das ganze nicht mehr. Am besten also nach

suchen und direkt danach einfügen.

Konfiguration der Breakpoints für Adaptive Images

Zusätzlich können die Breakpoints nach belieben verändert werden. Das Script ist bereits vorkonfiguriert. In der Datei adaptive-image.php finden sich ab Zeile 15 ein paar Konfigurationsparameter:

Nachdem das ganze umgesetzt wurde kannst Du mit einem Tablet oder einem Smartphone die Webseite Besuchen. Du wirst sehen dass im ai-cache Verzeichnis neue Unterverzeichnisse mit den entsprechenden Breakpoints angelegt werden. Darin wird die normale Ordnerstruktur der Dateien wie in TYPO3 selbst erzeugt, und darin liegen die verkleinerten Bilddaten.

Wie funktioniert das nun genau?

Der Ablauf für die Generierung von Adaptive Images ist relativ simpel:

  1. Beim laden der Seite wird die aktuelle Auflösung mit dem JavaScript in ein Cookie gespeichert
  2. Der Browser stellt für jedes Bild dass im Quelltext vorkommt eine Anfrage zum laden an den Webserver
  3. Der Webserver checkt die Anfrage gegen das htaccess File und schaut ob es bestimmte Anweisungen für Bildmaterial gibt
  4. Diese gibt es und die Anweisung lautet dass die Anfrage nun an die adaptive-images.php Datei weitergeleitet werden soll
  5. Die PHP Datei prüft nun ob ein Cookie existiert und holt sich da die Auflösung des Browsers heraus
  6. Die nun bekannte Auflösung wird gegen die oben definierten Breakpoints verglichen und der am besten passende Breakpoint wird gewählt
  7. Es wird geprüft ob für diesen Breakpoint bereits eine Grafik im ai-cache Verzeichnis liegt
  8. Wenn nicht, wird zuerst das originale Bild angefordert
  9. Wenn das originale Bild kleiner als die bekannte Bildschirmgröße ist wird es dem Browser gesendet
  10. Wenn das originale Bild größer als die bekannte Bildschirmgröe ist wird es verkleinert und als Kopie im “ai-cache” Verzeichnis abgelegt und dem Browser zugesendet