Files
praxis-page/templates/index.html
T
Brummel b52a79bbab fix(hero): serve full-resolution carousel images
Bootstrap-3 caps slide images with `max-width: 100%` only; if the
natural image is narrower than the viewport, the slide stops short
of the column edge. The macro was downscaling to 1920 px, which made
the hero shrink on >1920 px screens.

Match live's behaviour by serving the raw source image (5345 / 5621 px
wide) without resize — the source images are intentionally oversized
for this reason.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 12:28:19 +02:00

122 lines
4.5 KiB
HTML

{% extends "base.html" %}
{% import "macros/image.html" as image %}
{% import "macros/section_title.html" as st %}
{% block content %}
{# ───────── Carousel ───────── #}
<div id="x-corp-carousel" class="carousel slide hero-slide" data-ride="carousel">
<ol class="carousel-indicators">
{% for slide in section.extra.slides %}
<li data-target="#x-corp-carousel"
data-slide-to="{{ loop.index0 }}"
class="{% if loop.first %}active{% endif %}"></li>
{% endfor %}
</ol>
<div class="carousel-inner" role="listbox">
{% for slide in section.extra.slides %}
<div class="item{% if loop.first %} active{% endif %}">
{# Serve the source image at full resolution — Bootstrap-3 only
constrains via `max-width: 100%`, so on viewports wider than
the natural image width the slide would otherwise sit short
of the column edge. Live does the same (no resize). #}
{{ image::render(src=slide.image, alt=slide.alt) }}
<div class="carousel-caption">
<p>{{ slide.heading }}</p>
</div>
</div>
{% endfor %}
</div>
<a class="left carousel-control" href="#x-corp-carousel" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#x-corp-carousel" role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
{# ───────── News (loaded from content/news.md) ───────── #}
{# Mirror live's news.html.twig: section-title always wraps the h2 in
`.anchor` (with empty id), and the content lands inside an outer <p>
tag — the auto-close on the first inner <p> yields one leading
empty <p></p>, which contributes the 10px-margin that Grav's markdown
pipeline produces. #}
{% set news_page = get_page(path="news.md") %}
<section class="news-text ptb-text" id="aktuelles">
{{ st::section_title(title="Aktuelles", with_anchor=true) }}
<div class="container">
<div class="row">
<p>{{ news_page.content | safe }}</p>
</div>
</div>
</section>
{# ───────── About columns ───────── #}
<section class="about-text ptb-100">
{{ st::section_title(title="Willkommen in unserer Praxis am Lienhardplatz") }}
<div class="container">
<div class="row">
{% for col in section.extra.about_columns %}
<div class="col-md-6">{{ col.text | markdown(inline=false) | safe }}</div>
{% endfor %}
</div>
</div>
</section>
{# ───────── Service grid ───────── #}
<section class="x-services ptb-100 gray-bg">
{{ st::section_title(title="Unsere Leistungen") }}
<div class="container">
{% for card in section.extra.service_cards %}
{% if loop.index0 % 2 == 0 %}<div class="row">{% endif %}
<div class="col-md-6">
<div class="thumbnail clearfix">
<a href="{{ card.url | safe }}">
{{ image::render(src=card.image, alt=card.title) }}
</a>
<div class="caption">
<h3><a href="{{ card.url | safe }}">{{ card.title }}</a></h3>
<p>{{ card.description }}</p>
</div>
</div>
</div>
{% if loop.index0 % 2 == 1 or loop.last %}</div>{% endif %}
{% endfor %}
</div>
</section>
{# ───────── Team preview ───────── #}
{% if section.extra.team_preview %}
<section class="team ptb-100">
{{ st::section_title(title="Ihr Ärzteteam") }}
<div class="container">
<div class="row">
{% for member in section.extra.team_preview %}
<div class="col-md-4">
<figure class="thumbnail">
<a href="{{ member.url | safe }}">
{{ image::render(src=member.image, width=400, alt=member.name) }}
</a>
<figcaption class="caption text-center">
<h3>{{ member.name }} -
<small>{{ member.position }}</small>
</h3>
</figcaption>
</figure>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{# Notfall block intentionally skipped — was `published: false` in Grav. #}
{# Map embed removed — third-party iframes trigger GDPR cookie consent.
The live site had it removed for this reason; do not add back without
a consent gate. #}
{% endblock %}