From 181e9639ed4e5270db88fd45e8408d38871b66be Mon Sep 17 00:00:00 2001 From: Brummel Date: Thu, 21 May 2026 09:48:43 +0200 Subject: [PATCH] fix(images): drop forced upscaling, match live image sizes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The image macro was resizing every call to its width arg, including upscaling 270x180 service thumbnails to 600x400 and rendering 400x400 doctor portraits at full size. Live serves service thumbs at native 270x180 (CSS-floated) and doctor portraits at 200x200. - image macro: width=0 (default) skips resize, emits raw with no width/height — lets theme CSS do the sizing, matching live pattern - img shortcode: defaults width to 0 so callers can omit it - service grid (home + 7 service pages): drop width=600 - doctor portraits on /team: width=200 (matches live render) --- content/services/corona.md | 2 +- content/services/diabetologie.md | 2 +- content/services/diagnostik.md | 2 +- content/services/hv.md | 4 ++-- content/services/kardiologie.md | 2 +- content/services/vorsorge.md | 2 +- content/team/doctors.md | 6 ++--- templates/index.html | 2 +- templates/macros/image.html | 41 ++++++++++++++++++++++---------- templates/shortcodes/img.html | 6 ++--- 10 files changed, 43 insertions(+), 26 deletions(-) diff --git a/content/services/corona.md b/content/services/corona.md index 0105735..fc1c5d3 100644 --- a/content/services/corona.md +++ b/content/services/corona.md @@ -6,7 +6,7 @@ weight = 20 anchor = "Corona" +++ -{{ img(src="services/Corona.jpg", width=600, alt="Corona", class="float-right") }} +{{ img(src="services/Corona.jpg", alt="Corona", class="float-right") }} Seit Beginn der Coronapandemie führen wir in unserer Praxis Tests auf das Corona-Virus (SARS-CoV-2) durch. Zum Schutz aller Anwesenden werden Tests bei Patientinnen und Patienten **mit Symptomen**, sowie deren **Kontaktpersonen**, ausschließlich während diff --git a/content/services/diabetologie.md b/content/services/diabetologie.md index 302bf1a..0cd7c00 100644 --- a/content/services/diabetologie.md +++ b/content/services/diabetologie.md @@ -6,7 +6,7 @@ weight = 60 anchor = "Diabetologie" +++ -{{ img(src="services/Diabetologie.jpg", width=600, alt="Diabetologie", class="float-right") }} +{{ img(src="services/Diabetologie.jpg", alt="Diabetologie", class="float-right") }} Einer unserer internen Schwerpunkte ist die qualifizierte Behandlung von Patientinnen und Patienten die unter **Diabetes mellitus (Zuckerkrankheit)** leiden. Unser Diabetesteam besteht aus unserem Diabetologen [Dr. Riemann](/team#Riemann) und mehreren Diabetes-Assistentinnen. diff --git a/content/services/diagnostik.md b/content/services/diagnostik.md index 35bed5e..b9cd3fe 100644 --- a/content/services/diagnostik.md +++ b/content/services/diagnostik.md @@ -6,7 +6,7 @@ weight = 40 anchor = "Diagnostik" +++ -{{ img(src="services/Diagnostik.jpg", width=600, alt="Diagnostik", class="float-right") }} +{{ img(src="services/Diagnostik.jpg", alt="Diagnostik", class="float-right") }} * **EKG** und **Belastungs-EKG** * **24h-Langzeit-Blutdruckmessung** diff --git a/content/services/hv.md b/content/services/hv.md index 35d1231..e39d7cf 100644 --- a/content/services/hv.md +++ b/content/services/hv.md @@ -6,7 +6,7 @@ weight = 10 anchor = "HV" +++ -{{ img(src="services/HV.jpg", width=600, alt="Hausärztliche Versorgung", class="float-right") }} +{{ img(src="services/HV.jpg", alt="Hausärztliche Versorgung", class="float-right") }} **Als Hausarztpraxis** verstehen wir uns als Ihre ersten Ansprechpartner in allen medizinischen Fragen und sind für Sie die Lotsen im oftmals unübersichtlichen Gesundheitssystem. @@ -18,7 +18,7 @@ Die Praxis ist nach Termin organisiert. Bei akuten Erkrankungen ist jedoch eine *** -{{ img(src="services/116117.jpg", width=600, alt="Ärztlicher Bereitschaftsdienst", class="float-right") }} +{{ img(src="services/116117.jpg", alt="Ärztlicher Bereitschaftsdienst", class="float-right") }} Sollten Sie außerhalb unserer Praxiszeiten ärztliche Hilfe benötigen, können Sie unter der für Sie kostenlosen Telefonnummer 116117 den [zentralen ärztlichen Bereitschaftsdienst ](http://www.116117info.de) erreichen. Für lebensbedrohliche Notfälle gilt die **Notrufnummer 112**. diff --git a/content/services/kardiologie.md b/content/services/kardiologie.md index e329e85..267a1fb 100644 --- a/content/services/kardiologie.md +++ b/content/services/kardiologie.md @@ -6,7 +6,7 @@ weight = 50 anchor = "Kardio" +++ -{{ img(src="services/Kardio.jpg", width=600, alt="Kardiologie", class="float-right") }} +{{ img(src="services/Kardio.jpg", alt="Kardiologie", class="float-right") }} Die **Kardiologie** ist die Lehre des Herzens und seiner Erkrankungen. Sie umfasst die _koronare Herzerkrankung_ (Durchblutungsstörungen des Herzens), den _Herzinfarkt_, die _Bluthochdruckerkrankung_, _Herzschwäche_, _Herzklappenfehler_, _Herzrhythmusstörungen_, _Herzmuskelerkrankungen_, und vieles mehr. Wir bieten Ihnen auf diesem Gebiet sinnvolle Vorsorgeuntersuchungen an. Bei bekannter Herzkrankheit und bei Verdacht auf Herz-Gefäßerkrankungen bieten wir kompetente Beratung, Diagnostik und Therapie. diff --git a/content/services/vorsorge.md b/content/services/vorsorge.md index 269756c..345923a 100644 --- a/content/services/vorsorge.md +++ b/content/services/vorsorge.md @@ -6,7 +6,7 @@ weight = 30 anchor = "Vorsorge" +++ -{{ img(src="services/Vorsorge.jpg", width=600, alt="Vorsorge", class="float-right") }} +{{ img(src="services/Vorsorge.jpg", alt="Vorsorge", class="float-right") }} **Vorsorge** hilft bei der frühzeitigen Erkennung von Krankheiten und der Aufdeckung von persönlichen Risikofaktoren. Sie beinhaltet die Beratung zur individuellen Risikoreduktion. Impfungen schützen Sie und Ihr Umfeld vor Infektionskrankheiten. diff --git a/content/team/doctors.md b/content/team/doctors.md index e861410..ae9a272 100644 --- a/content/team/doctors.md +++ b/content/team/doctors.md @@ -7,7 +7,7 @@ anchor = "doctors" +++

Dr. med. Oliver Riemann

-{{ img(src="team/Olli.jpg", width=400, alt="Dr. med Oliver Riemann", class="float-right") }} +{{ img(src="team/Olli.jpg", width=200, alt="Dr. med Oliver Riemann", class="float-right") }} @@ -36,7 +36,7 @@ anchor = "doctors" ***

Dr. med. Angela Krey

-{{ img(src="team/Angela.jpg", width=400, alt="Dr. Angela Krey", class="float-right") }} +{{ img(src="team/Angela.jpg", width=200, alt="Dr. Angela Krey", class="float-right") }}
@@ -67,7 +67,7 @@ anchor = "doctors" ***

Christian Malyga

-{{ img(src="team/Christian.jpg", width=400, alt="Christian Malyga", class="float-right") }} +{{ img(src="team/Christian.jpg", width=200, alt="Christian Malyga", class="float-right") }}
diff --git a/templates/index.html b/templates/index.html index 01a9881..a103f7f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -65,7 +65,7 @@
- {{ image::render(src=card.image, width=600, alt=card.title) }} + {{ image::render(src=card.image, alt=card.title) }}

{{ card.title }}

diff --git a/templates/macros/image.html b/templates/macros/image.html index a28b042..24c90a0 100644 --- a/templates/macros/image.html +++ b/templates/macros/image.html @@ -1,15 +1,32 @@ {# Image-rendering macro, used both by templates (directly via import) - and indirectly by the `img` shortcode (which forwards to it). #} + and indirectly by the `img` shortcode (which forwards to it). -{% macro render(src, width, alt="", class="") %} - {%- set source_path = "static/images/" ~ src -%} - {%- set resized = resize_image(path=source_path, width=width, op="fit_width", quality=85) -%} - {{ alt }} + With `width > 0`: resizes via Zola's image pipeline and emits explicit + width/height attributes (good for large hero/preview images). + + With `width = 0` (default): emits a raw served from /static/images/ + with no width/height attributes — lets the theme CSS size the image, which + matches the live Grav site's pattern. Use this for content thumbnails that + the theme styles responsively. #} + +{% macro render(src, width=0, alt="", class="") %} + {%- set width = width | int -%} + {%- if width > 0 -%} + {%- set resized = resize_image(path="static/images/" ~ src, width=width, op="fit_width", quality=85) -%} + {{ alt }} + {%- else -%} + {{ alt }} + {%- endif -%} {% endmacro render %} diff --git a/templates/shortcodes/img.html b/templates/shortcodes/img.html index 7f22284..e8c2ea5 100644 --- a/templates/shortcodes/img.html +++ b/templates/shortcodes/img.html @@ -1,8 +1,8 @@ {# Image shortcode for use inside Markdown content. Forwards to the shared image macro so we have one source of truth. Usage in markdown: - {{ img(src="team/Olli.jpg", width=400, alt="Dr. Riemann") }} - {{ img(src="services/HV.jpg", width=600, alt="...", class="float-right") }} + {{ img(src="team/Olli.jpg", width=200, alt="Dr. Riemann") }} # resized + {{ img(src="services/HV.jpg", alt="HV", class="float-right") }} # raw, CSS-sized #} {%- import "macros/image.html" as image -%} -{{ image::render(src=src, width=width, alt=alt | default(value=""), class=class | default(value="")) }} +{{ image::render(src=src, width=width | default(value=0), alt=alt | default(value=""), class=class | default(value="")) }}