176 lines
No EOL
63 KiB
HTML
176 lines
No EOL
63 KiB
HTML
<!doctype html><html class=position-relative itemscope itemtype=https://schema.org/WebPage lang=de data-bs-theme=auto data-palette=blue><head><script src=/assets/init/bundle.min.a63b05c8004831f165aca508cfe52bdc3b3c568ce762c0e22f82b1fe1ed14173.js integrity="sha256-pjsFyABIMfFlrKUIz+Ur3Ds8VoznYsDiL4Kx/h7RQXM=" crossorigin=anonymous></script><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Einbindung von Bildern in Hugo – Infos und eigener Render Hook - Natenoms Blog</title>
|
||
<link rel=icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_16x16_resize_catmullrom_3.png sizes=16x16 type=image/png><link rel=icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_32x32_resize_catmullrom_3.png sizes=32x32 type=image/png><link rel=icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_150x150_resize_catmullrom_3.png sizes=150x150 type=image/png><link rel=apple-touch-icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_180x180_resize_catmullrom_3.png sizes=180x180 type=image/png><link rel=icon href=/favicon_hudc94279ded70d7b83fccc56e43bdd2fa_24074_192x192_resize_catmullrom_3.png sizes=192x192 type=image/png><link rel=mask-icon href=/safari-pinned-tab.svg color=#6f42c1><meta name=keywords content="Verkehrswende,Fahrrad,CriticalMass,OpenBikeSensor,SimRa,Mumble,Open Source,Minimalismus,OpenStreetMap,Müllsammeln,Fotografie,Malen,Zeichnen"><meta name=description content="Ein paar Informationen dazu, wie man in Hugo Bilder einbinden kann, welche Hilfsmittel es gibt und auch, was mit Bordmitteln von Hugo nicht möglich ist. Und zum Schluss ein eigener Render-Hook, der hilfreiche Dinge macht."><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://natenom.de/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/cover.jpg"><meta name=twitter:title content="Einbindung von Bildern in Hugo – Infos und eigener Render Hook"><meta name=twitter:description content="Ein paar Informationen dazu, wie man in Hugo Bilder einbinden kann, welche Hilfsmittel es gibt und auch, was mit Bordmitteln von Hugo nicht möglich ist. Und zum Schluss ein eigener Render-Hook, der hilfreiche Dinge macht."><meta property="og:title" content="Einbindung von Bildern in Hugo – Infos und eigener Render Hook"><meta property="og:description" content="Ein paar Informationen dazu, wie man in Hugo Bilder einbinden kann, welche Hilfsmittel es gibt und auch, was mit Bordmitteln von Hugo nicht möglich ist. Und zum Schluss ein eigener Render-Hook, der hilfreiche Dinge macht."><meta property="og:type" content="article"><meta property="og:url" content="https://natenom.de/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/"><meta property="og:image" content="https://natenom.de/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/cover.jpg"><meta property="article:section" content="posts"><meta property="article:published_time" content="2022-04-24T12:01:40+02:00"><meta property="article:modified_time" content="2022-04-24T12:01:40+02:00"><meta itemprop=name content="Einbindung von Bildern in Hugo – Infos und eigener Render Hook"><meta itemprop=description content="Ein paar Informationen dazu, wie man in Hugo Bilder einbinden kann, welche Hilfsmittel es gibt und auch, was mit Bordmitteln von Hugo nicht möglich ist. Und zum Schluss ein eigener Render-Hook, der hilfreiche Dinge macht."><meta itemprop=datePublished content="2022-04-24T12:01:40+02:00"><meta itemprop=dateModified content="2022-04-24T12:01:40+02:00"><meta itemprop=wordCount content="1384"><meta itemprop=image content="https://natenom.de/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/cover.jpg"><meta itemprop=keywords content="Web,Hugo,Blog,Render Hook,HTML,Markdown,"><meta property="og:image:alt" content="Einbindung von Bildern in Hugo – Infos und eigener Render Hook"><meta name=twitter:image:alt content="Einbindung von Bildern in Hugo – Infos und eigener Render Hook"><link data-precache rel=stylesheet href="/assets/main/bundle.min.b189232e48c49a02f23e6616502e93a36137102626fd47589f55ab6447b15b4d.css" integrity="sha256-sYkjLkjEmgLyPmYWUC6To2E3ECYm/UdYn1WrZEexW00=" crossorigin=anonymous></head><body><header class="mb-4 sticky-top"><nav class="top-app-bar shadow navbar navbar-expand-xxl"><div class=container><a class="navbar-brand d-flex align-items-center flex-grow-1 flex-xxl-grow-0 justify-content-xxl-start ms-2 ms-xxl-0 mx-auto me-xxl-2" href=https://natenom.de/><picture><img class=logo alt=Logo src=https://natenom.de/images/logo.svg loading=lazy>
|
||
</picture>Natenoms Blog</a><div class="offcanvas-xxl offcanvas-end flex-grow-1" data-bs-scroll=true tabindex=-1 id=navbarMenus aria-labelledby=navbarMenusLabel><div class="offcanvas-header px-4 pb-0"><div class="offcanvas-title h5" id=navbarMenusLabel>Natenoms Blog</div><button type=button class="btn-close btn-close-white" data-bs-dismiss=offcanvas data-bs-target=#navbarMenus aria-label=Close></button></div><div class="offcanvas-body p-4 pt-0 p-xxl-0"><hr class=d-xxl-none><ul class="navbar-nav flex-row flex-wrap align-items-center me-auto"><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://natenom.de/><i class="fas fa-home me-1"></i></a></li><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://natenom.de/ueber/>Über</a></li><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://wiki.natenom.de/ target=_blank rel="noopener noreferrer">Wiki</a></li><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://natenom.de/blogroll/>Blogroll</a></li><li class="nav-item col-6 col-xxl-auto"><a class="nav-link py-2 px-0 px-xxl-2" href=https://kagube.de/ target=_blank rel="noopener noreferrer">Blog vom kleinen 🐘</a></li></ul><hr class=d-xxl-none><form class="search-bar ms-auto my-auto" action=/search/ novalidate><div class="input-group align-items-center"><span class="btn btn-search disabled position-absolute left-0 border-0 px-1"><i class="fas fa-fw fa-search fa-lg"></i>
|
||
</span><input class="my-1 form-control border-white rounded-5 search-input bg-body" name=q type=search placeholder=Suchen aria-label=Search required>
|
||
<span class="search-shortcut position-absolute end-0 top-0 me-2"><kbd class="text-dark bg-white opacity-75 rounded-3 shadow border border-primary py-1 fw-bold">/</kbd></span></div></form><hr class=d-xxl-none><ul class="navbar-nav flex-row flex-wrap align-items-center ms-md-auto"><li class="nav-item py-2 py-xxl-1 col-12 col-xxl-auto"><nav class="social-links nav justify-content-center flex-row"><a class="nav-link social-link col-6 col-xxl-auto p-1" target=_blank href=https://digitalcourage.social/@natenom title=Mastodon rel=me><i class="fa-fw fab fa-mastodon"></i>
|
||
<span class="ms-1 d-xxl-none">Mastodon</span>
|
||
</a><a class="nav-link social-link col-6 col-xxl-auto p-1" target=_blank href=/index.xml title=RSS rel=me><i class="fas fa-fw fa-rss"></i>
|
||
<span class="ms-1 d-xxl-none">RSS</span></a></nav></li><li class="nav-item py-2 py-xxl-1 col-12 col-xxl-auto"><div class="vr d-none d-xxl-flex h-100 mx-xxl-2 text-white"></div><hr class="d-xxl-none my-2"></li><li class="nav-item dropdown col-6 col-xxl-auto"><a class="nav-link px-0 py-2 px-xxl-1" href=# id=fontSizeDropdown role=button data-bs-toggle=dropdown aria-expanded=false><i class="fas fa-fw fa-font"></i>
|
||
<span class=d-xxl-none>Schriftgröße</span></a><ul class="font-size-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby=fontSizeDropdown><li><button class="font-size-item dropdown-item" data-size=xs>
|
||
Extra klein</button></li><li><button class="font-size-item dropdown-item" data-size=sm>
|
||
Klein</button></li><li><button class="font-size-item dropdown-item active" data-size=md>
|
||
Mittel</button></li><li><button class="font-size-item dropdown-item" data-size=lg>
|
||
Groß</button></li><li><button class="font-size-item dropdown-item" data-size=xl>
|
||
Extra groß</button></li></ul></li><li class="nav-item dropdown col-6 col-xxl-auto"><a class="nav-link px-0 py-2 px-xxl-1" href=# id=paletteDropdown role=button data-bs-toggle=dropdown aria-expanded=false><i class="fas fa-fw fa-palette"></i>
|
||
<span class=d-xxl-none>Palette</span></a><ul class="palette-dropdown-menu dropdown-menu dropdown-menu-end px-2 row g-2" aria-labelledby=paletteDropdown><li class="col-4 my-1"><a role=button id=palette-blue aria-label=Blau class="btn btn-sm w-100 palette text-bg-blue" data-palette=blue></a></li><li class="col-4 my-1"><a role=button id=palette-blue-gray aria-label=Blaugrau class="btn btn-sm w-100 palette text-bg-blue-gray" data-palette=blue-gray></a></li><li class="col-4 my-1"><a role=button id=palette-brown aria-label=Braun class="btn btn-sm w-100 palette text-bg-brown" data-palette=brown></a></li><li class="col-4 my-1"><a role=button id=palette-cyan aria-label=Cyan class="btn btn-sm w-100 palette text-bg-cyan" data-palette=cyan></a></li><li class="col-4 my-1"><a role=button id=palette-green aria-label=Grün class="btn btn-sm w-100 palette text-bg-green" data-palette=green></a></li><li class="col-4 my-1"><a role=button id=palette-indigo aria-label=Indigo class="btn btn-sm w-100 palette text-bg-indigo" data-palette=indigo></a></li><li class="col-4 my-1"><a role=button id=palette-orange aria-label=Orange class="btn btn-sm w-100 palette text-bg-orange" data-palette=orange></a></li><li class="col-4 my-1"><a role=button id=palette-pink aria-label=Rosa class="btn btn-sm w-100 palette text-bg-pink" data-palette=pink></a></li><li class="col-4 my-1"><a role=button id=palette-purple aria-label=Purpur class="btn btn-sm w-100 palette text-bg-purple" data-palette=purple></a></li><li class="col-4 my-1"><a role=button id=palette-red aria-label=Rot class="btn btn-sm w-100 palette text-bg-red" data-palette=red></a></li><li class="col-4 my-1"><a role=button id=palette-teal aria-label=Teal class="btn btn-sm w-100 palette text-bg-teal" data-palette=teal></a></li><li class="col-4 my-1"><a role=button id=palette-yellow aria-label=Gelb class="btn btn-sm w-100 palette text-bg-yellow" data-palette=yellow></a></li></ul></li><li class="nav-item dropdown col-6 col-xxl-auto"><a class="nav-link px-0 py-2 px-xxl-1" href=# id=modeDropdown role=button data-bs-toggle=dropdown aria-expanded=false><i class="mode-icon fas fa-fw fa-adjust" id=modeIcon></i>
|
||
<span class=d-xxl-none>Modus</span></a><ul class="mode-dropdown-menu dropdown-menu dropdown-menu-end" aria-labelledby=modeDropdown><li class=mode-item data-color-mode=light data-icon=sun><button class=dropdown-item>
|
||
<i class="mode-icon fas fa-fw fa-sun"></i> Hell</button></li><li class=mode-item data-color-mode=dark data-icon=moon><button class=dropdown-item>
|
||
<i class="mode-icon fas fa-fw fa-moon"></i> Dunkel</button></li><li class="mode-item active" data-color-mode=auto data-icon=adjust><button class=dropdown-item>
|
||
<i class="mode-icon fas fa-fw fa-adjust"></i> Auto</button></li></ul></li></ul></div></div><div class=d-flex><button class="navbar-toggler order-5 border-0" type=button data-bs-toggle=offcanvas data-bs-target=#navbarMenus aria-controls=navbarMenus aria-expanded=false aria-label="Toggle navigation">
|
||
<i class="fas fa-ellipsis-h"></i></button></div></div></nav></header><main class=container><div class="row content"><noscript><div class="alert alert-danger" role=alert>Dein Browser unterstützt kein JavaScript.</div></noscript><div class=col-xxl-8><div class=container><nav class="row card component" aria-label=breadcrumb><div class="card-body pb-0"><ol class="hbs-breadcrumb breadcrumb flex-nowrap"><li class="breadcrumb-item text-surface"><a href=/>Blog</a></li><li class="breadcrumb-item text-surface"><a href=/posts/>Posts</a></li><li class="breadcrumb-item active">Einbindung von Bildern in Hugo – Infos und eigener Render Hook</li></ol></div></nav><div class="post-panel-wrapper position-relative d-flex justify-content-center"><div class="d-flex flex-row justify-content-center rounded-5 border post-panel position-fixed px-3 py-1 surface shadow-1"><a class="action action-toc d-none d-xxl-block" href=#postTOC role=button title=Inhaltsverzeichnis><i class="fas fa-fw fa-list-alt"></i>
|
||
</a><a class="action action-toc d-block d-xxl-none" href=#post-toc-container role=button title=Inhaltsverzeichnis><i class="fas fa-fw fa-list-alt"></i>
|
||
</a><a class="action action-post-comments" href=#post-comments role=button aria-label=Comments title=Kommentare><i class="fas fa-fw fa-comments"></i>
|
||
</a><a id=sidebarToggler class="action action-sidebar-toggler d-none d-xxl-block" role=button title><i class="fas fa-fw fa-expand-alt" data-fa-transform=rotate-45></i></a></div></div><article class="row card component mb-4 post"><div class=card-header><h1 class="card-title post-title my-2">Einbindung von Bildern in Hugo – Infos und eigener Render Hook</h1></div><div class=card-body><div class="post-meta mb-3"><span class="post-date me-1 mb-1" title="Erstellt am 2022-04-24 12:01:40 +0200 CEST.">Sonntag, 24. April 2022</span><span class="post-reading-time me-1 mb-1">7 Min. Lesezeit</span><a href=/categories/web/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-category">
|
||
<i class="fas fa-fw fa-folder me-1"></i>Web</a><a href=/tags/blog/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Blog</a><a href=/tags/html/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">HTML</a><a href=/tags/hugo/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Hugo</a><a href=/tags/markdown/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Markdown</a><a href=/tags/render-hook/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Render Hook</a><a href=/tags/web/ class="btn btn-sm btn-secondary mb-1 me-2 py-0 pe-1 post-taxonomy post-taxonomy-sm post-tag">Web</a></div><div id=postTOC class=toc-details><details open><summary>Inhaltsverzeichnis</summary><nav id=TableOfContents><ul><li><a href=#bilder-in-hugo>Bilder in Hugo</a><ul><li><a href=#a_einbinden-via-markdown-syntax>Standard-Markdown-Syntax – Tut, kann aber nix</a></li><li><a href=#a_renderhook>Render Hook</a></li><li><a href=#a_theme>Theme-Erweiterungen</a></li><li><a href=#a_shortcode>Shortcode</a></li></ul></li><li><a href=#so-nah-am-standard-wie-möglich>So nah am Standard, wie möglich</a></li><li><a href=#der-eigene-render-hook>Der eigene Render Hook</a><ul><li><a href=#quelltext>Quelltext</a></li><li><a href=#wie-der-neue-render-hook-funktioniert>Wie der neue Render Hook funktioniert</a></li><li><a href=#ideen-für-später>Ideen für später</a></li></ul></li><li><a href=#uffbasse-aufpassen--besser-kein-srcset-bei-kleinen-bildern>Uffbasse (Aufpassen) – Besser kein srcset bei kleinen Bildern</a></li><li><a href=#passt>Passt</a></li></ul></nav></details></div><div class="post-content mb-3" data-bs-spy=scroll data-bs-target=#TableOfContents tabindex=0><div id=post-summary><p>Ein paar Informationen dazu, wie man in Hugo Bilder einbinden kann, welche Hilfsmittel es gibt und auch, was mit Bordmitteln von Hugo nicht möglich ist. Und zum Schluss ein eigener Render-Hook, der hilfreiche Dinge macht.</p></div><div id=post-content-body><div class="shortcode-notice update"><div class="shortcode-notice-title update">Update</div><div class=notice-content><p>Update 1 (27.04.2022): Im Blog wird jetzt ein aktuelleres und verbessertes Render Hook verwendet, <a href=/2022/04/verbesserungen-des-render-hooks-fuer-bilder-und-im-wiki/>siehe hier</a>.</p><p>Update 2 (04.04.2023): Es gibt wieder einen verbesserten Render Hook, der sich am Ursprungsformat eines Fotos orientiert, nur auf Webp für die Bildvarianten ausgelegt ist und somit sehr viel schneller ist und viel weniger Daten produziert, <a href=/2023/04/shortcode-und-render-hook-fuer-hugo-verbessert-weniger-datenmuell-und-schnelleres-rendern/>siehe hier</a>.</p></div></div><h2 id=bilder-in-hugo data-numberify>Bilder in Hugo<a class="anchor ms-1" href=#bilder-in-hugo></a></h2><p>Es gibt verschiedene Möglichkeiten zur Einbindung von Bildern in Hugo.</p><ul><li><a href=#a_einbinden-via-markdown-syntax>Standard-Markdown-Syntax</a></li><li><a href=#a_renderhook>Render Hook</a></li><li><a href=#a_theme>Theme-Erweiterungen</a></li><li><a href=#a_shortcode>Shortcode</a></li></ul><h3 id=a_einbinden-via-markdown-syntax data-numberify>Standard-Markdown-Syntax – Tut, kann aber nix<a class="anchor ms-1" href=#a_einbinden-via-markdown-syntax></a></h3><p>Die Standard-Markdown-Syntax, die Hugo von sich aus unterstützt, funktioniert zwar, kann dafür aber nichts:</p><pre><code>
|
||
</code></pre><p>Das bedeutet konkret:</p><ul><li>Keine Möglichkeit zur Angabe, wie groß das Bild dargestellt wird, es wird immer maximal groß angezeigt.</li><li>Es werden keine kleineren Bildvarianten erstellt. Ist ein Bild z. B. 10 MiB groß, 2000 Pixel breit und beträgt der zur Verfügung stehende Platz im Blog nur 800 Pixel in der Breite, so wird trotzdem das Originalbild mit 2000 Pixeln eingebunden, nur eben verkleinert und man muss 10 MiB herunterladen.</li></ul><h3 id=a_renderhook data-numberify>Render Hook<a class="anchor ms-1" href=#a_renderhook></a></h3><p>Für einen <a class=urlextern href=https://gohugo.io/templates/render-hooks/>Render Hook</a> erstellt man die Datei <code>layouts/_default/_markup/render-image.html</code>.</p><p>Hier kann man Programmcode hinterlegen, der ausgeführt wird, sobald die Standard-Markdown-Syntax für die Einbindung von Bildern gerendert wird.</p><p>Dies hat den Vorteil, dass man im Gegensatz zu einem <a href=#a_shortcode>Shortcode</a> beim Standard-Markdown bleiben oder diesen auch erweitern kann.</p><h3 id=a_theme data-numberify>Theme-Erweiterungen<a class="anchor ms-1" href=#a_theme></a></h3><p>Das hier im Blog verwendete Theme ‘<a class=urlextern href=https://hbs.razonyang.com/en/docs/image-processing/>Bootstrap</a>’ stellt einige Möglichkeiten zum Einbinden von Bildern bereit. So kann man z. B. Bilder verkleinert anzeigen lassen und dafür wird auch wirklich eine kleinere Variante des Originalbildes erzeugt (wenn das Bild Teil des <code>Page Bundles</code> ist).</p><p>Es kann eine erweitere Standard-Markdown-Syntax verwendet werden, wie z. B.</p><pre><code>
|
||
</code></pre><p>Letztlich wird das üer einen Render Hook ermöglicht, siehe <a href=#a_renderhook>oben</a>.</p><h3 id=a_shortcode data-numberify>Shortcode<a class="anchor ms-1" href=#a_shortcode></a></h3><p>Es gibt im Netz verschiedene Lösungen in Form von Shortcodes, die z. B. automatisch kleinere Varianten der Bilder erstellen und diese einbinden statt des Originals und es auch ermöglichen, einen Link auf das Originalbild zu setzen, einen Text unter dem Bild anzuzeigen und mehr.</p><p>Solch einen Shortcode hatte ich bis vor kurzem auch verwendet. Jedoch muss man für Shortcodes eine andere Syntax verwenden, z. B. für den Shortcode <code>bildeinbinden</code>:</p><pre><code>{{< bildeinbinden src="" link="" alt="" title="" width="" >}}
|
||
</code></pre><h2 id=so-nah-am-standard-wie-möglich data-numberify>So nah am Standard, wie möglich<a class="anchor ms-1" href=#so-nah-am-standard-wie-möglich></a></h2><p>Ich bevorzuge die Verwendung von gegebenen Standards statt einer eigenen Lösung. Denn so werden Probleme beim Wechsel eines Themes oder auch beim Export minimiert.</p><p>So verwende ich lieber die Standard-Markdown-Syntax für das Einbinden von Bildern in Hugo statt eines eigenen Shortcodes, dessen Parameter man sich mehr oder weniger merken muss. Zudem ist es für neue Menschen leichter.</p><p>Deshalb habe ich mich hier im Blog für einen Render Hook entschieden, um Bilder einzubinden.</p><h2 id=der-eigene-render-hook data-numberify>Der eigene Render Hook<a class="anchor ms-1" href=#der-eigene-render-hook></a></h2><p>Als Ausgangspunkt habe ich <a class=urlextern href=https://github.com/bep/portable-hugo-links/blob/master/layouts/_default/_markup/render-image.html>diese Version hier</a> verwendet und für meine Anforderungen angepasst.</p><p>Die Syntax ist die selbe wie in Hugo:</p><pre><code>
|
||
</code></pre><p>z. B.</p><pre><code>
|
||
</code></pre><p>Im Ergebnis das 200 Pixel breite Bild, das nicht automatisch verlinkt wird, weil es zu klein ist:</p><p></p><figure class=image-caption><picture><source type=jpeg srcset=/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-200px.jpg><img alt="Ein Demobild mit Radfahrenden, um zu verdeutlichen, wie ein Bild mit dem eigenen Render Hook eingebunden wird. " src=/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-200px.jpg title="Radfahrende in Pforzheim" width=200 height=133 loading=lazy></picture><figcaption>Radfahrende in Pforzheim</figcaption></figure><p></p><p>Und hier ein Beispiel eines Bildes, das 2000 Pixel breit ist und deshalb automatisch zum Originalbild verlinkt, während automatisch eine erzeugte kleinere Variante (800 Pixel breit) des Originalbildes hier eingebunden wird.</p><p>Aus:</p><pre><code>
|
||
</code></pre><p>Wird:</p><figure class=image-caption><a href=/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross.jpg><picture><source type=image/webp srcset="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_360x0_resize_q95_h2_catmullrom.webp 360w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_500x0_resize_q95_h2_catmullrom.webp 500w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_816x0_resize_q95_h2_catmullrom.webp 816w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_1632x0_resize_q95_h2_catmullrom.webp 1632w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px"><img alt="Fahrrad auf einem Feldweg und mit einem &lsquo;Vorsicht Kinder&rsquo; Schild auf dem Gepäckträger" srcset="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_360x0_resize_q95_h2_catmullrom.webp 360w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_500x0_resize_q95_h2_catmullrom.webp 500w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_816x0_resize_q95_h2_catmullrom.webp 816w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_1632x0_resize_q95_h2_catmullrom.webp 1632w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px,(min-width: 1200px) 1632px" src=/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/bild-gross_hu8a21981fb063edd2268f2be3898cd825_1439790_816x0_resize_q95_h2_catmullrom.webp title="Das Schild habe ich zuvor am Straßenrand gefunden." loading=lazy width=816 height=612></picture></a><figcaption>Das Schild habe ich zuvor am Straßenrand gefunden.</figcaption></figure><p></p><p>Man kann jedoch sowohl den Alt-Text als auch den Titel weglassen.</p><div class="shortcode-notice hinweis"><div class="shortcode-notice-title hinweis">Hinweis</div><div class=notice-content><p>Mir gefällt jedoch an dieser Syntax, dass man immer daran erinnert wird, einen Beschreibungstext zu hinterlegen und nicht nur einen Titel. Denn der Beschreibungstext (Alt-Text) ist wichtig für Menschen mit Sehbeeinträchtigungen.</p><p>Ich werde in Zukunft somit darauf achten, solche Texte zu hinterlegen. In der Vergangenheit habe ich das im Blog fast nie getan.</p></div></div><h3 id=quelltext data-numberify>Quelltext<a class="anchor ms-1" href=#quelltext></a></h3><p>Hier der fertige Render Hook <code>layouts/_default/_markup/render-image.html</code>:</p><div class=highlight><div style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><table style=border-spacing:0;padding:0;margin:0;border:0><tr><td style=vertical-align:top;padding:0;margin:0;border:0><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 1
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 2
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 3
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 4
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 5
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 6
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 7
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 8
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f"> 9
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">10
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">11
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">12
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">13
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">14
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">15
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">16
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">17
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">18
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">19
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">20
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">21
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">22
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">23
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">24
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">25
|
||
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:.4em;padding:0 .4em;color:#7f7f7f">26
|
||
</span></code></pre></td><td style=vertical-align:top;padding:0;margin:0;border:0;width:100%><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-jinja data-lang=jinja><span style=display:flex><span><span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>autolinking <span style=color:#f92672>:=</span> .Page.Param <span style=color:#e6db74>"imageAutoLink"</span> <span style=color:#f92672>|</span> <span style=color:#a6e22e>default</span> <span style=color:#66d9ef>true</span> <span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> <span style=color:#960050;background-color:#1e0010>$</span>img <span style=color:#f92672>:=</span> .Page.Resources.GetMatch .Destination -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> <span style=color:#66d9ef>if</span> <span style=color:#66d9ef>and</span> <span style=color:#f92672>(</span><span style=color:#66d9ef>not</span> <span style=color:#960050;background-color:#1e0010>$</span>img<span style=color:#f92672>)</span> .Page.File -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>path <span style=color:#f92672>:=</span> path.Join .Page.File.Dir .Destination <span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> <span style=color:#960050;background-color:#1e0010>$</span>img <span style=color:#f92672>=</span> resources.Get <span style=color:#960050;background-color:#1e0010>$</span>path -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> end -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> <span style=color:#66d9ef>with</span> <span style=color:#960050;background-color:#1e0010>$</span>img -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> <span style=color:#960050;background-color:#1e0010>$</span>large <span style=color:#f92672>:=</span> <span style=color:#960050;background-color:#1e0010>$</span>img.Resize <span style=color:#e6db74>"816x"</span> -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> <span style=color:#960050;background-color:#1e0010>$</span>medium <span style=color:#f92672>:=</span> <span style=color:#960050;background-color:#1e0010>$</span>img.Resize <span style=color:#e6db74>"500x"</span> -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> <span style=color:#960050;background-color:#1e0010>$</span>small <span style=color:#f92672>:=</span> <span style=color:#960050;background-color:#1e0010>$</span>img.Resize <span style=color:#e6db74>"360x"</span> -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><figure class="image-caption">
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span> <span style=color:#66d9ef>if</span> gt <span style=color:#960050;background-color:#1e0010>$</span>img.Width <span style=color:#ae81ff>816</span> <span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span> <span style=color:#75715e>{{</span> <span style=color:#66d9ef>if</span> <span style=color:#66d9ef>and</span> <span style=color:#f92672>(</span>gt <span style=color:#960050;background-color:#1e0010>$</span>img.Width <span style=color:#ae81ff>1000</span><span style=color:#f92672>)</span> <span style=color:#f92672>(</span>eq <span style=color:#960050;background-color:#1e0010>$</span>autolinking <span style=color:#66d9ef>true</span> <span style=color:#f92672>)</span> <span style=color:#75715e>}}</span><a href="<span style=color:#75715e>{{</span><span style=color:#f92672>-</span> <span style=color:#960050;background-color:#1e0010>$</span>img.RelPermalink -<span style=color:#75715e>}}</span>"><span style=color:#75715e>{{</span> end <span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span> <img alt="<span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>.Text <span style=color:#75715e>}}</span>" srcset="
|
||
</span></span><span style=display:flex><span> <span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>small.RelPermalink <span style=color:#75715e>}}</span> 360w,
|
||
</span></span><span style=display:flex><span> <span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>medium.RelPermalink <span style=color:#75715e>}}</span> 500w,
|
||
</span></span><span style=display:flex><span> <span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>large.RelPermalink <span style=color:#75715e>}}</span> 816w" sizes="(max-width: 424px) 360px,(max-width: 596px) 500px,(min-width: 565px) 816px" src="<span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>small.RelPermalink <span style=color:#75715e>}}</span>" title="<span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>.Title <span style=color:#75715e>}}</span>" loading="lazy" />
|
||
</span></span><span style=display:flex><span> <span style=color:#75715e>{{</span> <span style=color:#66d9ef>if</span> <span style=color:#66d9ef>and</span> <span style=color:#f92672>(</span>gt <span style=color:#960050;background-color:#1e0010>$</span>img.Width <span style=color:#ae81ff>1000</span><span style=color:#f92672>)</span> <span style=color:#f92672>(</span>eq <span style=color:#960050;background-color:#1e0010>$</span>autolinking <span style=color:#66d9ef>true</span> <span style=color:#f92672>)</span> <span style=color:#75715e>}}</span></a><span style=color:#75715e>{{</span> end <span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span> <span style=color:#66d9ef>else</span> <span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span> <img alt="<span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>.Text <span style=color:#75715e>}}</span>" src="<span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>img.RelPermalink <span style=color:#75715e>}}</span>" loading="lazy" title="<span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>.Title <span style=color:#75715e>}}</span>" />
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span> end <span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span> <figcaption><span style=color:#75715e>{{</span> <span style=color:#66d9ef>with</span> <span style=color:#960050;background-color:#1e0010>$</span>.Title <span style=color:#f92672>|</span> <span style=color:#a6e22e>safeHTML</span> <span style=color:#75715e>}}{{</span> <span style=color:#960050;background-color:#1e0010>.</span> <span style=color:#75715e>}}{{</span> end <span style=color:#75715e>}}</span></figcaption>
|
||
</span></span><span style=display:flex><span></figure>
|
||
</span></span><span style=display:flex><span><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> <span style=color:#66d9ef>else</span> -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><img src="<span style=color:#75715e>{{</span> .Destination <span style=color:#f92672>|</span> <span style=color:#a6e22e>safeURL</span> <span style=color:#75715e>}}</span>" alt="<span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>.Text <span style=color:#75715e>}}</span>" title="<span style=color:#75715e>{{</span> <span style=color:#960050;background-color:#1e0010>$</span>.Title <span style=color:#75715e>}}</span>" loading="lazy" /><span style=color:#75715e>{{</span><span style=color:#f92672>-</span> end -<span style=color:#75715e>}}</span>
|
||
</span></span><span style=display:flex><span><!-- adapted from https://github.com/bep/portable-hugo-links/blob/master/layouts/_default/_markup/render-image.html --></span></span></code></pre></td></tr></table></div></div><h3 id=wie-der-neue-render-hook-funktioniert data-numberify>Wie der neue Render Hook funktioniert<a class="anchor ms-1" href=#wie-der-neue-render-hook-funktioniert></a></h3><p>Und so funktioniert der neu erstellte Render Hook <code>render-image.html</code>:</p><ul><li>Bild ist breiter als 816 Pixel<sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup>:<ul><li>Es werden automatisch kleinere Bildvarianten erstellt und via <code>srcset</code> eingebunden.</li></ul></li><li>Bild ist schmaler als 816 Pixel:<ul><li>Es werden keine kleineren/größeren Bildvarianten erstellt und auf ein <code>srcset</code> wird verzichtet, es wird nur das Originalbild eingebunden. <em>(Man könnte noch implementieren, dass in letzterem Fall nur die Bildvarianten erstellt werden, die kleiner als 816 Pixel sind. Aber das spare ich mir, da das nur selten vorkommt und das meistens Dateien mit sehr geringen Dateigrößen sind.)</em></li><li>Hierdurch wird ein sehr kleines Bild wirklich nur so groß angezeigt, wie es auch ist, nicht vergrößert und matschig.</li></ul></li><li>Bild ist breiter als 1000 Pixel:<ul><li>Es wird automatisch ein Link auf das Originalbild gesetzt. Das Verlinken kann man unterbinden mit <code>imageAutoLink: false</code> im Front Matter eines Blogbeitrags.</li></ul></li><li>Der angegebene Titel wird unter dem Bild angezeigt.</li><li>Der angegebene Alt-Text in eckigen Klammern wird in das alt-Attribut eingefügt.</li><li>Die Bilder werden per <a class=urlextern href=https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading>Lazy loading</a> eingebunden, sodass der Browser sie erst herunterlädt, wenn sie in der Nähe des Sichtbereits im Browser sind. Das spart Ressourcen, falls man nur einen Teil eines Beitrags liest.</li><li>Es werden kleine Bildvarianten mit 500 und 360 Pixeln Breite erstellt. Diese sind für die kleineren Ansichten im Blog notwendig, z. B. auf Mobilgeräten.</li></ul><h3 id=ideen-für-später data-numberify>Ideen für später<a class="anchor ms-1" href=#ideen-für-später></a></h3><ul><li>Es wäre schön, wenn die Beschreibung aus den <a class=urlextern href=https://gohugo.io/content-management/image-processing/#exif-data>Exif-Tags</a> verwendet werden könnte, sofern man keine eigene Beschreibung in Markdown einträgt. Ein Beispiel einer Umsetzung gibt es <a class=urlextern href=https://digitalnotions.net/show-photo-exif-data-in-hugo/>hier</a>.</li><li>Angabe von selbst festgelegter Breite für das Einbinden eines Bildes, wie z. B. <a class=urlextern href=https://discourse.gohugo.io/t/pass-attributes-to-image-render-hook/36899>hier</a> beschrieben oder auch im <a href=#a_theme>hier im Blog verwendeten Theme</a>.</li></ul><h2 id=uffbasse-aufpassen--besser-kein-srcset-bei-kleinen-bildern data-numberify>Uffbasse (Aufpassen) – Besser kein srcset bei kleinen Bildern<a class="anchor ms-1" href=#uffbasse-aufpassen--besser-kein-srcset-bei-kleinen-bildern></a></h2><p>Man kann Hugo anweisen, <a class=urlextern href=https://gohugo.io/content-management/image-processing/#resize>kleinere Bildvarianten des Originalbildes</a> zu erstellen, die man dann statt des Originalbildes verwenden kann. Alternativ kann man daraus ein <code>srcset</code> erstellen, sodass der Browser automatisch die passende Größe aussuchen und herunterladen kann.</p><p>Jedoch ist dieser Mechanismus der Erstellung von Bildvarianten in Hugo ziemlich “dumm”. Wenn z. B. das Bild nur 200 Pixel breit ist, werden angeforderte größere Bildvarianten trotzdem erstellt und das resultiert dann in einem total zermatschten größeren Bild.</p><p>In diesem Screenshot wird das deutlich sichtbar. Das Originalbild (200 Pixel breit) und darunter das Bild, das von Hugo auf Anfrage in 800 Pixel Breite erzeugt wurde, obwohl das Originalbild kleiner ist:</p><p></p><figure class=image-caption><picture><source type=image/webp srcset="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_360x0_resize_q95_h2_catmullrom_2.webp 360w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_500x0_resize_q95_h2_catmullrom_2.webp 500w,/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_816x0_resize_q95_h2_catmullrom_2.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px"><img alt="Oben das Originalbild in 200 Pixel breite und darunter das von Hugo angefragte aus dem Originalbild erzeugte Bild mit circa 800 Pixeln, das entsprechend breit angezeigt wird und natürlich total zermatscht ist." srcset="/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_360x0_resize_q95_h2_catmullrom_2.webp 360w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_500x0_resize_q95_h2_catmullrom_2.webp 500w, /2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_816x0_resize_q95_h2_catmullrom_2.webp 816w" sizes="(max-width: 424px) 360px, (max-width: 596px) 500px, (min-width: 565px) 816px" src=/2022/04/einbindung-von-bildern-in-hugo-infos-und-render-hook/images/2022-04-24-markdown-syntax-und-figure_hu96733c1f658ccc0888b66ba5cbfa8dc6_71688_816x0_resize_q95_h2_catmullrom_2.webp title="Oben das Originalbild in 200 Pixel breite und darunter das von Hugo angefragte aus dem Originalbild erzeugte Bild mit circa 800 Pixeln, das entsprechend breit angezeigt wird und natürlich total zermatscht ist." loading=lazy width=816 height=706></picture><figcaption>Oben das Originalbild in 200 Pixel breite und darunter das von Hugo angefragte aus dem Originalbild erzeugte Bild mit circa 800 Pixeln, das entsprechend breit angezeigt wird und natürlich total zermatscht ist.</figcaption></figure><p></p><p>Jedoch kann man in Hugo per <code>.Width</code> die Breite eines Bildes abfragen und nur dann weitere Bildvarianten erstellen lassen, wenn eine Mindestbreite gegeben ist und bei zu kleinen Bildern auf srcset verzichten.</p><h2 id=passt data-numberify>Passt<a class="anchor ms-1" href=#passt></a></h2><p>Ich bin mit der neuen Lösung erst einmal zufrieden. Ich kann die Standard-Markdown-Syntax verwenden, es wird automatisch ein srcset eingefügt und große Bilder werden automatisch zum Originalbild verlinkt. Und zusätzlich werde ich auch noch daran erinnert, einen passenden Alt-Text zu schreiben.</p><div class=footnotes role=doc-endnotes><hr><ol><li id=fn:1><p>816 Pixel ist die Breite des Inhalts in der Standardansicht meines Blog. <a href=#fnref:1 class=footnote-backref role=doc-backlink>↩︎</a></p></li></ol></div></div></div></div><div class=card-footer><div class="post-navs d-flex justify-content-evenly"><div class="post-nav post-prev"><i class="fas fa-fw fa-chevron-down post-prev-icon me-1" data-fa-transform=rotate-90></i>
|
||
<a href=/2022/04/aenderungen-blog-2/>Änderungen im Blog</a></div><div class="post-nav post-next"><a href=/2022/04/verbesserungen-des-render-hooks-fuer-bilder-und-im-wiki/>Verbesserung des Render Hooks für Bilder hier im Blog (und im Wiki)</a>
|
||
<i class="fas fa-fw fa-chevron-down post-next-icon ms-1" data-fa-transform=rotate-270></i></div></div></div></article><section class="related-posts row card component"><div class=card-header><h2 class="card-title fs-4 my-2 text-surface">Ähnliche Beiträge</h2></div><div class=card-body><ul class="post-list list-styled"><li><a href=https://natenom.de/2022/02/suche-nach-editor-fuers-schreiben-markdown/>Auf der Suche nach einem Editor fürs Schreiben von Markdown für meinen Blog</a></li><li><a href=https://natenom.de/2022/02/umzug-des-blogs-von-wordpress-zu-hugo-teil-1/>Umzug von WordPress zu Hugo – Teil 1 – Von den Gründen bis zum ersten funktionierenden Blog</a></li><li><a href=https://natenom.de/2022/04/aenderungen-blog-2/>Änderungen im Blog</a></li><li><a href=https://natenom.de/2022/04/aenderungen-im-blog-und-im-wiki/>Änderungen im Blog und im Wiki</a></li><li><a href=https://natenom.de/2022/04/bildbeschreibungen-galerien-blog-via-digikam/>Bildbeschreibungen für Galerien im Blog via Digikam einfügen/verwalten</a></li><li><a href=https://natenom.de/2022/04/aenderungen-im-blog/>Änderungen im Blog</a></li><li><a href=https://natenom.de/2022/03/aenderungen-an-blog-und-wiki/>Änderungen an Blog und Wiki</a></li><li><a href=https://natenom.de/2022/03/update-bootstrap-theme-hier-im-blog/>Update für das hier verwendete Theme</a></li><li><a href=https://natenom.de/2022/03/tools-export-dokuwiki-nach-markdown-hugo/>Tools zum Export von DokuWiki nach Markdown (Hugo)</a></li><li><a href=https://natenom.de/2022/03/interwiki-fuer-hugo-als-shortcode/>Interwiki Shortcode für meinen Blog</a></li></ul></div></section><div class="card component row post-comments" id=post-comments><div class=card-header><h2 class="card-title my-2 fs-4 text-surface">Kommentare</h2></div><div class=card-body><p>Bisher gibt es hier keine Kommentare.</p><p><details class="mastodon-comments email"><summary class="mastodon-comments email-summary">Kommentar oder Anmerkung für diesen Blogbeitrag</summary><div class="mastodon-comments emailcontent"><p>Öffentlicher Kommentar per E-Mail: <a href='mailto:natenom@posteo.de?subject=Kommentar zum Blogbeitrag: Einbindung%20von%20Bildern%20in%20Hugo%20%e2%80%93%20Infos%20und%20eigener%20Render%20Hook&body=Hallo Natenom, %0D%0A%0D%0Azu diesem Blogbeitrag habe ich einen Kommentar:%0D%0A%0D%0AMein Name (optional):%0D%0AMeine Website (optional):%0D%0AIch beziehe mich speziell auf den Kommentar mit der ID:%0D%0A%0D%0AURL zum Blogbeitrag: https%3a%2f%2fnatenom.de%2f2022%2f04%2feinbindung-von-bildern-in-hugo-infos-und-render-hook%2f'>Hier klicken</a></p><p>Nicht öffentliche Anmerkung per E-Mail: <a href='mailto:natenom@posteo.de?subject=Persönliche Anmerkung zum Blogbeitrag: Einbindung%20von%20Bildern%20in%20Hugo%20%e2%80%93%20Infos%20und%20eigener%20Render%20Hook&body=Hallo Natenom,%0D%0A%0D%0Azu diesem Blogbeitrag habe ich eine persönliche, nicht zu veröffentlichende Anmerkung:%0D%0A%0D%0AURL zum Blogbeitrag: https%3a%2f%2fnatenom.de%2f2022%2f04%2feinbindung-von-bildern-in-hugo-infos-und-render-hook%2f'>Hier klicken</a></p></p><p>Sonstige Kontaktaufnahme: <a href=/natenom/>Kontakt</a></p></div></details></p></div></div></div></div><aside class="col-xxl-4 sidebar d-flex"><div class="container d-flex flex-column"><div class="accordion profile"><div class="accordion-item card row text-center component"><div class="accordion-header card-header border-0" id=profile-header><a class="accordion-button d-lg-none mb-2 shadow-none p-0 bg-transparent text-surface collapsed" role=button data-bs-toggle=collapse href=#profile aria-expanded=false aria-controls=profile>Profil</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=profile aria-labelledby=profile-header><div class="col-12 d-flex align-items-center justify-content-center"><picture><img class="profile-avatar rounded-circle" alt=Natenom src=https://natenom.de/images/logo-natenom-circle-150x150.png loading=lazy data-viewer-invisible width=150 height=150></picture></div><div class="col-12 profile-meta"><div class="profile-name fw-fold fs-lg">Natenom</div><div class=profile-bio>Verkehrswende, Fahrrad, CriticalMass, OpenBikeSensor, SimRa, OpenSource, Minimalist, OpenStreetMap, Müllsammeln, Malen, Zeichnen</div><a class=profile-about target=_blank rel="noopener noreferrer" href=/natenom/><i class="fas fa-fw fa-user"></i>Über mich</a></div></div></div></div><div class="accordion recent-posts"><section class="row card component"><div class=card-header><h2 class="card-title my-2 fs-4 text-surface d-none d-lg-block">Neueste Beiträge</h2><a class="accordion-button d-lg-none mb-1 shadow-none p-0 bg-transparent collapsed" role=button data-bs-toggle=collapse href=#recent-posts aria-expanded=false aria-controls=recent-posts>Neueste Beiträge</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=recent-posts><ul class="post-list list-unstyled ms-1"><li class=mb-2><a href=/2024/01/mal-wieder-einen-personalausweis-gefunden/>Mal wieder einen Personalausweis gefunden</a></li><li class=mb-2><a href=/2024/01/ueberfordert-im-eigenen-auto/>Überfordert im eigenen Auto</a></li><li class=mb-2><a href=/2024/01/was-damals-bei-kugelmaeusen-geholfen-hat-hilft-auch-bei-solchen-mit-laser/>Was damals bei Kugelmäusen geholfen hat, hilft auch bei solchen mit Laser</a></li><li class=mb-2><a href=/2024/01/haltbarkeit-meiner-ersten-barfussschuhe/>Haltbarkeit meiner ersten Barfußschuhe</a></li><li class=mb-2><a href=/2024/01/link-strassenlaerm/>Link(s): Straßenlärm</a></li><li class=mb-2><a href=/2024/01/simpletools-apps-fuer-android-daten-sammeln-oder-bezahlen-wechsel-zum-fork-fossify/>SimpleTools Apps: Daten sammeln oder bezahlen – Wechselt zum Fork Fossify</a></li><li class=mb-2><a href=/2024/01/dateinamen-mit-emojies-in-telescope-in-neovim/>Dateinamen mit Emojies in Telescope in NeoVim</a></li><li class=mb-2><a href=/2024/01/capslock-als-esc-verwenden--ein-traum-fuer-neovim/>Capslock als Esc verwenden – Ein Traum für NeoVim</a></li></ul></div></section></div><div class="accordion categories-taxonomies"><section class="row card component"><div class=card-header><h2 class="card-title my-2 fs-4 text-surface d-none d-lg-block"><a href=https://natenom.de/categories>Kategorien</a></h2><a class="accordion-button d-lg-none mb-1 shadow-none p-0 bg-transparent text-surface collapsed" role=button data-bs-toggle=collapse href=#taxonomy-categories aria-expanded=false aria-controls=taxonomy-categories>Kategorien</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=taxonomy-categories><div class=py-2><a href=/categories/mobilit%C3%A4t/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Mobilität>Mobilität
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">450</span>
|
||
</a><a href=/categories/fotografie/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Fotografie>Fotografie
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">328</span>
|
||
</a><a href=/categories/diverses/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Diverses>Diverses
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">242</span>
|
||
</a><a href=/categories/web/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Web>Web
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">200</span>
|
||
</a><a href=/categories/linux/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Linux>Linux
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">135</span>
|
||
</a><a href=/categories/android/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Android>Android
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">68</span>
|
||
</a><a href=/categories/linkdump/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Linkdump>Linkdump
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">42</span>
|
||
</a><a href=/categories/mumble/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Mumble>Mumble
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">16</span>
|
||
</a><a href=/categories/navesima/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=NavesiMa>NavesiMa
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">9</span>
|
||
</a><a href=/categories/links/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-category me-2 mb-2" title=Links>Links
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">2</span></a></div></div></section></div><div class="accordion tags-taxonomies"><section class="row card component"><div class=card-header><h2 class="card-title my-2 fs-4 text-surface d-none d-lg-block"><a href=https://natenom.de/tags>Tags</a></h2><a class="accordion-button d-lg-none mb-1 shadow-none p-0 bg-transparent text-surface collapsed" role=button data-bs-toggle=collapse href=#taxonomy-tags aria-expanded=false aria-controls=taxonomy-tags>Tags</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=taxonomy-tags><div class=py-2><a href=/tags/fahrrad/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Fahrrad>Fahrrad
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">557</span>
|
||
</a><a href=/tags/fotos/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Fotos>Fotos
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">410</span>
|
||
</a><a href=/tags/mobilit%C3%A4t/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Mobilität>Mobilität
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">380</span>
|
||
</a><a href=/tags/pforzheim/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Pforzheim>Pforzheim
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">263</span>
|
||
</a><a href=/tags/open-source/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title="Open Source">Open Source
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">237</span>
|
||
</a><a href=/tags/natur/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Natur>Natur
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">208</span>
|
||
</a><a href=/tags/linux/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Linux>Linux
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">161</span>
|
||
</a><a href=/tags/autos/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Autos>Autos
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">131</span>
|
||
</a><a href=/tags/enzkreis/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Enzkreis>Enzkreis
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">115</span>
|
||
</a><a href=/tags/statistiken/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Statistiken>Statistiken
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">110</span>
|
||
</a><a href=/tags/hardware/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Hardware>Hardware
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">107</span>
|
||
</a><a href=/tags/web/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Web>Web
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">107</span>
|
||
</a><a href=/tags/android/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Android>Android
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">98</span>
|
||
</a><a href=/tags/hugo/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Hugo>Hugo
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">89</span>
|
||
</a><a href=/tags/m%C3%BCll/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Müll>Müll
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">89</span>
|
||
</a><a href=/tags/sicherheit/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Sicherheit>Sicherheit
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">88</span>
|
||
</a><a href=/tags/blog/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Blog>Blog
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">87</span>
|
||
</a><a href=/tags/m%C3%BCllsammeln/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Müllsammeln>Müllsammeln
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">86</span>
|
||
</a><a href=/tags/politik/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Politik>Politik
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">86</span>
|
||
</a><a href=/tags/polizei/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Polizei>Polizei
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">76</span>
|
||
</a><a href=/tags/strecke/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Strecke>Strecke
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">75</span>
|
||
</a><a href=/tags/abstand/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Abstand>Abstand
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">74</span>
|
||
</a><a href=/tags/landschaften/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Landschaften>Landschaften
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">74</span>
|
||
</a><a href=/tags/w%C3%A4lder/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Wälder>Wälder
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">68</span>
|
||
</a><a href=/tags/wordpress/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=WordPress>WordPress
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">64</span>
|
||
</a><a href=/tags/neuhausen/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Neuhausen>Neuhausen
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">60</span>
|
||
</a><a href=/tags/apps/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Apps>Apps
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">59</span>
|
||
</a><a href=/tags/videos/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Videos>Videos
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">59</span>
|
||
</a><a href=/tags/landstra%C3%9Fen/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Landstraßen>Landstraßen
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">54</span>
|
||
</a><a href=/tags/makrofotos/ class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=Makrofotos>Makrofotos
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">54</span>
|
||
</a><a href=https://natenom.de/tags class="btn btn-sm btn-secondary post-taxonomy ps-3 post-tag me-2 mb-2" title=ALLE>ALLE
|
||
<span class="badge badge-sm text-secondary bg-white ms-1">816</span></a></div></div></section></div><div class="accordion archives"><section class="row card component"><div class=card-header><h2 class="card-title my-2 fs-4 text-surface d-none d-lg-block"><a href=/archiv/>Archiv</a></h2><a class="accordion-button d-lg-none mb-1 shadow-none p-0 bg-transparent collapsed" role=button data-bs-toggle=collapse href=#archives aria-expanded=false aria-controls=archives>Archiv</a></div><div class="card-body collapse accordion-collapse accordion-body d-lg-block" id=archives><a href=/archiv/2024/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2024>2024 <span class="badge badge-sm text-secondary bg-white ms-1">23</span>
|
||
</a><a href=/archiv/2023/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2023>2023 <span class="badge badge-sm text-secondary bg-white ms-1">147</span>
|
||
</a><a href=/archiv/2022/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2022>2022 <span class="badge badge-sm text-secondary bg-white ms-1">188</span>
|
||
</a><a href=/archiv/2021/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2021>2021 <span class="badge badge-sm text-secondary bg-white ms-1">111</span>
|
||
</a><a href=/archiv/2020/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2020>2020 <span class="badge badge-sm text-secondary bg-white ms-1">193</span>
|
||
</a><a href=/archiv/2019/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2019>2019 <span class="badge badge-sm text-secondary bg-white ms-1">118</span>
|
||
</a><a href=/archiv/2018/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2018>2018 <span class="badge badge-sm text-secondary bg-white ms-1">143</span>
|
||
</a><a href=/archiv/2017/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2017>2017 <span class="badge badge-sm text-secondary bg-white ms-1">163</span>
|
||
</a><a href=/archiv/2016/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2016>2016 <span class="badge badge-sm text-secondary bg-white ms-1">108</span>
|
||
</a><a href=/archiv/2015/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2015>2015 <span class="badge badge-sm text-secondary bg-white ms-1">85</span>
|
||
</a><a href=/archiv/2014/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2014>2014 <span class="badge badge-sm text-secondary bg-white ms-1">85</span>
|
||
</a><a href=/archiv/2013/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2013>2013 <span class="badge badge-sm text-secondary bg-white ms-1">56</span>
|
||
</a><a href=/archiv/2012/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2012>2012 <span class="badge badge-sm text-secondary bg-white ms-1">43</span>
|
||
</a><a href=/archiv/2011/ class="btn btn-sm btn-secondary post-taxonomy ps-3 me-2 mb-2" title=2011>2011 <span class="badge badge-sm text-secondary bg-white ms-1">36</span></a></div></section></div></div></aside></div></main><footer class="footer mt-auto py-3 text-center container"><div class="row text-center"><div class="col-12 mt-2"><p class=mb-2>Natenoms Blog</p><p class="text-secondary mb-2"><small>Mein Blog über verschiedene Themen, die mich über die Zeit beschäftigen. Derzeit sind dies: Verkehrswende, Mobilität, Fahrrad, Minimalismus, Fotografie, Malen, Zeichnen …</small></p><div class="copyright mb-2 text-secondary"><small></small></div><div class="powered-by mb-2 text-secondary"><small>Build with ❤️ from the <a class=text-primary href=https://gohugo.io target=_blank rel="noopener noreferrer">Hugo</a> and the <a class=text-primary href=https://github.com/razonyang/hugo-theme-bootstrap target=_blank rel="noopener noreferrer">HBS</a> theme.</small></div><nav class="social-links nav justify-content-center mb-2 mt-3"><a class="nav-link social-link p-0 me-1 mb-2" target=_blank href=/index.xml title=RSS rel=me><i class="fas fa-fw fa-2x fa-rss" style=color:#ea6221></i></a></nav></div><div class="col-12 col-lg-8 offset-0 offset-lg-1"></div></div><div class=natenom-footer><a href=/ueber/impressum/>Impressum</a> <a href=/ueber/datenschutz/>Datenschutz</a></div></footer><script data-precache src=/assets/main/bundle.min.b0a436c85b86c431bb1c0fdb2ade0445de95435dc453dc7f4f30acad2153b535.js integrity="sha256-sKQ2yFuGxDG7HA/bKt4ERd6VQ13EU9x/TzCsrSFTtTU=" crossorigin=anonymous async></script><script data-precache src=/assets/icons/bundle.min.691458a56c2eef480bec8d31c967801a416b6445459ae901fe213e7870a0dd83.js integrity="sha256-aRRYpWwu70gL7I0xyWeAGkFrZEVFmukB/iE+eHCg3YM=" crossorigin=anonymous defer></script></body></html> |