feat: home page template with carousel, news, about, services, team sections
- Extends base.html, uses shared image macro for resize_image - Refactored img shortcode to forward to macros/image.html (DRY) - News pulled via get_page from content/news.md - Notfall section skipped (was unpublished in grav) - Map call commented out until shortcode lands in Task 20
This commit is contained in:
+98
-8
@@ -1,8 +1,98 @@
|
|||||||
<!DOCTYPE html>
|
{% extends "base.html" %}
|
||||||
<html lang="de">
|
{% import "macros/image.html" as image %}
|
||||||
<head><meta charset="utf-8"><title>{{ config.title }}</title></head>
|
|
||||||
<body>
|
{% block content %}
|
||||||
<h1>{{ config.title }}</h1>
|
|
||||||
<p>{{ section.content | safe }}</p>
|
{# ───────── Carousel ───────── #}
|
||||||
</body>
|
<div id="x-corp-carousel" class="carousel slide hero-slide" data-ride="carousel">
|
||||||
</html>
|
<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 %}">
|
||||||
|
{{ image::render(src=slide.image, width=1920, 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) ───────── #}
|
||||||
|
{% set news_page = get_page(path="news.md") %}
|
||||||
|
<section class="ptb-100" id="aktuelles">
|
||||||
|
<div class="container">
|
||||||
|
{{ news_page.content | safe }}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{# ───────── About columns ───────── #}
|
||||||
|
<section class="ptb-100">
|
||||||
|
<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="ptb-100 bg-gray">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Unsere Leistungen</h2>
|
||||||
|
<div class="row">
|
||||||
|
{% for card in section.extra.service_cards %}
|
||||||
|
<div class="col-md-4 col-sm-6">
|
||||||
|
<a href="{{ card.url }}" class="service-card">
|
||||||
|
{{ image::render(src=card.image, width=600, alt=card.title) }}
|
||||||
|
<h3>{{ card.title }}</h3>
|
||||||
|
<p>{{ card.description }}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{# ───────── Team preview ───────── #}
|
||||||
|
{% if section.extra.team_preview %}
|
||||||
|
<section class="ptb-100">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Unser Team</h2>
|
||||||
|
<div class="row">
|
||||||
|
{% for member in section.extra.team_preview %}
|
||||||
|
<div class="col-md-4 col-sm-6 text-center">
|
||||||
|
<a href="{{ member.url }}">
|
||||||
|
{{ image::render(src=member.image, width=400, alt=member.name) }}
|
||||||
|
<h4>{{ member.name }}</h4>
|
||||||
|
<p>{{ member.position }}</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{# Notfall block intentionally skipped — was `published: false` in Grav. #}
|
||||||
|
|
||||||
|
{# ───────── Map ───────── #}
|
||||||
|
{# Map shortcode added in Task 20; left as a placeholder comment here. #}
|
||||||
|
{# {{ map() }} #}
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|||||||
@@ -0,0 +1,15 @@
|
|||||||
|
{# Image-rendering macro, used both by templates (directly via import)
|
||||||
|
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 }}"
|
||||||
|
width="{{ resized.width }}"
|
||||||
|
height="{{ resized.height }}"
|
||||||
|
alt="{{ alt }}"
|
||||||
|
{%- if class %} class="{{ class }}"{% endif %}
|
||||||
|
loading="lazy"
|
||||||
|
>
|
||||||
|
{% endmacro render %}
|
||||||
@@ -1,16 +1,8 @@
|
|||||||
{# Image shortcode with width-based resize and lazy loading.
|
{# Image shortcode for use inside Markdown content.
|
||||||
|
Forwards to the shared image macro so we have one source of truth.
|
||||||
Usage in markdown:
|
Usage in markdown:
|
||||||
{{ img(src="team/Olli.jpg", width=400, alt="Dr. Riemann") }}
|
{{ img(src="team/Olli.jpg", width=400, alt="Dr. Riemann") }}
|
||||||
{{ img(src="carousel/page1.jpg", width=1920, alt="Praxis") }}
|
{{ img(src="services/HV.jpg", width=600, alt="...", class="float-right") }}
|
||||||
Class is optional, e.g. class="float-right". #}
|
#}
|
||||||
|
{%- import "macros/image.html" as image -%}
|
||||||
{%- set source_path = "static/images/" ~ src -%}
|
{{ image::render(src=src, width=width, alt=alt | default(value=""), class=class | default(value="")) }}
|
||||||
{%- set resized = resize_image(path=source_path, width=width, op="fit_width", quality=85) -%}
|
|
||||||
<img
|
|
||||||
src="{{ resized.url }}"
|
|
||||||
width="{{ resized.width }}"
|
|
||||||
height="{{ resized.height }}"
|
|
||||||
alt="{{ alt | default(value="") }}"
|
|
||||||
{%- if class %} class="{{ class }}"{% endif %}
|
|
||||||
loading="lazy"
|
|
||||||
>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user