96 lines
3.5 KiB
Twig
96 lines
3.5 KiB
Twig
{% extends 'partials/base.html.twig' %}
|
||
|
||
{% block content %}
|
||
{% set stories = page.children.published().order('date', 'asc') %}
|
||
|
||
{# Collect stories that have coordinates for the mini-map #}
|
||
{% set map_entries = [] %}
|
||
{% for story in stories %}
|
||
{% if story.header.lat is not empty and story.header.lng is not empty %}
|
||
{% set map_entries = map_entries|merge([{
|
||
'lat': story.header.lat,
|
||
'lng': story.header.lng,
|
||
'title': story.title,
|
||
'slug': story.slug,
|
||
'url': story.url,
|
||
'type': 'story',
|
||
'force_connect': false,
|
||
'transport_mode': null
|
||
}]) %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% set trip_page = page.parent() %}
|
||
|
||
{% include 'partials/feed-map.html.twig' with {
|
||
'map_entries': map_entries,
|
||
'map_id': 'stories-map',
|
||
'map_var': 'storiesMap',
|
||
'link_href': null,
|
||
'card_prefix': 'story-',
|
||
'trip_page': trip_page,
|
||
'show_journey': false
|
||
} only %}
|
||
|
||
<div class="stories-listing">
|
||
<div class="stories-listing__header">
|
||
<h1 class="stories-listing__heading">Stories</h1>
|
||
<button class="trip-stats-btn" id="feed-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
|
||
</div>
|
||
|
||
{% if stories|length > 0 %}
|
||
<div class="stories-grid">
|
||
{% for story in stories %}
|
||
{% set hero = null %}
|
||
{% if story.header.hero_image and story.media[story.header.hero_image] is defined %}
|
||
{% set hero = story.media[story.header.hero_image] %}
|
||
{% endif %}
|
||
|
||
{% set date_str = story.date|date('d M Y') %}
|
||
{% if story.header.end_date %}
|
||
{% set date_str = story.date|date('d M') ~ '–' ~ story.header.end_date|date('d M Y') %}
|
||
{% endif %}
|
||
|
||
<a class="story-card" id="story-{{ story.slug }}" href="{{ story.url }}">
|
||
{% if hero %}
|
||
<div class="story-card__photo">
|
||
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ story.title }}" loading="lazy">
|
||
</div>
|
||
{% else %}
|
||
<div class="story-card__photo story-card__photo--empty"></div>
|
||
{% endif %}
|
||
<div class="story-card__body">
|
||
<time class="story-card__date" datetime="{{ story.date|date('Y-m-d') }}">{{ date_str }}</time>
|
||
{% if story.header.location_name %}
|
||
<span class="story-card__location">📍 {{ story.header.location_name }}{% if story.header.location_country %}, {{ story.header.location_country }}{% endif %}</span>
|
||
{% endif %}
|
||
<h2 class="story-card__title">{{ story.title }}</h2>
|
||
<span class="story-card__cta">Read story →</span>
|
||
</div>
|
||
</a>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<p class="stories-empty">No stories yet — check back soon.</p>
|
||
{% endif %}
|
||
</div>
|
||
<script>
|
||
(function() {
|
||
var sortBtn = document.getElementById('feed-sort-toggle');
|
||
if (!sortBtn) return;
|
||
var grid = document.querySelector('.stories-grid');
|
||
if (!grid) return;
|
||
var ascending = true;
|
||
|
||
sortBtn.addEventListener('click', function() {
|
||
ascending = !ascending;
|
||
var cards = Array.from(grid.querySelectorAll('.story-card'));
|
||
cards.reverse().forEach(function(el) { grid.appendChild(el); });
|
||
sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
|
||
sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
|
||
sortBtn.classList.toggle('is-active', !ascending);
|
||
});
|
||
})();
|
||
</script>
|
||
{% endblock %}
|