Contao-Erweiterung trilobit_tiles

Eine exemplarische Übersicht von generierten Favicon-Kacheln

Als Contao-Premiumpartner für Programmierung liegt uns natürlich immer wieder daran, unser Können unter Beweis zu stellen. Erweiterung Nummer 10 - trilobit_tiles - macht Schluss mit dem Wirrwarr um die kleinen Bildchen, die auf den verschiedensten Geräten mit einer Webseite verknüpft sind. Und sie kann jetzt im Contao Extension Repository herunter geladen werden.

Icon-Flut

Sie habe es in Ihrem Browser sicher schon einmal gesehen: Das kleine Bildchen links oben in der Adresszeile. Das sind Favicons. Das Wort Favicon ist ein Kunstwort und setzt sich aus den beiden Wörtern Favorite und Icon zusammen.

Favicons kommen aber nicht nur in der Browserleiste vor. Nehmen Sie eine Website in Ihre Favoriten auf, wird dort auch das Favicon verwendet. Legen Sie sich ein Lesezeichen auf eine Website an: auch hier wird das Favicon verwendet.

Moderne Betriebssysteme und Geräte bieten aber noch viele weitere Möglichkeiten, eine Website zu verknüpfen. Bei Smartphones und Tablets gibt es die Möglichkeit, eine Website auf dem Startbildschirm zu verknüpfen.

Eine vergrößerte Darstellung des Favicons in der Windows-Startleiste

Unter Windows 8 wiederum haben Sie die Möglichkeit, Verknüpfungen auf dem Desktop zu erstellen, eine Website in der Startleiste auf dem Desktop anzupinnen oder die Website über eine Kachel zu verknüpfen.

Für alle diese Anwendungsfälle und unterschiedlichen Geräte werden unterschiedliche Grafiken benötigt. So gibt es z.B. Unterschiede zwischen den verschiedenen iPhones - je nach Modellversion - oder iPads. Auf diese Art und Weise kommen sehr viele mögliche Grafiken zusammen, die es zu unterstützen gilt. Diese müssen dann auch noch richtig benannt und in der korrekten Reihenfolge eingebunden werden. Jedes Mal alle Optionen zu berücksichtigen ist also Arbeit.

Das leistet die Erweiterung

Damit Sie jetzt nicht selbst Hand an Photoshop legen müssen und sich auch nicht auf Recherchetour ins Netz begeben müssen, haben wir eine Erweiterung für Contao entwickelt: trilobit_tiles.

trilobit_tiles kann unter Contao automatisch aus einem einzigen auszuwählenden Bild Favicons, Kacheln und Touch Icons für verschiedene Geräte erzeugen und in den Quellcode einbinden.

Die Eingabemaske unterstützt Sie dabei bei der Konfiguration:

Für welche Seite(n) sollen die Einstellungen gelten?
Wo sollen die Grafiken abgelegt werden?
Wählen Sie jetzt noch die gewünschte Grafik aus und bestimmen den Ausschnitt.
Mit den Feldern für den Titel, der z.B. auf der Kachel oder den Touch-Icons angezeigt werden soll, sind die Angaben komplett.

Wer noch ergänzende Wünsche hat, z.B. eine Windows 8 live Kachel, kann ein verfügbares RSS-Feed hinterlegen.

Für iOS kann ergänzend festgelegt werden, ob es sich um eine WebApp handelt oder "nur" um eine Website. Ist die Option Vollbildmodus aktiviert, wird die Website ohne die Browserleiste gestartet.

Ein Screenshot der Erweiterungseinstellungen

Fazit

Das System erzeugt jetzt alle notwendigen Grafiken und bindet diese korrekt in den HTML-Quellcode ein.

Darüber hinaus bietet die Erweiterung auch die Contao-typische Möglichkeit, die Laufzeit zu bestimmen. So können z.B. besondere Favicons für Weihnachten etc erstellt werden.

<script type="text/javascript">
/**
* @fn
* How to Prevent iOS Standalone Mode Web Apps From Opening Links in Safari
* @source http://stanhub.com/how-to-prevent-ios-standalone-mode-web-apps-from-opening-links-in-safari/
*/
    if (   ("standalone" in window.navigator)
        && window.navigator.standalone
    )
    {
        var noddy, remotes = false;
        document.addEventListener('click', function(event) {
            noddy = event.target;
            while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML")
            {
                noddy = noddy.parentNode;
            }
            if (   'href' in noddy
                && noddy.href.indexOf('http') !== -1
                && (   noddy.href.indexOf(document.location.host) !== -1
                    || remotes
                )
            )
            {
                event.preventDefault();
                document.location.href = noddy.href;
            }
        }, false);
    }
</script>

Hilfe

Bei Fragen und Anregungen zu der Erweiterung stehen wir natürlich gerne zur Verfügung. Nutzen Sie einfach unser Kontaktformular.

Wir engagieren uns gerne und unentgeldlich für die Contao-Community. Am liebsten ist es uns, wenn wir durch unser Beispiel andere dazu motivieren sich ebenfalls einzubringen. Sollte Ihnen das aber nicht möglich sein, dann freuen wir uns auch über eine kleine Spende für unsere Arbeit. Auch das motiviert uns weiter zu machen.

Für diese Erweiterung spenden

Diese Erweiterung hat Ihnen gefallen und Sie nutzen sie auch in Ihren Kundenprojekten? Hier können Sie uns unterstützen.

Spenden Sie uns gerne etwas per Überweisung auf folgendes Konto. Wenn Sie eine Rechnung benötigen, kontaktieren Sie uns bitte vorher:

BIC: GENODEF1ETK
IBAN: DE77 8309 4495 0003 2066 02
Verwendungszweck: Spende Contao-Erweiterung