Image genartiona dn temaplte design redesign
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,7 +1,14 @@
|
||||
<?php
|
||||
/**
|
||||
* IGNY8 Content Sections
|
||||
* Parses content HTML and displays sections with in-article images
|
||||
* 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
|
||||
*/
|
||||
@@ -10,6 +17,17 @@
|
||||
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">
|
||||
@@ -33,72 +51,168 @@ if (!defined('ABSPATH')) {
|
||||
<div class="igny8-section-header">
|
||||
<span class="igny8-section-number"><?php echo $index + 1; ?></span>
|
||||
<div class="igny8-section-heading-wrapper">
|
||||
<span class="igny8-section-label">Section Spotlight</span>
|
||||
<?php
|
||||
// Get section badges based on keyword/tag matching
|
||||
$badges = igny8_get_section_badges($section['heading'], get_the_ID());
|
||||
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
|
||||
// Get image for this section (position = section index + 1)
|
||||
$section_position = $index + 1;
|
||||
|
||||
// Try multiple sources for in-article images
|
||||
// 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);
|
||||
|
||||
// Source 1: From $in_article_images array
|
||||
if (isset($in_article_images[$section_position])) {
|
||||
$img_data = $in_article_images[$section_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'] : '';
|
||||
}
|
||||
}
|
||||
|
||||
// Source 2: Check gallery images meta
|
||||
if (!$img_url) {
|
||||
$gallery = get_post_meta(get_the_ID(), '_igny8_gallery_images', true);
|
||||
if ($gallery && is_array($gallery) && isset($gallery[$index])) {
|
||||
$img_url = wp_get_attachment_image_url($gallery[$index], 'large');
|
||||
}
|
||||
}
|
||||
|
||||
$has_image = !empty($img_url);
|
||||
?>
|
||||
|
||||
<div class="igny8-section-content<?php echo $has_image ? ' igny8-has-image' : ''; ?>">
|
||||
<div class="igny8-section-text">
|
||||
<div class="igny8-prose">
|
||||
<?php echo $section['content']; ?>
|
||||
</div>
|
||||
</div>
|
||||
// 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'];
|
||||
|
||||
<?php if ($has_image):
|
||||
$img_alt = '';
|
||||
if (isset($in_article_images[$img_position])) {
|
||||
$img_data = $in_article_images[$img_position];
|
||||
if (isset($img_data['attachment_id'])) {
|
||||
$img_alt = get_post_meta($img_data['attachment_id'], '_wp_attachment_image_alt', true);
|
||||
$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-image">
|
||||
<div class="igny8-section-content">
|
||||
<figure class="igny8-image-figure">
|
||||
<img src="<?php echo esc_url($img_url); ?>"
|
||||
alt="<?php echo esc_attr($img_alt ?: $section['heading']); ?>"
|
||||
class="igny8-in-article-image"
|
||||
alt="<?php echo esc_attr($section['heading']); ?>"
|
||||
class="<?php echo esc_attr($img_class); ?>"
|
||||
loading="lazy">
|
||||
<?php if ($img_prompt): ?>
|
||||
<?php if ($show_description && $img_prompt): ?>
|
||||
<figcaption class="igny8-image-caption">
|
||||
<p class="igny8-caption-label">Visual Direction</p>
|
||||
<p class="igny8-caption-text"><?php echo esc_html($img_prompt); ?></p>
|
||||
</figcaption>
|
||||
<?php endif; ?>
|
||||
</figure>
|
||||
<div class="igny8-prose">
|
||||
<?php echo $section['content']; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</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">
|
||||
<p class="igny8-caption-label">Visual Direction</p>
|
||||
<p class="igny8-caption-text"><?php echo esc_html($img_prompt); ?></p>
|
||||
</figcaption>
|
||||
<?php endif; ?>
|
||||
</figure>
|
||||
<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">
|
||||
<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">
|
||||
<p class="igny8-caption-label">Visual Direction</p>
|
||||
<p class="igny8-caption-text"><?php echo esc_html($img_prompt); ?></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>
|
||||
|
||||
Reference in New Issue
Block a user