Cassiopeia Extended > Anpassung index.php im <head> Bereich für Apple Touch Icon

    Joomla Version
    6.1.0
    PHP Version
    PHP 8.4.x
    Hoster
    Strato
    Link (URL) zur Seite mit dem Problem
    https://www.ffw-ebersbach.org/

    Hallo miteinander,

    ich habe nun bei einer weiteren neuen Webseite Cassiopeia Extended verwendet.

    Soweit so gut, schaut ganz gut aus, siehe Link im Anhang.

    Nun soll diese Seite auch ein Apple-Touch-Icon für den Apple-Safari Browser bekommen.

    Klassisch ergänzt man dazu in der index.php (im Cassiopeia Child Template) den <head> Bereich so, dass er dann so aussieht:

    <head>
    <jdoc:include type="metas" />
    <jdoc:include type="styles" />
    <jdoc:include type="scripts" />

    <link rel="apple-touch-icon" href="apple_touch_icon.png" />
    <link rel="apple-touch-icon-precomposed" href="apple_touch_icon-precomposed.png" />
    </head>

    (die Icons liegen dann im Root-Verzeichnis)

    Nun, beim Cassiopeia Extended hat man bereits eine index.php die scheinbar auf die original index.php im cassiopeia-template verweist und diese ergänzt.

    Hier hat man das Problem, dass bei einem Update diese überschrieben wird.

    Der Code sieht da so aus:

    <?php

    /**
    * @package Joomla.Site
    * @subpackage Templates.cassiopeia_extended
    *
    * @copyright (C) 2025 Open Source Matters, Inc. <https://www.joomla.org>
    * @license GNU General Public License version 2 or later; see LICENSE.txt
    */

    defined('_JEXEC') or die;

    /** @var Joomla\CMS\Document\HtmlDocument $this */

    require JPATH_THEMES . '/cassiopeia/index.php';

    $wa = $this->getWebAssetManager();


    Was mir auffällt,

    diese index.php wird nicht am Ende abgeschlossen (also der <?php - Bereich).

    Da fehlt "?>".


    Könnte man also diese index.php im Verzeichnis templates/cassiopeia_extended einfach dann am Schluss so erweitern?

    "?>"

    <!DOCTYPE html>
    <html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

    <head>
    <link rel="apple-touch-icon" href="apple_touch_icon.png" />
    <link rel="apple-touch-icon-precomposed" href="apple_touch_icon-precomposed.png" />
    </head>

    </html>

    Würde das funktionieren?

    Wäre es sinnvoll dieses Thema mit einem CR auf Github anzuregen, also dass Cassiopeia einen Default-Eintrag für das Apple Icon im Code bekommt (Default Verzeichnis dann unter media/templates/site/cassiopeia_extended/images?

    Wird die index.php im Verzeichnis templates/cassiopeia_extended durch Updates überschrieben?

    Danke im Voraus für eure Anmerkungen!


    Gibt es einen weiteren Weg Code in den <head> Bereich über ein Modul in der Debug Position einzufügen?

    Das wäre noch einfacher.

    Gruß Norbert

    Zitat von Norbert.R

    Nun soll diese Seite auch ein Apple-Touch-Icon für den Apple-Safari Browser bekommen.

    Der Apple Touch Icon ist nicht für den Browser, sondern um eine Website als Icon im Home Screen zu speichern.

    Zitat von Norbert.R

    Wird die index.php im Verzeichnis templates/cassiopeia_extended durch Updates überschrieben?

    Ja

    Zitat von Norbert.R

    Gibt es einen weiteren Weg Code in den <head> Bereich über ein Modul in der Debug Position einzufügen?

    Ich würde eher Richtug Plugin suchen.

    Oder du machst eine Kopie von Cassiopeia Extended, das geht per Klick seit 6.1

    Hallo Norbert,

    es reicht vollkommen aus, das "apple-touch-icon.png" direkt in den Root zu legen. Du brauchst keinen zusätzlichen Eintrag in der index.php. Apple findet es automatisch.

    Hierbei ist jedoch die richtige Schreibweise wichtig.

    Du hast es mit "_" benannt wie hier von Dir: href="apple_touch_icon.png" />

    Richtg wäre: "apple-touch-icon.png"

    Dieses dann mit 140 X 140 Pixel in den Root legen und fertig!

    OK, auf dem Homescreen das geht und das ist wohl dieses apple-touch-icon.png das im Root liegt.

    Nun die Frage, welche Icons nimmt der Safari Browser selbst für seine Favoriten her?

    (ich meine für die großen Icons, nicht die bei den Tabs selbst)

    Weiß das jemand?

    Auf der Seite ist sowohl das favicon.ico als auch das SVG-Icon vorhanden.

    Ja, ich weiss, das ist ein richtiges Luxusproblem...

    Leider spuckt da Google auch nix raus und ich weiß schon warum ich diese Apfelgeräte mit ihren Sonderlocken nicht so recht mag.

    Apple nimmt auch hierfür das gleiche "apple-touch-icon.png". Vorraussetzung ist die Größe 140 x 140 Pixel.

    Um es zu aktualisieren musst Du etwas warten bis der Cache im Safari aktualisiert wird. Oder du gehst zum Verzeichnis "Library - Safari - Touch icon Cache - images" und löscht dort alle Einträge welche sich im "images" Ordner befinden. Danach werden alle "Icons" neu geladen

    Du kannst auch zusätzlich ein "favicon.png" in den Root legen. Wenn Du für diese Seite noch nie ein Favicon hattest, sollte die Indexierung schnell gehen. Generell entscheidet Safari selbst wann er es aktualisieren möchte. IOS ist da etwas eigen.

    Zur Sicherheit hannst Du auch hierbei im Verzeichnis "Library - Safari - Favicon Cache - images" alle Einträge welche sich im "images" Ordner befinden, löschen.

    Sonst hilft nur warten, warten und nochmals warten!

    Nachtrag:

    auf jungfreulichen IPADs / Iphones funktionmiert es so.

    (einfach im Root das apple_touch_icon.png mit 140x140 reinlegen)

    Auf meinem IPAD, auf welchem ich die Seiten ohne dieses vorhandene Icon mal geöffnet habe, wird es nicht aktualisiert, auch wenn man das Datum Monate in die Zukunft stellt.

    Ins Dateisystem kommt man nicht rein, das ist alles verdongelt, den Cache kann man also auch nicht löschen.

    Fazit:

    Zuerst die ganzen Icons mit anlegen und dann erst Seiten online schalten.

    Zitat von Norbert.R

    Ins Dateisystem kommt man nicht rein, das ist alles verdongelt, den Cache kann man also auch nicht löschen.

    Klicke im Finder auf "Gehe zu" dann drücke zudem die "alt" umschalttaste am Mack. Dann öffnet sich der "Library" Ordner. Klicke auf diesen! In diesem findest Du alles was Du laut meinem Post #7 löschen sollst.

    Beim iPhone oder iPad sollte es reichen, die Icons auf dem Bildschirm zu löschen. Danach unter Einstellungen - Safari "Verlauf und Websitedaten löschen", und die Icons wieder neu verknüpfen.