Codelevel X logo
QR Barcode
Homex86-ProgrammierungProjekteTYPO3
Suche
>> HomeTYPO3 > Tipps & Tricks

TYPO3



Tipps & Tricks für TYPO3 mit TypoScript

Bildgröße im Frontend festlegen

Eine Eigenart von TYPO3 ist das Anpassen der Bildgrößen durch die integrierte Rendering Engine. Je nach Ausgestaltung der Webseite werden dabei Bilder automatisch skaliert obwohl genügend Platz für deren Anzeige in der Originalgröße vorhanden wäre. Die Bilder erscheinen dadurch unscharf. Verhindern läßt sich das Verhalten durch Anpassen der maximalen Bildgrößen im Template. Die Bildgrößen werden durch Konstanten festgelegt, die im Template überschrieben werden können.

styles.content.imgtext.maxW=726
styles.content.imgtext.maxWInText=400

Der erste Eintrag legt die maximale Bildgröße für ein einzelnes Bild fest, dass je nach Bildposition vor oder nach dem Textblock angezeigt wird, der zweite Eintrag legt die maximale Bildgröße fest für Bilder im Fließtext oder wenn mehrere Bilder nebeneinander angezeigt werden. Beide Angaben erfolgen in Pixel.

individuelles Browser Icon mit TYPO3

Icon

Fast jede Webseite hat neben einem individuellen Design auch ein möglichst individuelles Icon. Das Icon ist eine kleine Grafik die in der Browserzeile neben der URL angezeigt wird und einen Wiedererkennungseffekt bieten kann, ebenso taucht das Icon in der History der Browser auf. Das Icon Format (*.ico) erkennen viele Bildbearbeitungsprogramme und erlaubt eine Grafik mit den Abmessungen 32x32 Pixel, die in der Browserzeile normalerweise aber nur mit 16x16 Pixel dargestellt wird. Man kann daher nicht zu viele Details in die Icon Grafik packen. Das Icon für Codelevel X ist links in der Ecke dieses Blocks abgebildet.

Zur Erstellung des Icons kann man zahlreiche Bildbearbeitungsprogramm verwenden, leider haben sehr umfangreiche Programme wie Adobe Photoshop dieses wichtige Format nicht integriert. Allerdings kann man zunächst eine simple GIF Grafik in der Größe 32x32 Pixel mit fast jedem Grafikprogramm erstellen und diese anschließend mit einem im privaten Bereich kostenlosen Programm wie IrfanView konvertieren (als GIF laden und als ICO abspeichern).

Die Grafikdatei wird dann am Besten mit dem Fileupload im Backend von TYPO3 hochgeladen und mit folgender TypoScript Anweisung einfach im Webauftritt aktiviert:

page.shortcutIcon=fileadmin/images/favicon.ico

Weitere Informationen dazu finden sich auch im Internet unter http://www.favicons.de/.
Das komfortable Grafikkonvertierungsprogramm IrfanView: http://www.irfanview.de/

Seiten aus dem Suchindex löschen

Normalerweise wird der Suchindex des TYPO3 Moduls IndexedSearch automatisch erstellt, aktualisiert oder auch gelöscht. Mitunter kann es jedoch in bestimmten Situationen dazu kommen, dass ein Index Eintrag verbleibt obwohl die ursprüngliche Seite nicht mehr existiert. Ein Beispiel ist die Umwandlung des Seitentyps. Wenn man zunächst eine einzelne Seite erstellt und diese später aufgrund weiterer Seiten geändert in Verweis, Einstiegspunkt oder externe URL oder ähnlich, so ist der Inhalt der Seite eigentlich nicht mehr verfügbar oder wird auf eine untergeordnete Seite kopiert. Solche Änderungen kann IndexedSearch in der aktuellen Version offenbar nicht auflösen.

Man kann solche einzelnen verwaisten Objekte aus dem Suchindex löschen. Im Backend wählt man dazu Info und die entsprechende Seite oder den Seitenbaum, der zu bearbeiten ist. Im Fenster links werden dann die indizierten Seiten aufgelistet, die man durch Klick auf das weiße (!) Papierkorbsymbol löschen kann. Vorsicht beim roten Papierkorbsymbol, hier werden alle aufgelisteten Seiten (im Zweifel auch die ganze Webseite, je nachdem wo man sich befindet) aus dem Suchindex gelöscht. Durch den Neuaufruf der Seiten kann man das zwar beheben / wiederherstellen, bei sehr umfangreichen Webseiten ist dies eine enorme Arbeit und alle nicht indizierten Seiten werden dann über die Suchfunktion nicht mehr gefunden, bis diese (eventuell auch durch einen Anwender) wieder neu aufgerufen wurden.

(Suchindex bearbeiten, Modul IndexedSearch)

Mehrere CSS und JavaScript Dateien einbinden

CSS und auch Javascriptdateien können nahezu in beliebiger Anzahl vom eigenen oder auch von fremden Servern geladen werden. Sofern Dateien vom eigenen Server grundsätzlich immer geladen werden, macht es Sinn, diese zu einer Datei zusammenzuführen. Manchmal kann das aus Wartungsgründen aber auch kontraproduktiv sein (unterschiedliche Module) oder es kann wünschenswert sein bestimmte Dateien nur auf speziellen Seiten zu laden. In dem Fall bedient man sich am Besten eines Erweiterungstemplates.

page.includeCSS {
  file1=fileadmin/css/codelevelx.css
  file2=fileadmin/css/typo3spec.css
}

page.includeJS {
  file1=fileadmin/javascript/googleanalytics.js
  file2=fileadmin/javascript/toolbox.js
}

Keywords und Beschreibung in TYPO3 einbinden

(Metadaten)

In den Seiteneigenschaften gibt es unter Metadaten neben den Daten des Redakteurs auch Eingabefelder für  Meta-Tags (Stichworte) und Beschreibung der Seite.

Diese sind idealerweise vom erfassenden Redakteur auszufüllen und helfen Suchmaschinen dabei, die Seite korrekt zu indizieren, also nach den erfassten Stichworten zu speichern und bei entsprechenden Suchabfragen aufzulisten. Je besser diese Felder ausgefüllt sind, umso besser wird die entsprechende Webseite in den Suchmaschinen gefunden.

Um die entsprechenden Felder im Template in den Kopfbereich der jeweiligen Seite automatisch zu integrieren, sind folgende Anweisungen im TypoScript Code notwendig:

page.meta.KEYWORDS.field=keywords
page.meta.DESCRIPTION.field=description

Das Feld Description kann die Suchmaschine den Anwendern bei Auflistung der Treffer anzeigen. Hier sollte in wenigen Worten oder Sätzen der Inhalt der Seite zusammengefaßt werden. So kann der Sucher entscheiden, ob der gefundene Treffer sinnvoll ist oder nicht im Rahmen seiner Suche.

Header Daten und Meta Daten in TypoScript

Manchmal benötigt man zusätzliche Daten, die in den Kopf einer Seite (head Bereich) integriert werden sollen. Für die normalen Meta Daten wie Keywords, Description sollte man die Aufgabe den Redakteuren der Seiten überlassen und die entsprechenden Felder mit den Seiteneigenschaften verwenden. Manchmal gibt es technische Gründe in den HEAD Bereich einer Seite Tags mit unterzubringen. Dafür gibt es 2 Varianten:

page.headerData.999=COA
page.headerData.999.wrap=<meta name="google-site-verification" content="...individuell..." />

Dieses Beispiel setzt ein Metatag um ein "Google Site Verification"-Tag in die Seite zu integrieren. Dabei können beliebig viele headerData Tags verwendet werden, diese werden in der Reihenfolge der Nummerierung in den Kopfbereich der Seite (Head) integriert. Auf die genaue Position hat man hier jedoch keinen Einfluss, nur auf die Reihenfolge.

page.headTag = <head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Diese zweite Variante erzeugt einen Head Tag direkt am Anfang des Dokuments (nach dem HTML Tag) und dient zum Beispiel zur Steuerung von Browsern oder Ähnlichem.

Spamschutz für Emailadressen

Jeder kennt das Problem mit ungewolltem Nachrichten (Spam) in E-Mail Accounts, wenn man diese einfach im Klartext auf der Internetseite angibt. Jeder einfache Bot kann diese lesen, erkennen und zur Nutzung an entsprechende Systeme weiterleiten. Die Schreibweise mit @ ist dabei das verräterische Zeichen für den Bot, dass es sich um eine Emailadresse handelt. In TypoScript gibt es die Möglichkeit Emailadressen automatisch zu kodieren, so dass die automatische Erkennung für einfache Suchmaschinen / Bots nicht mehr so einfach ist.

page.config.spamProtectEmailAddresses=1

Mit spamProtectEmailAdresses wird der Schutz eingeschaltet und dennoch funktioniert jedes Emailprogramm beim Anklicken des Links, der mit JavaScript wieder dekodiert wird. Dabei muss beim Anwender allerdings JavaScript eingeschaltet sein, was in den meisten Fällen aber der Fall sein dürfte. Außerdem kann man den Link notfalls auch noch von Hand eingeben oder kopieren und manuell im Emailprogramm abändern.

Aus mail@server.com wird dann mail(at)server.com. Also optisch für den Menschen immer noch als Emailadresse erkennbar. Wer es den Spambots nicht zu leicht machen will, kann die Ersetzungszeichenketten für "@" und ". " noch manuell entsprechend abändern:

page.config.spamProtectEmailAddresses=1
page.config.spamProtectEmailAddresses_atSubst=(at)
page.config.spamProtectEmailAddresses_lastDotSubst=(dot)

Hier kann man auch den Punkt der in der Emailadresse durch (dot) ersetzen oder auch ganz andere Zeichenketten wählen.


Für die Nutzung dieses Angebotes gelten die AGB, insbesondere der Haftungsausschluss.



AutorNewsFeedbackImpressumAGBDatenschutz
...