Brummel/praxis-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(images): drop forced upscaling, match live image sizes

Browse Source 
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 <img> 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)
This commit is contained in:
Brummel
2026-05-21 09:48:43 +02:00
parent 6b877b6100
commit 181e9639ed
10 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/services/corona.md
+1 -1
View File
@@ -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
content/services/diabetologie.md
+1 -1
View File
@@ -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.
content/services/diagnostik.md
+1 -1
View File
@@ -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**
content/services/hv.md
+2 -2
View File
@@ -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
***
<a href="http://www.116117info.de">{{ img(src="services/116117.jpg", width=600, alt="Ärztlicher Bereitschaftsdienst", class="float-right") }}</a>
<a href="http://www.116117info.de">{{ img(src="services/116117.jpg", alt="Ärztlicher Bereitschaftsdienst", class="float-right") }}</a>
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 <i class="fa fa-external-link"></i>](http://www.116117info.de) erreichen.
Für lebensbedrohliche Notfälle gilt die **Notrufnummer 112**.
content/services/kardiologie.md
+1 -1
View File
@@ -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.
content/services/vorsorge.md
+1 -1
View File
@@ -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.
content/team/doctors.md
+3 -3
View File
@@ -7,7 +7,7 @@ anchor = "doctors"
+++
<h1 id="Riemann" class="anchor">Dr. med. Oliver Riemann</h1>
{{ 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") }}
<table class="tg">
<tr>
@@ -36,7 +36,7 @@ anchor = "doctors"
***
<h1 id="Krey" class="anchor">Dr. med. Angela Krey</h1>
{{ 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") }}
<table class="tg">
<tr>
@@ -67,7 +67,7 @@ anchor = "doctors"
***
<h1 id="Malyga" class="anchor">Christian Malyga</h1>
{{ 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") }}
<table class="tg">
<tr>
templates/index.html
+1 -1
View File
@@ -65,7 +65,7 @@
<div class="col-md-6">
<div class="thumbnail clearfix">
<a href="{{ card.url | safe }}">
{{ image::render(src=card.image, width=600, alt=card.title) }}
{{ image::render(src=card.image, alt=card.title) }}
</a>
<div class="caption">
<h3><a href="{{ card.url | safe }}">{{ card.title }}</a></h3>
templates/macros/image.html
+29 -12
View File
@@ -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) -%}
<img
src="{{ resized.url | safe }}"
width="{{ resized.width }}"
height="{{ resized.height }}"
alt="{{ alt }}"
{%- if class %} class="{{ class }}"{% endif %}
loading="lazy"
>
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 <img> 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) -%}
<img
src="{{ resized.url | safe }}"
width="{{ resized.width }}"
height="{{ resized.height }}"
alt="{{ alt }}"
{%- if class %} class="{{ class }}"{% endif %}
loading="lazy"
>
{%- else -%}
<img
src="/images/{{ src | safe }}"
alt="{{ alt }}"
{%- if class %} class="{{ class }}"{% endif %}
loading="lazy"
>
{%- endif -%}
{% endmacro render %}
templates/shortcodes/img.html
+3 -3
View File
@@ -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="")) }}