259 lines
12 KiB
PHP
259 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 (content before first H2) -->
|
|
<?php if (!empty($parsed_content['intro'])):
|
|
// Generate TOC for intro section
|
|
$toc_items = igny8_generate_table_of_contents($content);
|
|
$min_headings = get_option('igny8_toc_min_headings', 3);
|
|
$show_toc = count($toc_items) >= $min_headings;
|
|
?>
|
|
<section class="igny8-intro-section">
|
|
<div class="igny8-intro-layout">
|
|
<?php if ($show_toc): ?>
|
|
<nav class="igny8-intro-toc">
|
|
<div class="igny8-toc-header">
|
|
<svg class="igny8-toc-icon" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"/>
|
|
</svg>
|
|
<h3>Table of Contents</h3>
|
|
</div>
|
|
<ol class="igny8-toc-list">
|
|
<?php foreach ($toc_items as $item): ?>
|
|
<li class="igny8-toc-item">
|
|
<a href="#<?php echo esc_attr($item['id']); ?>" class="igny8-toc-link">
|
|
<span class="igny8-toc-number"><?php echo $item['number']; ?></span>
|
|
<span class="igny8-toc-text"><?php echo esc_html($item['text']); ?></span>
|
|
</a>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ol>
|
|
</nav>
|
|
<?php endif; ?>
|
|
<div class="igny8-intro-content">
|
|
<?php echo $parsed_content['intro']; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<?php endif; ?>
|
|
|
|
<!-- H2 Sections with Images -->
|
|
<?php if (!empty($parsed_content['sections'])): ?>
|
|
<?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 badge (only 1, no repeats)
|
|
$badges = igny8_get_section_badges($section['heading'], get_the_ID());
|
|
if (!empty($badges) && isset($badges[0])): ?>
|
|
<div class="igny8-section-badges">
|
|
<span class="igny8-section-badge igny8-section-badge-primary">
|
|
<?php echo esc_html($badges[0]['text']); ?>
|
|
</span>
|
|
</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_prompt = '';
|
|
$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_prompt = isset($img_data['prompt']) ? $img_data['prompt'] : '';
|
|
} elseif (isset($img_data['url'])) {
|
|
$img_url = $img_data['url'];
|
|
$img_prompt = isset($img_data['prompt']) ? $img_data['prompt'] : '';
|
|
}
|
|
}
|
|
}
|
|
// 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 igny8-image-card">
|
|
<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_prompt): ?>
|
|
<figcaption class="igny8-image-caption">
|
|
<?php echo esc_html($img_prompt); ?>
|
|
</figcaption>
|
|
<?php endif; ?>
|
|
</figure>
|
|
<div class="igny8-prose">
|
|
<?php echo $section['content']; ?>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
// Square image (left or right aligned)
|
|
elseif ($img_url && $img_type === 'square') {
|
|
$img_class = 'igny8-image-square-' . $img_align;
|
|
if (!$show_description) {
|
|
$img_class .= ' igny8-image-reuse';
|
|
}
|
|
?>
|
|
<div class="igny8-section-content">
|
|
<figure class="igny8-image-figure <?php echo esc_attr($img_class); ?>">
|
|
<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_prompt): ?>
|
|
<figcaption class="igny8-image-caption">
|
|
<?php echo esc_html($img_prompt); ?>
|
|
</figcaption>
|
|
<?php endif; ?>
|
|
</figure>
|
|
<?php
|
|
// Render TOC in section 1 after image
|
|
if ($index === 0) {
|
|
include plugin_dir_path(dirname(__FILE__)) . 'igny8-table-of-contents.php';
|
|
}
|
|
?>
|
|
<div class="igny8-prose">
|
|
<?php echo $section['content']; ?>
|
|
</div>
|
|
<?php
|
|
// Widget placeholder below square images
|
|
igny8_render_widget_placeholder($img_align, $index);
|
|
?>
|
|
</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-card">
|
|
<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_prompt): ?>
|
|
<figcaption class="igny8-image-caption">
|
|
<?php echo esc_html($img_prompt); ?>
|
|
</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>
|