Download-Icon

download-icon.html

Der angebenen Downloaddatei wird, basierend auf deren Dateiendung, ein passendes Icon zugeordnet.

   {{- $fext := path.Ext .Params.file -}}
   {{- $icon := "disk_default.png" -}}
   {{-      if eq $fext ".bmp"   }} {{- $icon = "disk_brd.bmp"   }}
   {{- else if eq $fext ".brd"   }} {{- $icon = "disk_brd.png"   }}
   {{- else if eq $fext ".c"     }} {{- $icon = "disk_c.png"     }}
      ...
      
   {{- else if eq $fext ".zip"   }} {{- $icon = "disk_zip.png"   }}
   {{- else if eq $fext ".7z"    }} {{- $icon = "disk_7z.png"    }}
   {{- end }}

   {{- $icon -}}

Der Dateiname wird durch .Params.file angeliefert. (path.Ext) holt die Endung des Dateinamens (alles hinter und mit dem letzten ‘.’) dort heraus. Die Dateiendung wird in der Variablen $fext aufbewahrt.

Die Variable $icon wird definiert und mit einem Vorgabewert für “unbekanntes Dateiformat” besetzt (disk_default.png). Der Reihe nach wird jetzt ausprobiert, ob die Datei eine der bekannten Endungen benutzt und, falls ja, das Icon explizit umgestellt. Sofern keiner der Vergleiche if eq $fext ".xxx" zutrifft, bleibt es bei der Vorgabe “unbekannt”. Beim ‘flipflop.pdf’ (das hier wieder als Beispiel herhalten muss) ist $fext gleich ‘.pdf’ und das zugehörige Icon ‘disk_pdf.png’.

Der nun mühsam ermittelte Name der Icondatei erscheint durch die letzte Zeile {{- $icon -}} an der Stelle wo das Partial ‘aufgerufen’ wird. {{- sowie -}} unterdrücken jeglichen Whitespace.

   alt = "{{ partial "download-icon.html" . }}"

wird im fertigen HTML-Code dann z. B. durch

   alt = "disk_pdf.png"

ersetzt.

Die abgebildete Codesequenz stellt das Prinzip dar. Der vollständige Code in /layout/partials/download-size.html ist etwas umfangreicher. In jedem Fall sichert die alphabetische Reihenfolge die Übersicht, welche Dateiendungen bereits bekannt sind.

Ein neues Download-File-Icon erstellen

  • /static/images/disk_default_inkscape.svg mit Inkscape (oder einem anderen entsprechenden Editor) öffnen.
  • Den zentralen Text “——-” durch die entsprechende Dateiendung ersetzen - ohne den Punkt.
  • Alle Elemente der Datei deselektieren und “File” => “Export PNG image…” anwählen.
  • Im seitlichen Menübereich den Dateinamen eintragen - oder per “Export As” im Dateibaum navigieren, wo sie hin soll und den Namen eintragen. Der Name folgt derzeit dem einfachen Schlüssel ‘disk_‘+Dateiendung+’.png’. Das sieht man aber auch schon im ‘ download-icon.html’ .
  • Betätigen des “Export” Buttons erzeugt die .png Datei.
  • Inkscape schließen - ohne Speichern oder per Save As das .svg unter passendem Namen sichern.

Aus diversen Gründen misst die Originaldatei (und auch das rohe .png) 512 x 512 Pixel².

Edler wäre es direkt die .svg einzubinden. (und erheblich einfacher um ein neues Datenformat per Texteditor zu erzeugen.) Leider werden die Dateinamen aus dem .svg aber nicht sichtbar dargestellt. Wenn mal jemand die Ursache dafür findet, kann man das aber auch ändern.