intotheeast-com-content/themes/intotheeast/templates/partials/entry-journal.html.twig

{% include 'partials/weather-icons.html.twig' %}
{% set owner_can_edit = owner_can_edit ?? false %}
{% set feed_return_url = feed_return_url ?? trip_page.url ?? '/' %}
<article class="journal-post{% if not entry.published %} is-draft{% endif %}" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}"{% if owner_can_edit %} data-entry-route="{{ entry.route }}"{% endif %}>
    <header class="journal-post-header">
        <div class="journal-post-titlerow">
            <h2 class="journal-post-title">{{ entry.title }}{% if not entry.published %} <span class="journal-draft-badge">Draft</span>{% endif %}</h2>
            {% if owner_can_edit %}
            <div class="journal-post-actions" data-entry-route="{{ entry.route }}">
                <a class="entry-action entry-action--edit" href="/post?edit={{ entry.route|url_encode }}&return={{ feed_return_url|url_encode }}">Edit</a>
                <button class="entry-action entry-action--delete" type="button" data-delete-start>Delete</button>
                <span class="entry-delete-confirm" hidden>
                    <button class="entry-action entry-action--cancel" type="button" data-delete-cancel>Cancel</button>
                    <button class="entry-action entry-action--confirm" type="button" data-delete-confirm>Confirm delete</button>
                </span>
                <span class="entry-delete-msg" role="status" aria-live="polite"></span>
            </div>
            {% endif %}
        </div>
        <p class="journal-post-meta">
            <a class="journal-post-permalink" href="{{ entry.url }}">
                <time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
            </a>
            {% if entry.header.location_city or entry.header.location_country %}
            <span class="journal-post-location">
                · <svg width="11" height="13" viewBox="0 0 12 14" fill="currentColor" aria-hidden="true"><path d="M6 0C3.24 0 1 2.24 1 5c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 6.75A1.75 1.75 0 1 1 6 3.25a1.75 1.75 0 0 1 0 3.5z"/></svg>
                {%- set _loc = [] -%}
                {%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
                {%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
                {{ _loc|join(', ') }}
            </span>
            {% endif %}
            {% if entry.header.weather_desc %}
            <span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc|lower]|default('')|raw }} {{ entry.header.weather_desc }}</span>
            {% endif %}
        </p>
    </header>

    {% set images = entry.media.images %}
    {% if images|length > 0 %}
    {#
      Lightbox slides link to a 2000px fit-within DERIVATIVE, and the
      data-pswp-* dims are measured from that derivative's saved file — never
      from `img.width`/`img.height`, which are the ORIGINAL's raw stored pixels
      with EXIF orientation ignored. Originals from iPhones are often stored
      rotated (landscape pixels + EXIF "rotate 90°"), so raw dims disagree with
      what the browser renders and PhotoSwipe squeezes portraits into landscape
      boxes (BUG 2026-07-09, covered by tests/ui/post/lightbox-dims.spec.js).
      The derivative is re-encoded (EXIF stripped, orientation baked in when
      php-exif is available), so its measured dims always match its rendering.
      Note: .path()/.url each finalize+reset the medium's operation queue,
      hence the repeated cropResize() calls — the derivative file itself is
      cached. path() needs explicit parens: Medium is ArrayAccess and carries a
      'path' ITEM (the page folder), which shadows the method in Twig's
      attribute resolution and hands getimagesize a directory.
    #}
    {% set firstDims = (images|first).cropResize(2000, 2000).path()|getimagesize %}
    {% set wrapRatio = firstDims[1] > firstDims[0] ? '4 / 5' : '4 / 3' %}
    <div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
        <div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}" data-slides="{{ images|length }}">
            {% for img in images %}
            {% set slideDims = img.cropResize(2000, 2000).path()|getimagesize %}
            <a class="journal-photo-slide"
               href="{{ img.cropResize(2000, 2000).url }}"
               data-pswp-width="{{ slideDims[0] }}"
               data-pswp-height="{{ slideDims[1] }}"
               style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
               target="_blank">
                <img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
            </a>
            {% endfor %}
        </div>
        {% if images|length > 1 %}
        <div class="journal-photo-dots" aria-hidden="true">
            {% for img in images %}
            <span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
            {% endfor %}
        </div>
        {% endif %}
        <button class="journal-photo-expand" aria-label="View full size">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
        </button>
    </div>
    {% endif %}

    <div class="journal-post-body">{{ entry.content|raw }}</div>
</article>