Touch-Icons mit TypoScript

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.

Über uns

land in sicht bietet digitale Lösungen für Destinationen und Leistungsträger im Tourismus: toubizÂź-Infosystem für touristische Infrastruktur, Webportale und das Frontend für das TOMASÂź Buchungssystem.

Standort Deutschland

BrĂŒhlmatten 16
79295 Sulzburg

Telefon +49 7634 56956-0

Standort Schweiz

Letzistrasse 29
9015 St. Gallen

Telefon ‭+41 71 571 069-0‬