latest
⚙️ Administration
Statische Inhalte
Bilder & Icons

Bilder und Icons

Sie haben die Möglichkeit in den Verzeichnissen icons und img Ihre Logos, Bilder und Icons zu verwalten.

          • add.svg
          • alkis.svg
          • ...
            • apple-splash-640-1136.jpg
            • ...
            • atlas.png
            • logo_primary.png
            • logo_secondary.png
            • ...
          • favicon.ico
          • logo192.png
          • logo512.png
          • ...

    • Icons

    Icons werden an verschiedenen Stellen von Terratwin verwendet. Dazu gehören Werkzeugicons, Icons für Dialoge oder sonstige Buttons. Die Icons sollten im SVG-Format vorliegen und in der Größe 24x24 Pixel sein. Die Stroke-Color sollte ausschließlich schwarz (#000000) sein. Alle SVG-Icons sollten in dem Ordner icons abgelegt werden.

    Bilder

    Auch Bilder im Format JPG oder PNG können in Terratwin verwendet werden. Diese sollten in dem Ordner img abgelegt werden.

    Logos und Favicon

    Direkt im Verzeichnis img befinden sich die Logos für das Manifest.json und das Favicon. Diese sind für die Darstellung der Anwendung in der Browserleiste und auf dem Homescreen Ihres Geräts zuständig. Falls Sie noch über keine Logos mit diesem Format oder kein favicon verfügen können Sie diese bspw. gemeinsam auf dieser Seite erstellen: favicon.io (opens in a new tab)

    Das Logo sollten quadratisch sein und mindestens einmal mit 192x192 Pixel und einmal mit 512x512 Pixel vorliegen. Da einige Betriebssystemeversionen die Logos abrunden, empfiehlt es sich, die Logos mit ausreichend Außenabstand zu maskieren.

    Beispiel für optimale Darstellung als maskierbares Icon, Quelle: https://web.dev/learn/pwa/web-app-manifest
    Beispiel für optimale Darstellung als maskierbares Icon, Quelle: https://web.dev/learn/pwa/web-app-manifest

    Nähere Informationen dazu finden Sie hier (opens in a new tab)

    Apple Logos

    Apple benötigt die Darstellung als PWA weitere Logogrößen. Um diese zu erstellen können Sie den pwa-asset-generator verwenden. Nähere Informationen finden Sie auch hier: pwa-asset-generator (opens in a new tab)

    Hierfür müssen Sie folgende Schritte durchführen:

    1. Installieren Sie Node.js (opens in a new tab).

    2. Erstellen Sie einen Ordner, in dem sich das Logo (z. B. logo.png) befindet, das Sie konvertieren möchten.

    3. Navigieren Sie über Powershell, CMD oder Ihren Code-Editor (z. B. VSCode (opens in a new tab)) zu Ihrem erstellten Ordner.

    4. Führen Sie den folgenden Befehl aus, um die Dependency zu installieren:

      npm install pwa-asset-generator

    5. Nach der Installation können Sie mit dem folgenden Befehl Ihre Apple Touch Icons erstellen:

      npx pwa-asset-generator [source-file]
      • [source-file] steht hierbei für den Namen des Logos, also in diesem Beispiel logo.png.
      • Der vollständige Befehl wäre in diesem Fall:
      npx pwa-asset-generator logo.png

    Sonstige Bilder

    Innerhalb des Ordners custom können Sie sonstige Bilder ablegen, z.B. für

    SchemasManifest