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:
@@ -7,7 +7,7 @@ anchor = "doctors"
|
||||
+++
|
||||
|
||||
<h1 id="Riemann" class="anchor">Dr. med. Oliver Riemann</h1>
|
||||
{{ img(src="team/Olli.jpg", width=200, alt="Dr. med Oliver Riemann", class="float-right") }}
|
||||
<p>{{ img(src="team/Olli.jpg", width=200, alt="Dr. med Oliver Riemann", class="float-right") }}</p>
|
||||
|
||||
<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=200, alt="Dr. Angela Krey", class="float-right") }}
|
||||
<p>{{ img(src="team/Angela.jpg", width=200, alt="Dr. Angela Krey", class="float-right") }}</p>
|
||||
|
||||
<table class="tg">
|
||||
<tr>
|
||||
@@ -67,7 +67,7 @@ anchor = "doctors"
|
||||
***
|
||||
|
||||
<h1 id="Malyga" class="anchor">Christian Malyga</h1>
|
||||
{{ img(src="team/Christian.jpg", width=200, alt="Christian Malyga", class="float-right") }}
|
||||
<p>{{ img(src="team/Christian.jpg", width=200, alt="Christian Malyga", class="float-right") }}</p>
|
||||
|
||||
<table class="tg">
|
||||
<tr>
|
||||
|
||||
Reference in New Issue
Block a user