Touch-Icons mit TypoScript
#Code

Touch-Icons mit TypoScript

Der übliche Weg

Die meisten Blogs, die man findet, wenn man nach Touch Icons in Kombination mit TypoScript oder TYPO3 sucht, präsentieren eine einfache Lösung: Das benötigte Markup wird manuell in page.headerData geladen, wie das folgende Beispiel zeigt:

 

page.headerData.20 = TEXT
page.headerData.20.value (
   <link rel="apple-touch-icon" sizes="57x57" href="/absolute/path/to/apple-touch-icon-57x57.png" />
   <link rel="apple-touch-icon" sizes="76x76" href="/absolute/path/to/apple-touch-icon-76x76.png" />
   // ...
)

 

Der Weg ist simpel, hat aber zwei Makel:

  1. Ein Bild pro Definition muss entweder manuell oder mit zusätzlichen Hilfsmitteln generiert werden, in was zu etwa 15 Bildern mit dem selben Inhalt aber unterschiedlichen Grössen führt.
  2. Da die Pfade zu den Bildern manuell eingefügt und nicht via TYPO3 generiert werden, ignorieren diese die aktuelle Umgebung und Konfigurationen wie baseUrl oder absRefPrefix haben keinen Effekt auf die manuellen Pfade. Sobald das TypoScript in einer anderen Umgebung ausgeführt wird, in welcher die Webseite z.B in einem Unterordner platziert wird (was durchaus der Fall in einer Entwicklungsumgebung sein kann), funktionieren die Touch Icons nicht mehr, da die Pfade falsch sind.

Ein besserer Weg

Meiner Meinung nach ist Software-Portabilität ein wichtiges Kriterium. Und: Nicht 15 Dateien, die im Wesentlichen dasselbe beinhalten, in die Versionskontrolle einchecken und bei einer Änderung adaptieren, erachte ich als eine saubere Lösung.

 

page.headerData.20 = COA
page.headerData.20 {
    // Apple touch icons
    10 = IMG_RESOURCE
    10 {
        file = path/to/icon-in-big-format.png
        file {
            width = 57c
            height = 57c
        }
        stdWrap.dataWrap = <link rel="apple-touch-icon" sizes="{TSFE:lastImgResourceInfo|0}x{TSFE:lastImgResourceInfo|1}" href="|">
    }

    20 < .10
    20.file {
        width = 76c
        height = 76c
    }

    // ...

    // Android icons
    80 < .10
    80 {
        file {
            width = 16c
            height = 16c
        }
        stdWrap.dataWrap = <link rel="icon" type="image/png" sizes="{TSFE:lastImgResourceInfo|0}x{TSFE:lastImgResourceInfo|1}" href="|">
    }

    // ...

    // Microsoft Application icons
    120 < .10
    120 {
        file {
            width = 70c
            height = 70c
        }
        stdWrap.dataWrap = <meta name="msapplication-square{TSFE:lastImgResourceInfo|0}x{TSFE:lastImgResourceInfo|1}logo" content="|"/>
    }
}
 

 

Die Bilder werden via TypoScript skaliert und abgespeichert. Alle Pfade, die man erhält, beziehen sich auf die aktuelle Umgebung, und werden mit dem nötigen Markup umschlossen. Für jede Bildgrösse sind lediglich ein paar Zeilen notwendig.

Benötigte Daten, um die Grössen-Attribute zu füllen, sind via TSFE:lastImgResourceInfo verfügbar. Darin sind vier Werte in den Schlüsseln von 0 bis 3 vorhanden; Bildbreite, -höhe, Typ und URL. Wenn statt IMG_RESOURCE das IMAGE-Objekt benutzt wird, sind dieselben Werte in TSFE:lastImageInfo vorhanden.

Obwohl diese Lösung initial etwas mehr Ressourcen benötigt, da die Bilder erst generiert werden müssen, bietet sie den Vorteil, dass die Pfade immer stimmen und die Versionskontrolle nicht mit statischen Bildern gefüllt wird.