Image genartiona dn temaplte design redesign

2026-01-10 03:58:02 +00:00
parent ce66dadc00
commit 0c693dc1cc
18 changed files with 1717 additions and 214 deletions
--- a/plugins/wordpress/source/igny8-wp-bridge/igny8-bridge.php
+++ b/plugins/wordpress/source/igny8-wp-bridge/igny8-bridge.php
@@ -3,7 +3,7 @@
 * Plugin Name: IGNY8 WordPress Bridge
 * Plugin URI: https://igny8.com/igny8-wp-bridge
 * Description: Lightweight bridge plugin that connects WordPress to IGNY8 API for one-way content publishing.
- * Version: 1.2.5
+ * Version: 1.2.6
 * Author: IGNY8
 * Author URI: https://igny8.com/
 * License: GPL v2 or later
@@ -22,7 +22,7 @@ if (!defined('ABSPATH')) {
 }

 // Define plugin constants
-define('IGNY8_BRIDGE_VERSION', '1.2.5');
+define('IGNY8_BRIDGE_VERSION', '1.2.6');
 define('IGNY8_BRIDGE_PLUGIN_DIR', plugin_dir_path(__FILE__));
 define('IGNY8_BRIDGE_PLUGIN_URL', plugin_dir_url(__FILE__));
 define('IGNY8_BRIDGE_PLUGIN_FILE', __FILE__);
--- a/plugins/wordpress/source/igny8-wp-bridge/includes/template-functions.php
+++ b/plugins/wordpress/source/igny8-wp-bridge/includes/template-functions.php
@@ -199,3 +199,156 @@ function igny8_parse_keywords($keywords) {
    // Remove empty values
    return array_filter($keywords_array);
 }
+
+/**
+ * Get section badges based on keyword/tag matching
+ *
+ * @param string $heading Section heading text
+ * @param int $post_id Post ID
+ * @return array Array of badges with 'text' and 'type' keys
+ */
+function igny8_get_section_badges($heading, $post_id) {
+    $badges = [];
+    $heading_lower = strtolower($heading);
+    
+    // Get post taxonomies and keywords
+    $tags = get_the_tags($post_id);
+    $categories = get_the_category($post_id);
+    $primary_kw = get_post_meta($post_id, '_igny8_primary_keyword', true);
+    $secondary_kws = get_post_meta($post_id, '_igny8_secondary_keywords', true);
+    
+    // Priority 1: Primary keyword
+    if ($primary_kw && stripos($heading_lower, strtolower($primary_kw)) !== false) {
+        $badges[] = ['text' => $primary_kw, 'type' => 'primary'];
+    }
+    
+    // Priority 2: Tags
+    if ($tags && !is_wp_error($tags) && count($badges) < 2) {
+        foreach ($tags as $tag) {
+            if (stripos($heading_lower, strtolower($tag->name)) !== false) {
+                $badges[] = ['text' => $tag->name, 'type' => 'tag'];
+                if (count($badges) >= 2) break;
+            }
+        }
+    }
+    
+    // Priority 3: Categories
+    if ($categories && !is_wp_error($categories) && count($badges) < 2) {
+        foreach ($categories as $cat) {
+            if (stripos($heading_lower, strtolower($cat->name)) !== false) {
+                $badges[] = ['text' => $cat->name, 'type' => 'category'];
+                if (count($badges) >= 2) break;
+            }
+        }
+    }
+    
+    // Priority 4: Secondary keywords
+    if ($secondary_kws && count($badges) < 2) {
+        $kw_array = is_array($secondary_kws) ? $secondary_kws : explode(',', $secondary_kws);
+        foreach ($kw_array as $kw) {
+            $kw = trim($kw);
+            if (!empty($kw) && stripos($heading_lower, strtolower($kw)) !== false) {
+                $badges[] = ['text' => $kw, 'type' => 'keyword'];
+                if (count($badges) >= 2) break;
+            }
+        }
+    }
+    
+    return $badges;
+}
+
+/**
+ * Check if section content contains a table
+ *
+ * @param string $section_html Section HTML content
+ * @return bool True if contains table
+ */
+function igny8_section_has_table($section_html) {
+    return (stripos($section_html, '<table') !== false);
+}
+
+/**
+ * Get image aspect ratio from position
+ *
+ * @param int $position Image position (0-3)
+ * @return string 'square' or 'landscape'
+ */
+function igny8_get_image_aspect($position) {
+    // Even positions (0, 2) = square
+    // Odd positions (1, 3) = landscape
+    return ($position % 2 === 0) ? 'square' : 'landscape';
+}
+
+/**
+ * Determine if image description should be shown
+ *
+ * @param int $section_index Section index (0-based)
+ * @return bool True if should show description
+ */
+function igny8_show_image_description($section_index) {
+    // First 4 sections (0-3) show descriptions
+    return ($section_index < 4);
+}
+
+/**
+ * Generate table of contents from content
+ *
+ * @param string $content HTML content
+ * @return array Array of TOC items with 'number', 'text', and 'id' keys
+ */
+function igny8_generate_table_of_contents($content) {
+    $toc_items = [];
+    
+    // Parse content for H2 headings
+    preg_match_all('/<h2[^>]*>(.*?)<\/h2>/i', $content, $matches);
+    
+    if (!empty($matches[1])) {
+        foreach ($matches[1] as $index => $heading) {
+            $heading_text = strip_tags($heading);
+            $slug = sanitize_title($heading_text);
+            $toc_items[] = [
+                'number' => $index + 1,
+                'text' => $heading_text,
+                'id' => $slug
+            ];
+        }
+    }
+    
+    return $toc_items;
+}
+
+/**
+ * Render widget placeholder
+ *
+ * @param string $position 'left' or 'right'
+ * @param int $section_index Section index
+ * @return void
+ */
+function igny8_render_widget_placeholder($position, $section_index) {
+    // Check if widgets are enabled in settings
+    $widgets_enabled = get_option('igny8_widgets_enabled', false);
+    
+    if (!$widgets_enabled) {
+        return;
+    }
+    
+    $placeholder_class = 'igny8-widget-placeholder igny8-widgets-enabled';
+    $placeholder_class .= ' igny8-widget-' . $position;
+    $placeholder_class .= ' igny8-widget-section-' . $section_index;
+    
+    ?>
+    <div class="<?php echo esc_attr($placeholder_class); ?>" 
+         data-widget-position="<?php echo esc_attr($position); ?>"
+         data-section-index="<?php echo esc_attr($section_index); ?>">
+        <?php
+        /**
+         * Action hook for widget placeholder content
+         *
+         * @param string $position Widget position (left/right)
+         * @param int $section_index Section index
+         */
+        do_action('igny8_widget_placeholder', $position, $section_index);
+        ?>
+    </div>
+    <?php
+}
--- a/plugins/wordpress/source/igny8-wp-bridge/templates/assets/css/igny8-content-template.css
+++ b/plugins/wordpress/source/igny8-wp-bridge/templates/assets/css/igny8-content-template.css
@@ -11,12 +11,19 @@

 /* === CSS Variables === */
 :root {
-    --igny8-max-width: 1200px;
+    --igny8-max-width: 1280px;
    --igny8-spacing: 2rem;
    --igny8-border-radius: 24px;
    --igny8-border-radius-md: 16px;
    --igny8-border-radius-sm: 12px;
    --igny8-border-radius-xs: 8px;
+    --igny8-theme-color: rgba(59, 130, 246, 1);
+}
+
+@media (min-width: 1600px) {
+    :root {
+        --igny8-max-width: 1530px;
+    }
 }

 /* === Main Wrapper === */
@@ -255,8 +262,10 @@

 .igny8-featured-image {
    width: 100%;
+    max-width: 1024px;
    height: auto;
    display: block;
+    margin: 0 auto;
 }

 .igny8-image-prompt {
@@ -498,6 +507,59 @@
    display: block;
 }

+/* Landscape images */
+.igny8-image-landscape {
+    max-width: 1024px;
+    width: 100%;
+    margin: 0 auto 2rem;
+    display: block;
+}
+
+.igny8-image-landscape.igny8-image-reuse .igny8-image-caption {
+    display: none;
+}
+
+/* Square image - Right aligned */
+.igny8-image-square-right {
+    max-width: 50%;
+    float: right;
+    margin-left: 2rem;
+    margin-bottom: 2rem;
+}
+
+/* Square image - Left aligned */
+.igny8-image-square-left {
+    max-width: 50%;
+    float: left;
+    margin-right: 2rem;
+    margin-bottom: 2rem;
+}
+
+/* Table-specific image positioning */
+.igny8-image-before-table {
+    max-width: 1024px;
+    width: 100%;
+    margin: 0 auto 2rem;
+    display: block;
+    clear: both;
+}
+
+/* Widget placeholder */
+.igny8-widget-placeholder {
+    clear: both;
+    min-height: 200px;
+    padding: 1.5rem;
+    margin-top: 1rem;
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px dashed rgba(0, 0, 0, 0.1);
+    border-radius: var(--igny8-border-radius-sm);
+    display: none;
+}
+
+.igny8-widget-placeholder.igny8-widgets-enabled {
+    display: block;
+}
+
 .igny8-image-caption {
    padding: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
@@ -604,6 +666,120 @@
    line-height: 1.4;
 }

+/* === Table of Contents === */
+.igny8-table-of-contents {
+    background: var(--wp--preset--color--base, #ffffff);
+    border: 2px solid rgba(0, 0, 0, 0.12);
+    border-radius: var(--igny8-border-radius-md);
+    padding: 1.5rem 2rem;
+    margin-bottom: var(--igny8-spacing);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.igny8-toc-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.igny8-toc-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--igny8-theme-color);
+    opacity: 0.8;
+}
+
+.igny8-toc-header h3 {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: inherit;
+}
+
+.igny8-toc-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.igny8-toc-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    text-decoration: none;
+    color: inherit;
+    border-radius: var(--igny8-border-radius-xs);
+    transition: background-color 0.2s ease;
+}
+
+.igny8-toc-link:hover {
+    background: rgba(0, 0, 0, 0.04);
+}
+
+.igny8-toc-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    background: rgba(59, 130, 246, 0.1);
+    color: rgba(59, 130, 246, 1);
+    border-radius: 50%;
+    font-size: 0.75rem;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.igny8-toc-text {
+    flex: 1;
+    font-size: 0.9375rem;
+}
+
+/* === Section Badges === */
+.igny8-section-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.igny8-section-badge {
+    display: inline-block;
+    padding: 0.375rem 0.875rem;
+    border-radius: var(--igny8-border-radius-xs);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.igny8-section-badge-primary {
+    background: rgba(59, 130, 246, 0.15);
+    color: rgba(59, 130, 246, 1);
+}
+
+.igny8-section-badge-secondary {
+    background: rgba(59, 130, 246, 0.08);
+    color: rgba(59, 130, 246, 0.8);
+}
+
+/* === SVG Icon Styles === */
+.igny8-icon {
+    width: 1rem;
+    height: 1rem;
+    color: var(--igny8-theme-color, currentColor);
+    opacity: 0.8;
+    display: inline-block;
+    vertical-align: middle;
+}
+
 /* === Responsive Styles === */
@media (max-width: 768px) {
    :root {
--- a/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-content-sections.php
+++ b/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-content-sections.php
@@ -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>
--- a/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-featured-image.php
+++ b/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-featured-image.php
@@ -27,7 +27,8 @@ if (!$image_url) {
    <div class="igny8-featured-image-wrapper">
        <img src="<?php echo esc_url($image_url); ?>" 
             alt="<?php echo esc_attr($image_alt ?: get_the_title()); ?>"
-             class="igny8-featured-image"
+             class="igny8-featured-image igny8-image-landscape"
+             style="max-width: 1024px;"
             loading="lazy">
    </div>
    
--- a/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-header.php
+++ b/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-header.php
@@ -36,7 +36,9 @@ $status_class = igny8_get_status_class($status);
    <div class="igny8-metadata-row">
        <!-- Created Date -->
        <div class="igny8-meta-item">
-            <span class="igny8-meta-icon">📅</span>
+            <svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
+            </svg>
            <span class="igny8-meta-label">Posted:</span>
            <span class="igny8-meta-value"><?php echo get_the_date(); ?></span>
        </div>
@@ -44,7 +46,9 @@ $status_class = igny8_get_status_class($status);
        <!-- Word Count -->
        <?php if ($word_count > 0): ?>
        <div class="igny8-meta-item">
-            <span class="igny8-meta-icon">📝</span>
+            <svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"/>
+            </svg>
            <span class="igny8-meta-label">Words:</span>
            <span class="igny8-meta-value"><?php echo number_format($word_count); ?></span>
        </div>
@@ -52,15 +56,30 @@ $status_class = igny8_get_status_class($status);
        
        <!-- Author -->
        <div class="igny8-meta-item">
-            <span class="igny8-meta-icon">✍️</span>
+            <svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"/>
+            </svg>
            <span class="igny8-meta-label">Author:</span>
            <span class="igny8-meta-value"><?php the_author(); ?></span>
        </div>
        
+        <!-- Topic (Cluster Name) -->
+        <?php if ($cluster_name): ?>
+        <div class="igny8-meta-item">
+            <svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"/>
+            </svg>
+            <span class="igny8-meta-label">Topic:</span>
+            <span class="igny8-meta-value"><?php echo esc_html($cluster_name); ?></span>
+        </div>
+        <?php endif; ?>
+        
        <!-- Categories -->
        <?php if ($categories && !is_wp_error($categories)): ?>
        <div class="igny8-meta-item">
-            <span class="igny8-meta-icon">📁</span>
+            <svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
+            </svg>
            <span class="igny8-meta-label">Categories:</span>
            <div class="igny8-meta-badges">
                <?php foreach ($categories as $cat): ?>
@@ -73,7 +92,9 @@ $status_class = igny8_get_status_class($status);
        <!-- Tags -->
        <?php if ($tags && !is_wp_error($tags)): ?>
        <div class="igny8-meta-item">
-            <span class="igny8-meta-icon">🏷️</span>
+            <svg class="igny8-icon" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z"/>
+            </svg>
            <span class="igny8-meta-label">Tags:</span>
            <div class="igny8-meta-badges">
                <?php foreach ($tags as $tag): ?>
@@ -83,69 +104,4 @@ $status_class = igny8_get_status_class($status);
        </div>
        <?php endif; ?>
    </div>
-    
-    <!-- SEO Metadata Section -->
-    <?php if (($meta_title && $meta_title !== get_the_title()) || $meta_description): ?>
-    <div class="igny8-seo-section">
-        <div class="igny8-seo-header">SEO Metadata</div>
-        
-        <?php if ($meta_title && $meta_title !== get_the_title()): ?>
-        <div class="igny8-seo-item">
-            <label class="igny8-seo-label">SEO Title:</label>
-            <div class="igny8-seo-value"><?php echo esc_html($meta_title); ?></div>
-        </div>
-        <?php endif; ?>
-        
-        <?php if ($meta_description): ?>
-        <div class="igny8-seo-item">
-            <label class="igny8-seo-label">Meta Description:</label>
-            <div class="igny8-seo-value"><?php echo esc_html($meta_description); ?></div>
-        </div>
-        <?php endif; ?>
-    </div>
-    <?php endif; ?>
-    
-    <!-- IGNY8 Content Info -->
-    <?php if ($cluster_name || $primary_keyword || $content_type): ?>
-    <div class="igny8-info-section">
-        <div class="igny8-info-header">Content Information</div>
-        <div class="igny8-info-grid">
-            
-            <?php if ($content_type): ?>
-            <div class="igny8-info-item">
-                <label>Type:</label>
-                <span><?php echo esc_html(ucfirst($content_type)); ?></span>
-            </div>
-            <?php endif; ?>
-            
-            <?php if ($structure): ?>
-            <div class="igny8-info-item">
-                <label>Structure:</label>
-                <span><?php echo esc_html(ucfirst($structure)); ?></span>
-            </div>
-            <?php endif; ?>
-            
-            <?php if ($cluster_name): ?>
-            <div class="igny8-info-item">
-                <label>Cluster:</label>
-                <span><?php echo esc_html($cluster_name); ?></span>
-            </div>
-            <?php endif; ?>
-            
-            <?php if ($primary_keyword): ?>
-            <div class="igny8-info-item">
-                <label>Primary Keyword:</label>
-                <span><?php echo esc_html($primary_keyword); ?></span>
-            </div>
-            <?php endif; ?>
-            
-            <?php if ($source): ?>
-            <div class="igny8-info-item">
-                <label>Source:</label>
-                <span><?php echo esc_html(ucfirst($source)); ?></span>
-            </div>
-            <?php endif; ?>
-        </div>
-    </div>
-    <?php endif; ?>
 </div>
--- a/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-metadata.php
+++ b/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-metadata.php
@@ -2,6 +2,7 @@
 /**
 * IGNY8 Metadata Footer
 * Shows IGNY8-specific metadata in collapsible format
+ * Visible only to users with edit_posts capability (Editor, Administrator, Author for own posts)
 *
 * @package Igny8Bridge
 */
@@ -11,8 +12,8 @@ if (!defined('ABSPATH')) {
    exit;
 }

-// Only show if we have IGNY8 content ID
-if (!$content_id) {
+// Only show if we have IGNY8 content ID and user has edit permissions
+if (!$content_id || !current_user_can('edit_posts')) {
    return;
 }
 ?>
@@ -53,6 +54,12 @@ if (!$content_id) {
                        <td><?php echo esc_html(ucfirst($source)); ?></td>
                    </tr>
                    <?php endif; ?>
+                    <?php if ($cluster_name): ?>
+                    <tr>
+                        <th>Cluster Name:</th>
+                        <td><?php echo esc_html($cluster_name); ?></td>
+                    </tr>
+                    <?php endif; ?>
                    <?php if ($cluster_id): ?>
                    <tr>
                        <th>Cluster ID:</th>
@@ -65,6 +72,24 @@ if (!$content_id) {
                        <td><?php echo esc_html($sector_id); ?></td>
                    </tr>
                    <?php endif; ?>
+                    <?php if ($meta_title): ?>
+                    <tr>
+                        <th>Meta Title:</th>
+                        <td><?php echo esc_html($meta_title); ?></td>
+                    </tr>
+                    <?php endif; ?>
+                    <?php if ($meta_description): ?>
+                    <tr>
+                        <th>Meta Description:</th>
+                        <td><?php echo esc_html($meta_description); ?></td>
+                    </tr>
+                    <?php endif; ?>
+                    <?php if ($primary_keyword): ?>
+                    <tr>
+                        <th>Primary Keyword:</th>
+                        <td><?php echo esc_html($primary_keyword); ?></td>
+                    </tr>
+                    <?php endif; ?>
                    <?php if ($keywords_array): ?>
                    <tr>
                        <th>Secondary Keywords:</th>
--- a/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-table-of-contents.php
+++ b/plugins/wordpress/source/igny8-wp-bridge/templates/parts/igny8-table-of-contents.php
@@ -0,0 +1,69 @@
+<?php
+/**
+ * IGNY8 Table of Contents
+ * Displays clickable list of H2 headings with smooth scroll
+ *
+ * @package Igny8Bridge
+ */
+
+// Exit if accessed directly
+if (!defined('ABSPATH')) {
+    exit;
+}
+
+// Generate TOC from content
+$toc_items = igny8_generate_table_of_contents($content);
+
+// Only show if we have at least 3 headings (configurable via settings)
+$min_headings = get_option('igny8_toc_min_headings', 3);
+
+if (count($toc_items) < $min_headings) {
+    return;
+}
+?>
+
+<nav class="igny8-table-of-contents">
+    <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>
+
+<script>
+// Smooth scroll for TOC links
+document.addEventListener('DOMContentLoaded', function() {
+    const tocLinks = document.querySelectorAll('.igny8-toc-link');
+    
+    tocLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href').substring(1);
+            const targetElement = document.getElementById(targetId);
+            
+            if (targetElement) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+                
+                // Update URL without jumping
+                if (history.pushState) {
+                    history.pushState(null, null, '#' + targetId);
+                }
+            }
+        });
+    });
+});
+</script>
--- a/plugins/wordpress/source/igny8-wp-bridge/templates/single-igny8-content.php
+++ b/plugins/wordpress/source/igny8-wp-bridge/templates/single-igny8-content.php
@@ -80,6 +80,9 @@ if (defined('WP_DEBUG') && WP_DEBUG) {
            include plugin_dir_path(__FILE__) . 'parts/igny8-featured-image.php';
        }
        
+        // Table of Contents
+        include plugin_dir_path(__FILE__) . 'parts/igny8-table-of-contents.php';
+        
        // Content sections
        include plugin_dir_path(__FILE__) . 'parts/igny8-content-sections.php';