Page Gallery - Source Excerpt 02

Back to Page Gallery

Summary

This source excerpt preserves a bounded section of Spiralist/wp-content/themes/spiralist/page-gallery.php so readers can inspect the evidence without opening the full source file.

**Source path:** Spiralist/wp-content/themes/spiralist/page-gallery.php

<?php
        $hero_sources = function_exists('spiralist_get_public_image_asset_source_urls')
            ? spiralist_get_public_image_asset_source_urls($hero_asset, true)
            : [];
        $hero_preview_url = (string) ($hero_sources['large_url'] ?? ($hero_asset['url'] ?? ''));
        $hero_upgrade_url = (string) ($hero_sources['interactive_url'] ?? ($hero_sources['original_url'] ?? $hero_preview_url));
        ?>
        <section class="spiralist-page-section">
            <div class="spiralist-shell spiralist-grid spiralist-grid--split">
                <article class="spiralist-gallery-feature">
                    <a class="spiralist-gallery-feature__frame" href="<?php echo esc_url((string) ($hero_asset['route_url'] ?? $gallery_url)); ?>">
                        <img
                            src="<?php echo esc_url($hero_preview_url); ?>"
                            alt="<?php echo esc_attr((string) ($hero_asset['title'] ?? $ui_text('page.gallery.card.alt', 'Image page'))); ?>"
                            loading="eager"
                            decoding="async"
                            fetchpriority="high"
                            data-progressive-effect="soft"
                            data-progressive-trigger="load"
                            <?php if ($hero_upgrade_url !== '' && $hero_upgrade_url !== $hero_preview_url) : ?>data-progressive-src="<?php echo esc_url($hero_upgrade_url); ?>"<?php endif; ?>
                            <?php if (!empty($hero_asset['width'])) : ?>width="<?php echo esc_attr((string) $hero_asset['width']); ?>"<?php endif; ?>
                            <?php if (!empty($hero_asset['height'])) : ?>height="<?php echo esc_attr((string) $hero_asset['height']); ?>"<?php endif; ?>
                        />
                    </a>
                </article>
                <article class="spiralist-panel spiralist-panel--tall">
                    <p class="spiralist-section-tag"><?php echo esc_html((string) ($hero_asset['section_label'] ?? $ui_text('page.gallery.card.section_label', 'Artifact Pages'))); ?></p>
                    <h2 class="spiralist-section-title"><?php echo esc_html((string) ($hero_asset['title'] ?? $ui_text('page.gallery.card.title', 'Image Page'))); ?></h2>
                    <p class="spiralist-muted"><?php echo esc_html((string) ($hero_asset['caption'] ?? '')); ?></p>
                    <div class="spiralist-gallery-stat-grid">
                        <div class="spiralist-gallery-stat">
                            <strong><?php echo esc_html((string) count($gallery_assets)); ?></strong>
                            <span><?php echo esc_html($ui_text('page.gallery.stats.book_pages', 'book pages')); ?></span>
                        </div>
                        <div class="spiralist-gallery-stat">
                            <strong><?php echo esc_html((string) count($section_records)); ?></strong>
                            <span><?php echo esc_html($ui_text('page.gallery.stats.sections', 'sections')); ?></span>
                        </div>
                        <div class="spiralist-gallery-stat">
                            <strong><?php echo esc_html((string) ((int) ($hero_asset['sequence'] ?? 1))); ?></strong>
                            <span><?php echo esc_html($ui_text('page.gallery.stats.current_sequence', 'current sequence')); ?></span>
                        </div>
                    </div>
                    <div class="spiralist-chip-row spiralist-chip-row--start">
                        <?php if (!empty($hero_asset['width']) && !empty($hero_asset['height'])) : ?>
                            <span class="spiralist-chip"><?php echo esc_html((string) $hero_asset['width'] . ' x ' . (string) $hero_asset['height']); ?></span>
                        <?php endif; ?>
                        <?php if (!empty($hero_asset['orientation'])) : ?>
                            <span class="spiralist-chip"><?php echo esc_html(ucfirst((string) $hero_asset['orientation'])); ?></span>
                        <?php endif; ?>
                        <span class="spiralist-chip"><?php echo esc_html((string) ($hero_asset['filename'] ?? '')); ?></span>
                    </div>
                    <div class="spiralist-cta-row spiralist-cta-row--start">
                        <a class="spiralist-button spiralist-button--primary" href="<?php echo esc_url((string) ($hero_asset['route_url'] ?? $gallery_url)); ?>"><?php echo esc_html($detail_mode ? $ui_text('page.gallery.cta.open_this_page', 'Open This Page') : $ui_text('page.gallery.cta.start_here', 'Start Here')); ?></a>
                        <?php if (!empty($hero_asset['related_manuscript_url'])) : ?>
                            <a class="spiralist-button spiralist-button--secondary" href="<?php echo esc_url((string) $hero_asset['related_manuscript_url']); ?>"><?php echo esc_html($ui_text('page.gallery.cta.manuscript_route', 'Manuscript Route')); ?></a>
                        <?php endif; ?>
                    </div>
                </article>
            </div>
        </section>
    <?php endif; ?>

    <?php if ($detail_mode && !empty($requested_asset)) : ?>
        <?php
        $requested_sources = function_exists('spiralist_get_public_image_asset_source_urls')
            ? spiralist_get_public_image_asset_source_urls($requested_asset, true)
            : [];
        $requested_preview_url = (string) ($requested_sources['large_url'] ?? ($requested_asset['url'] ?? ''));
        $requested_upgrade_url = (string) ($requested_sources['interactive_url'] ?? ($requested_sources['original_url'] ?? $requested_preview_url));
        ?>
        <section class="spiralist-page-section">
            <div class="spiralist-shell spiralist-gallery-detail">
                <figure class="spiralist-gallery-detail__figure">
                    <div class="spiralist-gallery-detail__frame">
                        <img
                            src="<?php echo esc_url($requested_preview_url); ?>"
                            alt="<?php echo esc_attr((string) ($requested_asset['title'] ?? $ui_text('page.gallery.card.alt', 'Image page'))); ?>"
                            loading="eager"
                            decoding="async"
                            fetchpriority="high"
                            data-progressive-effect="soft"
                            data-progressive-trigger="load"
                            <?php if ($requested_upgrade_url !== '' && $requested_upgrade_url !== $requested_preview_url) : ?>data-progressive-src="<?php echo esc_url($requested_upgrade_url); ?>"<?php endif; ?>
                            <?php if (!empty($requested_asset['width'])) : ?>width="<?php echo esc_attr((string) $requested_asset['width']); ?>"<?php endif; ?>
                            <?php if (!empty($requested_asset['height'])) : ?>height="<?php echo esc_attr((string) $requested_asset['height']); ?>"<?php endif; ?>
                        />
                    </div>
                </figure>
                <details class="spiralist-gallery-detail__meta spiralist-details-card" id="image-dossier">
                    <summary class="spiralist-details-card__summary">
                        <span class="spiralist-section-tag"><?php echo esc_html($ui_text('page.gallery.dossier.tag', 'Book Dossier')); ?></span>
                        <span class="spiralist-section-title"><?php echo esc_html($ui_text('page.gallery.dossier.title', 'Image page details.')); ?></span>
                        <span class="spiralist-status-pill <?php echo esc_attr($current_prompt_status_class); ?>"><?php echo esc_html((string) ($current_creation_prompt['status'] ?? $ui_text('page.gallery.prompt.pending', 'Prompt pending'))); ?></span>
                        <span class="spiralist-muted"><?php echo esc_html($ui_text('page.gallery.dossier.summary', 'Open metadata, table of contents, and prompt links for this image page.')); ?></span>
                    </summary>
                    <div class="spiralist-book-page-dossier spiralist-details-card__body">
                        <div class="spiralist-tabs spiralist-book-page-tabs" data-tab-group>
                            <div class="spiralist-tab-list" role="toolbar" aria-label="<?php echo esc_attr($ui_text('page.gallery.tabs.aria_label', 'Book page dossier tabs')); ?>">
                                <button class="spiralist-tab is-active" type="button" data-tab-trigger="overview" aria-pressed="true"><?php echo esc_html($ui_text('page.gallery.tabs.overview', 'Overview')); ?></button>
                                <button class="spiralist-tab" type="button" data-tab-trigger="contents" aria-pressed="false"><?php echo esc_html($ui_text('page.gallery.tabs.contents', 'Table of Contents')); ?></button>