250 lines
12 KiB
PHP
250 lines
12 KiB
PHP
<?php
|
|
/**
|
|
* IGNY8 Content Sections
|
|
* Parses content HTML and displays sections with smart image distribution
|
|
*
|
|
* Pattern for first 4 sections:
|
|
* - Section 1: Square image right-aligned (50%) WITH description
|
|
* - Section 2: Landscape image full-width (1024px) WITH description
|
|
* - Section 3: Square image left-aligned (50%) WITH description
|
|
* - Section 4: Landscape image full-width (1024px) WITH description
|
|
* - Sections 5+: Reuse images WITHOUT descriptions
|
|
*
|
|
* @package Igny8Bridge
|
|
*/
|
|
|
|
// Exit if accessed directly
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
// Image distribution mapping
|
|
$image_distribution = [
|
|
0 => ['position' => 0, 'type' => 'square', 'align' => 'right'], // Section 1
|
|
1 => ['position' => 3, 'type' => 'landscape', 'align' => 'full'], // Section 2
|
|
2 => ['position' => 2, 'type' => 'square', 'align' => 'left'], // Section 3
|
|
3 => ['position' => 1, 'type' => 'landscape', 'align' => 'full'], // Section 4
|
|
];
|
|
|
|
// Reuse pattern for sections 5+
|
|
$reuse_pattern = [1, 0, 3, 2]; // Featured, Square1, Landscape2, Square2
|
|
?>
|
|
|
|
<div class="igny8-content-body">
|
|
|
|
<!-- Introduction with Table of Contents -->
|
|
<?php if (!empty($parsed_content['intro'])): ?>
|
|
<section class="igny8-intro-section">
|
|
<div class="igny8-intro-grid">
|
|
<?php if (!empty($parsed_content['sections'])): ?>
|
|
<nav class="igny8-table-of-contents igny8-toc-inline">
|
|
<div class="igny8-toc-header">
|
|
<svg class="igny8-toc-icon" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"/>
|
|
</svg>
|
|
<h3>Contents</h3>
|
|
</div>
|
|
<ol class="igny8-toc-list">
|
|
<?php foreach ($parsed_content['sections'] as $toc_index => $toc_section): ?>
|
|
<li>
|
|
<a href="#<?php echo esc_attr($toc_section['id']); ?>" class="igny8-toc-link">
|
|
<span class="igny8-toc-number"><?php echo $toc_index + 1; ?></span>
|
|
<span class="igny8-toc-text"><?php echo esc_html($toc_section['heading']); ?></span>
|
|
</a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ol>
|
|
</nav>
|
|
<?php endif; ?>
|
|
<div class="igny8-prose igny8-intro-content">
|
|
<?php echo $parsed_content['intro']; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
<!-- H2 Sections with Images -->
|
|
<?php if (!empty($parsed_content['sections'])):
|
|
// Track used keywords to avoid repeating badges
|
|
$used_keywords = [];
|
|
?>
|
|
<?php foreach ($parsed_content['sections'] as $index => $section): ?>
|
|
<section class="igny8-content-section" id="<?php echo esc_attr($section['id']); ?>">
|
|
<div class="igny8-section-container">
|
|
|
|
<div class="igny8-section-header">
|
|
<span class="igny8-section-number"><?php echo $index + 1; ?></span>
|
|
<div class="igny8-section-heading-wrapper">
|
|
<?php
|
|
// Get section badges based on keyword/tag matching (pass used_keywords by reference)
|
|
$badges = igny8_get_section_badges($section['heading'], get_the_ID(), $used_keywords);
|
|
if (!empty($badges)): ?>
|
|
<div class="igny8-section-badges">
|
|
<?php foreach ($badges as $badge_index => $badge): ?>
|
|
<span class="igny8-section-badge <?php echo $badge_index === 0 ? 'igny8-section-badge-primary' : 'igny8-section-badge-secondary'; ?>">
|
|
<?php echo esc_html($badge['text']); ?>
|
|
</span>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
<h2 class="igny8-section-heading"><?php echo esc_html($section['heading']); ?></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<?php
|
|
// Determine which image to use
|
|
$img_data = null;
|
|
$img_url = null;
|
|
$img_caption = '';
|
|
$img_align = 'full';
|
|
$img_type = 'landscape';
|
|
$show_description = igny8_show_image_description($index);
|
|
|
|
// First 4 sections: use distribution pattern
|
|
if ($index < 4 && isset($image_distribution[$index])) {
|
|
$dist = $image_distribution[$index];
|
|
$img_position = $dist['position'];
|
|
$img_type = $dist['type'];
|
|
$img_align = $dist['align'];
|
|
|
|
if (isset($in_article_images[$img_position])) {
|
|
$img_data = $in_article_images[$img_position];
|
|
if (isset($img_data['attachment_id'])) {
|
|
$img_url = wp_get_attachment_image_url($img_data['attachment_id'], 'large');
|
|
$img_caption = isset($img_data['caption']) ? $img_data['caption'] : '';
|
|
} elseif (isset($img_data['url'])) {
|
|
$img_url = $img_data['url'];
|
|
$img_caption = isset($img_data['caption']) ? $img_data['caption'] : '';
|
|
}
|
|
}
|
|
}
|
|
// Sections 5+: reuse images without descriptions
|
|
elseif ($index >= 4) {
|
|
$reuse_index = ($index - 4) % count($reuse_pattern);
|
|
$img_position = $reuse_pattern[$reuse_index];
|
|
|
|
// Position 1 is featured image, others are in-article
|
|
if ($img_position === 1 && $featured_image_id) {
|
|
$img_url = wp_get_attachment_image_url($featured_image_id, 'large');
|
|
$img_type = 'landscape';
|
|
$img_align = 'full';
|
|
} elseif (isset($in_article_images[$img_position])) {
|
|
$img_data = $in_article_images[$img_position];
|
|
if (isset($img_data['attachment_id'])) {
|
|
$img_url = wp_get_attachment_image_url($img_data['attachment_id'], 'large');
|
|
} elseif (isset($img_data['url'])) {
|
|
$img_url = $img_data['url'];
|
|
}
|
|
$img_type = igny8_get_image_aspect($img_position);
|
|
$img_align = ($img_type === 'square') ? (($reuse_index % 2 === 0) ? 'right' : 'left') : 'full';
|
|
}
|
|
}
|
|
|
|
// Check if section has table
|
|
$has_table = igny8_section_has_table($section['content']);
|
|
if ($has_table && $img_url) {
|
|
// Place full-width image before table
|
|
$img_type = 'landscape';
|
|
$img_align = 'full';
|
|
$img_class = 'igny8-image-landscape igny8-image-before-table';
|
|
if (!$show_description) {
|
|
$img_class .= ' igny8-image-reuse';
|
|
}
|
|
?>
|
|
<div class="igny8-section-content">
|
|
<figure class="igny8-image-figure">
|
|
<img src="<?php echo esc_url($img_url); ?>"
|
|
alt="<?php echo esc_attr($section['heading']); ?>"
|
|
class="<?php echo esc_attr($img_class); ?>"
|
|
loading="lazy">
|
|
<?php if ($show_description && $img_caption): ?>
|
|
<figcaption class="igny8-image-caption">
|
|
<p class="igny8-caption-text"><?php echo esc_html($img_caption); ?></p>
|
|
</figcaption>
|
|
<?php endif; ?>
|
|
</figure>
|
|
<div class="igny8-prose">
|
|
<?php echo $section['content']; ?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
// Square image (left or right aligned) - 2 column layout
|
|
elseif ($img_url && $img_type === 'square') {
|
|
$img_class = 'igny8-image-square-' . $img_align;
|
|
if (!$show_description) {
|
|
$img_class .= ' igny8-image-reuse';
|
|
}
|
|
$section_class = 'igny8-section-content igny8-has-square-image igny8-image-' . $img_align;
|
|
?>
|
|
<div class="<?php echo esc_attr($section_class); ?>">
|
|
<figure class="igny8-image-figure">
|
|
<img src="<?php echo esc_url($img_url); ?>"
|
|
alt="<?php echo esc_attr($section['heading']); ?>"
|
|
class="igny8-in-article-image"
|
|
loading="lazy">
|
|
<?php if ($show_description && $img_caption): ?>
|
|
<figcaption class="igny8-image-caption">
|
|
<p class="igny8-caption-text"><?php echo esc_html($img_caption); ?></p>
|
|
</figcaption>
|
|
<?php endif; ?>
|
|
</figure>
|
|
<div class="igny8-prose">
|
|
<?php echo $section['content']; ?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
// Landscape image (full width)
|
|
elseif ($img_url && $img_type === 'landscape') {
|
|
$img_class = 'igny8-image-landscape';
|
|
if (!$show_description) {
|
|
$img_class .= ' igny8-image-reuse';
|
|
}
|
|
?>
|
|
<div class="igny8-section-content">
|
|
<figure class="igny8-image-figure igny8-image-landscape-figure">
|
|
<img src="<?php echo esc_url($img_url); ?>"
|
|
alt="<?php echo esc_attr($section['heading']); ?>"
|
|
class="<?php echo esc_attr($img_class); ?>"
|
|
loading="lazy">
|
|
<?php if ($show_description && $img_caption): ?>
|
|
<figcaption class="igny8-image-caption">
|
|
<p class="igny8-caption-text"><?php echo esc_html($img_caption); ?></p>
|
|
</figcaption>
|
|
<?php endif; ?>
|
|
</figure>
|
|
<div class="igny8-prose">
|
|
<?php echo $section['content']; ?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
// No image
|
|
else {
|
|
?>
|
|
<div class="igny8-section-content">
|
|
<div class="igny8-prose">
|
|
<?php echo $section['content']; ?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
</div>
|
|
</section>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
|
|
<!-- Fallback: If no sections parsed, show content as-is -->
|
|
<?php if (empty($parsed_content['intro']) && empty($parsed_content['sections'])): ?>
|
|
<section class="igny8-content-fallback">
|
|
<div class="igny8-prose">
|
|
<?php echo $content; ?>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
</div>
|