Lukas
3 Minuten

Wir haben schon gezeigt, wie wir Favicons und Apple Touch Icons mit Gulp generieren, nun möchten wir zeigen, wie wir die generierten Icons in Middleman-Projekten einbinden.

Wir haben in jedem Projekt eine globale Datei, in der alle möglichen Daten gespeichert sind, die global verwendet werden. In unseren Projekten, die auf Middleman basieren, verwenden wir eine .yml-Datei, die im data-Ordner liegt. Die unterschiedlichen Versionen des Icons liegen dort als Array vor.

icons:
  - rel: icon
    type: image/png
    href: assets/images/icon@96x96.png
    sizes: 96x96
  - rel: icon
    type: image/png
    href: assets/images/icon@32x32.png
    sizes: 32x32
  - rel: icon
    type: image/png
    href: assets/images/icon@16x16.png
    sizes: 16x16
  - rel: apple-touch-icon
    href: assets/images/icon@180x180.png
  - rel: apple-touch-icon
    href: assets/images/icon@180x180.png
    sizes: 180x180
  - rel: apple-touch-icon
    href: assets/images/icon@167x167.png
    sizes: 167x167
  - rel: apple-touch-icon
    href: assets/images/icon@152x152.png
    sizes: 152x152

Im Template können die einzelnen Datensätze ganz einfach ausgegeben werden.

  	<link rel="icon" type="image/png" href="/assets/images/icon@96x96-6c60aa10.png" sizes="96x96" />
  	<link rel="icon" type="image/png" href="/assets/images/icon@32x32-570ac2a4.png" sizes="32x32" />
  	<link rel="icon" type="image/png" href="/assets/images/icon@16x16-ace0389e.png" sizes="16x16" />
  	<link rel="apple-touch-icon" href="/assets/images/icon@180x180-f6d9964a.png" />
  	<link rel="apple-touch-icon" href="/assets/images/icon@180x180-f6d9964a.png" sizes="180x180" />
  	<link rel="apple-touch-icon" href="/assets/images/icon@167x167-d9b37d1f.png" sizes="167x167" />
  	<link rel="apple-touch-icon" href="/assets/images/icon@152x152-73e2ba67.png" sizes="152x152" />

Damit wir die Generierung durch Gulp nicht jedes Mal manuell starten müssen, haben wir eine externe Pipeline in der config.rb-Datei definiert, die von Middleman automatisch ausgeführt wird und die Icons in den verschiedenen benötigten Größen generiert.

activate :external_pipeline,
  :name => 'gulp',
  :command => yarn gulp external_asset_pipeline,
  :source => 'build',
  :latency => 1
Kaffeekasse

Der Artikel hat Dir weitergeholfen?

Der Artikel hat Dir weitergeholfen? Sehr schön, so soll es sein! Wenn Dir unsere Snippets weiterhelfen, supporte uns auf Steady.com.

Supporte uns auf Steady.com