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>
|
||||
<html lang="de">
|
||||
<head><meta charset="utf-8"><title>{{ config.title }}</title></head>
|
||||
<body>
|
||||
<h1>{{ config.title }}</h1>
|
||||
<p>{{ section.content | safe }}</p>
|
||||
</body>
|
||||
</html>
|
||||
{% extends "base.html" %}
|
||||
{% import "macros/image.html" as image %}
|
||||
|
||||
{% 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 %}">
|
||||
{{ 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:
|
||||
{{ img(src="team/Olli.jpg", width=400, alt="Dr. Riemann") }}
|
||||
{{ img(src="carousel/page1.jpg", width=1920, alt="Praxis") }}
|
||||
Class is optional, e.g. class="float-right". #}
|
||||
|
||||
{%- 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 | default(value="") }}"
|
||||
{%- if class %} class="{{ class }}"{% endif %}
|
||||
loading="lazy"
|
||||
>
|
||||
{{ img(src="services/HV.jpg", width=600, alt="...", class="float-right") }}
|
||||
#}
|
||||
{%- import "macros/image.html" as image -%}
|
||||
{{ image::render(src=src, width=width, alt=alt | default(value=""), class=class | default(value="")) }}
|
||||
|
||||
Reference in New Issue
Block a user