fix(images): match live <p>-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 <p> (markdown spec),
   adding the expected paragraph margin. Our shortcode emitted bare <img>
   with no wrapper, so the following <p> was visually slightly closer.
   Wrap the shortcode calls in <p> in the 6 service pages and 3 doctor
   blocks to restore the rhythm.
This commit is contained in:
2026-05-21 10:03:04 +02:00
parent 181e9639ed
commit 385dce04e5
8 changed files with 19 additions and 29 deletions
+10 -20
View File
@@ -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 <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. #}
With `width = 0` (default): emits the raw <img> 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) -%}
<img
src="{{ resized.url | safe }}"
width="{{ resized.width }}"
height="{{ resized.height }}"
alt="{{ alt }}"
{%- if class %} class="{{ class }}"{% endif %}
loading="lazy"
>
<img src="{{ resized.url | safe }}" alt="{{ alt }}"{% if class %} class="{{ class }}"{% endif %} loading="lazy">
{%- else -%}
<img
src="/images/{{ src | safe }}"
alt="{{ alt }}"
{%- if class %} class="{{ class }}"{% endif %}
loading="lazy"
>
<img src="/images/{{ src | safe }}" alt="{{ alt }}"{% if class %} class="{{ class }}"{% endif %} loading="lazy">
{%- endif -%}
{% endmacro render %}