From 385dce04e58669cca542525621f6523096b6b87f Mon Sep 17 00:00:00 2001 From: Brummel Date: Thu, 21 May 2026 10:03:04 +0200 Subject: [PATCH] fix(images): match live

-wrapped img markup, drop width/height attrs Two related fixes for the visual gaps reported after the previous pass: 1. Doctor portraits on /team were horizontally compressed. Cause: explicit width="200"/height="200" attributes interacted with Bootstrap's `img { display:block; max-width:100%; height:auto }` and `.float-right` padding to squish the rendered box. Dropping the attributes lets the browser use the resized image's intrinsic 200x200 dimensions, with the padding sitting around the image instead of inside its width. 2. Vertical rhythm was a few pixels off vs live. Cause: the live Grav markdown wraps standalone image references in

(markdown spec), adding the expected paragraph margin. Our shortcode emitted bare with no wrapper, so the following

was visually slightly closer. Wrap the shortcode calls in

in the 6 service pages and 3 doctor blocks to restore the rhythm. --- content/services/corona.md | 2 +- content/services/diabetologie.md | 2 +- content/services/diagnostik.md | 2 +- content/services/hv.md | 2 +- content/services/kardiologie.md | 2 +- content/services/vorsorge.md | 2 +- content/team/doctors.md | 6 +++--- templates/macros/image.html | 30 ++++++++++-------------------- 8 files changed, 19 insertions(+), 29 deletions(-) diff --git a/content/services/corona.md b/content/services/corona.md index fc1c5d3..bfb268b 100644 --- a/content/services/corona.md +++ b/content/services/corona.md @@ -6,7 +6,7 @@ weight = 20 anchor = "Corona" +++ -{{ img(src="services/Corona.jpg", 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 0cd7c00..6bcbbff 100644 --- a/content/services/diabetologie.md +++ b/content/services/diabetologie.md @@ -6,7 +6,7 @@ weight = 60 anchor = "Diabetologie" +++ -{{ img(src="services/Diabetologie.jpg", 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 b9cd3fe..07afa69 100644 --- a/content/services/diagnostik.md +++ b/content/services/diagnostik.md @@ -6,7 +6,7 @@ weight = 40 anchor = "Diagnostik" +++ -{{ img(src="services/Diagnostik.jpg", 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 e39d7cf..e835139 100644 --- a/content/services/hv.md +++ b/content/services/hv.md @@ -6,7 +6,7 @@ weight = 10 anchor = "HV" +++ -{{ img(src="services/HV.jpg", 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. diff --git a/content/services/kardiologie.md b/content/services/kardiologie.md index 267a1fb..2f49f2a 100644 --- a/content/services/kardiologie.md +++ b/content/services/kardiologie.md @@ -6,7 +6,7 @@ weight = 50 anchor = "Kardio" +++ -{{ img(src="services/Kardio.jpg", 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 345923a..432986b 100644 --- a/content/services/vorsorge.md +++ b/content/services/vorsorge.md @@ -6,7 +6,7 @@ weight = 30 anchor = "Vorsorge" +++ -{{ img(src="services/Vorsorge.jpg", 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 ae9a272..58f0623 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=200, 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=200, 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=200, alt="Christian Malyga", class="float-right") }} +

{{ img(src="team/Christian.jpg", width=200, alt="Christian Malyga", class="float-right") }}

diff --git a/templates/macros/image.html b/templates/macros/image.html index 24c90a0..d2bb5b6 100644 --- a/templates/macros/image.html +++ b/templates/macros/image.html @@ -1,32 +1,22 @@ {# Image-rendering macro, used both by templates (directly via import) and indirectly by the `img` shortcode (which forwards to it). - With `width > 0`: resizes via Zola's image pipeline and emits explicit - width/height attributes (good for large hero/preview images). + With `width > 0`: resizes via Zola's image pipeline (file size benefit) + but emits no width/height attributes — the theme CSS sizes the image, + matching the live Grav site's pattern. Avoiding the HTML width attribute + sidesteps a stretch artefact triggered by Bootstrap-3's + `img { height: auto !important }` interacting with `.float-right` + padding. - 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. #} + With `width = 0` (default): emits the raw straight from + /static/images/ — same shape, no resize. #} {% 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 }} + {{ alt }} {%- else -%} - {{ alt }} + {{ alt }} {%- endif -%} {% endmacro render %}