Image genartiona dn temaplte design redesign
This commit is contained in:
IGNY8 VPS (Salman)
815
docs/plans/phase3-content-template-redesign.md
Normal file
815
docs/plans/phase3-content-template-redesign.md
Normal file
@@ -0,0 +1,815 @@
|
||||
---
|
||||
|
||||
## 🎨 DESIGN ANALYSIS & PLAN
|
||||
|
||||
### Current State Analysis
|
||||
|
||||
**WordPress Single Post Template:**
|
||||
- Uses emojis (📅, 📝, ✍️, 📁, 🏷️) in header metadata
|
||||
- Shows all metadata including internal/debug data (Content ID, Task ID, Sector ID, Cluster ID, etc.)
|
||||
- SEO section shows Meta Title & Meta Description in header (should be hidden from users)
|
||||
- "Section Spotlight" label is hardcoded
|
||||
- Images not optimally distributed - one per section sequentially
|
||||
- Container max-width: 1200px
|
||||
|
||||
**App ContentViewTemplate:**
|
||||
- Uses icons properly via component imports
|
||||
- Similar "Section Spotlight" label issue
|
||||
- Better image handling with aspect ratio detection
|
||||
- Shows extensive metadata in header (Meta Title, Meta Description, Primary/Secondary Keywords)
|
||||
- Container max-width: 1440px
|
||||
|
||||
---
|
||||
|
||||
## 📐 DESIGN PLAN
|
||||
|
||||
### 1. CSS Container Width Update
|
||||
|
||||
```
|
||||
.igny8-content-container {
|
||||
max-width: 1280px; /* Default for screens <= 1600px */
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.igny8-content-container {
|
||||
max-width: 1530px; /* For screens > 1600px */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. WordPress Header Redesign
|
||||
|
||||
**USER-FACING FIELDS (Keep in Header):**
|
||||
| Field | Display | Icon | Notes |
|
||||
|-------|---------|------|-------|
|
||||
| Title | H1 | - | Post title |
|
||||
| Status Badge | Published/Draft/etc | - | Post status |
|
||||
| Posted Date | Formatted date | Calendar SVG | Publication date |
|
||||
| Word Count | Formatted number | Document SVG | Content word count |
|
||||
| Author | Author name | User SVG | Post author |
|
||||
| Topic | Cluster name (clickable)| Compass SVG | Display cluster_name as "Topic" |
|
||||
| Categories | Badge list (Parent > Child clicakble) | Folder SVG | WP Categories |
|
||||
| Tags | Badge list (clickable)| Tag SVG | WP Tags |
|
||||
|
||||
**NON-USER FIELDS (Move to Metadata Section - Editor+ only):**
|
||||
- Content ID, Task ID
|
||||
- Content Type, Structure
|
||||
- Cluster ID (keep cluster_name as Topic in header)
|
||||
- Sector ID, Sector Name
|
||||
- Primary Keyword, Secondary Keywords
|
||||
- Meta Title, Meta Description
|
||||
- Source, Last Synced
|
||||
|
||||
---
|
||||
|
||||
### 3. Section Label Redesign
|
||||
|
||||
**Current:** "Section Spotlight" (generic text)
|
||||
|
||||
**New Approach - Keyword/Tag Matching Algorithm:**
|
||||
|
||||
1. **Source Data:**
|
||||
- Get all WordPress tags assigned to the post
|
||||
- Get all WordPress categories assigned to the post
|
||||
- Get primary keyword from post meta
|
||||
- Get secondary keywords from post meta (if available)
|
||||
|
||||
2. **Matching Logic:**
|
||||
- For each section heading (H2), perform case-insensitive partial matching
|
||||
- Check if any tag name appears in the heading text
|
||||
- Check if any category name appears in the heading text
|
||||
- Check if primary/secondary keywords appear in the heading text
|
||||
- Prioritize: Primary Keyword > Tags > Categories > Secondary Keywords
|
||||
|
||||
3. **Display Rules:**
|
||||
- If matches found: Display up to 2 matched keywords/tags as badges
|
||||
- If no matches: Display topic (cluster_name) or leave section without label badges
|
||||
- Never display generic "Section Spotlight" text
|
||||
|
||||
4. **Badge Styling:**
|
||||
```
|
||||
[Primary Match] [Secondary Match] ← styled badges replacing "Section Spotlight"
|
||||
```
|
||||
|
||||
**Colors:**
|
||||
- Primary badge: `theme-color @ 15% opacity` background, `theme-color` text
|
||||
- Secondary badge: `theme-color @ 8% opacity` background, `theme-color @ 80%` text
|
||||
|
||||
**Implementation Function (Pseudo-code):**
|
||||
```php
|
||||
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 && 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 && 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 (stripos($heading_lower, strtolower($kw)) !== false) {
|
||||
$badges[] = ['text' => $kw, 'type' => 'keyword'];
|
||||
if (count($badges) >= 2) break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $badges;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. Image Distribution Strategy
|
||||
|
||||
**Available Images (4 total):**
|
||||
- Position 0: Square (1024×1024)
|
||||
- Position 1: Landscape (1536×1024 or 1920×1080)
|
||||
- Position 2: Square (1024×1024)
|
||||
- Position 3: Landscape (1536×1024 or 1920×1080)
|
||||
|
||||
**Distribution Plan - First 4 Sections (with descriptions):**
|
||||
|
||||
| Section | Image Position | Type | Width | Alignment | Description |
|
||||
|---------|---------------|------|-------|-----------|-------------|
|
||||
| **Featured** | Position 1 | Landscape | 100% max 1024px | Center | Show prompt on first use |
|
||||
| **Section 1** | Position 0 | Square | 50% | Right | With description + widget placeholder below |
|
||||
| **Section 2** | Position 3 | Landscape | 100% max 1024px | Full width | With description |
|
||||
| **Section 3** | Position 2 | Square | 50% | Left | With description + widget placeholder below |
|
||||
| **Section 4** | Position 1 (reuse) | Landscape | 100% max 1024px | Full width | With description |
|
||||
|
||||
**Distribution Plan - Sections 5-7+ (reuse without descriptions):**
|
||||
|
||||
| Section | Reuse Image | Type | Width | Alignment | Description |
|
||||
|---------|-------------|------|-------|-----------|-------------|
|
||||
| **Section 5** | Featured (pos 1) | Landscape | 100% max 1024px | Full width | NO description |
|
||||
| **Section 6** | Position 0 | Square | 50% | Right | NO description + widget placeholder |
|
||||
| **Section 7** | Position 3 | Landscape | 100% max 1024px | Full width | NO description |
|
||||
| **Section 8+** | Cycle through all 4 | Based on type | Based on type | Based on type | NO description |
|
||||
|
||||
**Special Case - Tables:**
|
||||
- When section contains `<table>` element, always place full-width landscape image BEFORE table
|
||||
- Use next available landscape image (Position 1 or 3)
|
||||
- Max width: 1024px, centered
|
||||
- Spacing: `margin-bottom: 2rem` before table
|
||||
- Override normal section pattern when table detected
|
||||
|
||||
**Image Reuse Rules:**
|
||||
- Images 1-4 used in first 4 sections WITH descriptions/prompts
|
||||
- Sections 5+ reuse same images WITHOUT descriptions/prompts
|
||||
- Use CSS classes: `.igny8-image-first-use` vs `.igny8-image-reuse`
|
||||
- Maintain same layout pattern (square = 50%, landscape = 100%)
|
||||
|
||||
**Widget Placeholders:**
|
||||
- Show only below square images (left/right aligned)
|
||||
- Empty div with class `.igny8-widget-placeholder`
|
||||
- Space reserved for future widget insertion
|
||||
- Controlled via plugin settings (future implementation)
|
||||
|
||||
**Implementation Notes:**
|
||||
```php
|
||||
// Check for table in section content
|
||||
function igny8_section_has_table($section_html) {
|
||||
return (stripos($section_html, '<table') !== false);
|
||||
}
|
||||
|
||||
// Get image aspect ratio from position
|
||||
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 should show description
|
||||
function igny8_show_image_description($section_index) {
|
||||
// First 4 sections (0-3) show descriptions
|
||||
return ($section_index < 4);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. Image Alignment with Tables
|
||||
|
||||
When section contains a `<table>`:
|
||||
- Place landscape image ABOVE the table
|
||||
- Full width (max 800px)
|
||||
- Proper spacing: `margin-bottom: 2rem`
|
||||
- Table should not wrap around image
|
||||
|
||||
---
|
||||
|
||||
### 6. Responsive Image Width Rules
|
||||
|
||||
```css
|
||||
/* Landscape images */
|
||||
.igny8-image-landscape {
|
||||
max-width: 1024px; /* Updated from 800px */
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.igny8-image-landscape.igny8-image-reuse {
|
||||
/* No description shown on reuse */
|
||||
}
|
||||
|
||||
/* Single square image - Right aligned */
|
||||
.igny8-image-square-right {
|
||||
max-width: 50%;
|
||||
margin-left: auto;
|
||||
float: right;
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Single square image - Left aligned */
|
||||
.igny8-image-square-left {
|
||||
max-width: 50%;
|
||||
margin-right: auto;
|
||||
float: left;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Widget placeholder below square images */
|
||||
.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: 12px;
|
||||
display: none; /* Hidden by default, shown when widgets enabled */
|
||||
}
|
||||
|
||||
.igny8-widget-placeholder.igny8-widgets-enabled {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Table-specific image positioning */
|
||||
.igny8-image-before-table {
|
||||
max-width: 1024px;
|
||||
width: 100%;
|
||||
margin: 0 auto 2rem;
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. Role-Based Visibility
|
||||
|
||||
**Metadata Section (Bottom):**
|
||||
```php
|
||||
<?php if (current_user_can('edit_posts')): ?>
|
||||
<div class="igny8-metadata-footer igny8-editor-only">
|
||||
<!-- All internal metadata here -->
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
```
|
||||
|
||||
**Visible only to:**
|
||||
- Editor
|
||||
- Administrator
|
||||
- Author (for their own posts)
|
||||
|
||||
---
|
||||
|
||||
### 8. Header Icon Set (Replace Emojis)
|
||||
|
||||
Create inline SVG icons matching theme color:
|
||||
|
||||
```php
|
||||
// Calendar Icon
|
||||
<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>
|
||||
|
||||
// Document Icon (Word Count)
|
||||
<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>
|
||||
|
||||
// User Icon (Author)
|
||||
<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>
|
||||
|
||||
// Compass Icon (Topic/Cluster)
|
||||
<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>
|
||||
|
||||
// Folder Icon (Categories)
|
||||
<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>
|
||||
|
||||
// Tag Icon (Tags)
|
||||
<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>
|
||||
```
|
||||
|
||||
Icon styling:
|
||||
```css
|
||||
.igny8-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--igny8-theme-color, currentColor);
|
||||
opacity: 0.8;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 9. Table of Contents
|
||||
|
||||
**Position:** Below featured image, before intro section
|
||||
|
||||
**Content:** List all H2 headings from content
|
||||
|
||||
**Features:**
|
||||
- Clickable links with smooth scroll to sections
|
||||
- Collapsible/expandable (optional)
|
||||
- Numbered list matching section numbers
|
||||
- Sticky positioning option (future setting)
|
||||
|
||||
**Implementation:**
|
||||
```php
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
**HTML Structure:**
|
||||
```html
|
||||
<nav class="igny8-table-of-contents">
|
||||
<div class="igny8-toc-header">
|
||||
<span class="igny8-toc-icon">📑</span>
|
||||
<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>
|
||||
```
|
||||
|
||||
**CSS:**
|
||||
```css
|
||||
.igny8-table-of-contents {
|
||||
background: var(--wp--preset--color--base, #ffffff);
|
||||
border: 2px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem 2rem;
|
||||
margin-bottom: 2rem;
|
||||
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-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.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: 8px;
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
**Settings (Future Implementation):**
|
||||
```php
|
||||
// Plugin settings for TOC
|
||||
$igny8_toc_settings = [
|
||||
'enabled' => true,
|
||||
'show_numbers' => true,
|
||||
'collapsible' => false,
|
||||
'sticky' => false,
|
||||
'min_headings' => 3, // Only show if 3+ H2 headings
|
||||
];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 10. Widget System
|
||||
|
||||
**Widget Placeholders:**
|
||||
|
||||
Widgets appear below square images (left/right aligned) where there's natural space.
|
||||
|
||||
**Placeholder Function:**
|
||||
```php
|
||||
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; // left or right
|
||||
$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); ?>">
|
||||
<!-- Widget content will be inserted here via settings -->
|
||||
<?php do_action('igny8_widget_placeholder', $position, $section_index); ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
```
|
||||
|
||||
**Widget Settings (Future Implementation):**
|
||||
```php
|
||||
// Plugin settings for widgets
|
||||
$igny8_widget_settings = [
|
||||
'enabled' => false,
|
||||
'sections' => [
|
||||
'section_1' => [
|
||||
'position' => 'right',
|
||||
'widget_type' => 'related_posts', // or 'custom_html', 'ad_unit', etc.
|
||||
'content' => '',
|
||||
],
|
||||
'section_3' => [
|
||||
'position' => 'left',
|
||||
'widget_type' => 'newsletter_signup',
|
||||
'content' => '',
|
||||
],
|
||||
],
|
||||
];
|
||||
```
|
||||
|
||||
**Widget Types (Future):**
|
||||
- Related Posts
|
||||
- Newsletter Signup
|
||||
- Ad Units
|
||||
- Custom HTML
|
||||
- Social Share Buttons
|
||||
- Author Bio
|
||||
- Call-to-Action Boxes
|
||||
|
||||
---
|
||||
|
||||
### 11. Updated Structure Overview
|
||||
|
||||
**WordPress Single Post:**
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ HEADER │
|
||||
│ ← Back to Posts │
|
||||
│ │
|
||||
│ [H1 Title] [Status Badge] │
|
||||
│ │
|
||||
│ 📅 Posted: Date 📄 Words 👤 Author │
|
||||
│ 🧭 Topic: Cluster Name │
|
||||
│ 📁 [Category Badges] 🏷️ [Tag Badges] │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ FEATURED IMAGE (Landscape, max 1024px) │
|
||||
│ │
|
||||
│ [Image Prompt - first use only] │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ TABLE OF CONTENTS │
|
||||
│ 📑 Table of Contents │
|
||||
│ 1. Section Heading One │
|
||||
│ 2. Section Heading Two │
|
||||
│ 3. Section Heading Three │
|
||||
│ ... (clickable, smooth scroll) │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ INTRO SECTION │
|
||||
│ Opening Narrative │
|
||||
│ [Content...] │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ SECTION 1 │
|
||||
│ [Keyword Badge] [Tag Badge] │
|
||||
│ 1 [H2 Heading] │
|
||||
│ │
|
||||
│ ┌──────────────┐ ┌──────────────────────┐ │
|
||||
│ │ │ │ │ │
|
||||
│ │ Content │ │ Square Image (50%) │ │
|
||||
│ │ │ │ Right Aligned │ │
|
||||
│ │ │ │ [Image Description] │ │
|
||||
│ └──────────────┘ └──────────────────────┘ │
|
||||
│ [Widget Placeholder] │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ SECTION 2 │
|
||||
│ [Keyword Badge] │
|
||||
│ 2 [H2 Heading] │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────┐ │
|
||||
│ │ Landscape Image (100% max 1024px) │ │
|
||||
│ │ [Image Description] │ │
|
||||
│ └───────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [Content...] │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ SECTION 3 │
|
||||
│ [Keyword Badge] [Tag Badge] │
|
||||
│ 3 [H2 Heading] │
|
||||
│ │
|
||||
│ ┌──────────────────────┐ ┌──────────────┐ │
|
||||
│ │ │ │ │ │
|
||||
│ │ Square Image (50%) │ │ Content │ │
|
||||
│ │ Left Aligned │ │ │ │
|
||||
│ │ [Image Description] │ │ │ │
|
||||
│ └──────────────────────┘ └──────────────┘ │
|
||||
│ [Widget Placeholder] │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ SECTION 4 (with table example) │
|
||||
│ [Keyword Badge] │
|
||||
│ 4 [H2 Heading] │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────┐ │
|
||||
│ │ Landscape Image (100% max 1024px) │ │
|
||||
│ │ [Image Description] │ │
|
||||
│ └───────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [Content before table...] │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────┐ │
|
||||
│ │ TABLE │ │
|
||||
│ │ [Data rows and columns] │ │
|
||||
│ └───────────────────────────────────────┘ │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ SECTION 5 (reuse - no description) │
|
||||
│ [Keyword Badge] │
|
||||
│ 5 [H2 Heading] │
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────┐ │
|
||||
│ │ Featured Image REUSED (no caption) │ │
|
||||
│ └───────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [Content...] │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ SECTION 6 (reuse - no description) │
|
||||
│ [Tag Badge] │
|
||||
│ 6 [H2 Heading] │
|
||||
│ │
|
||||
│ ┌──────────────┐ ┌──────────────────────┐ │
|
||||
│ │ Content │ │ Square Image REUSED │ │
|
||||
│ │ │ │ (no caption) │ │
|
||||
│ └──────────────┘ └──────────────────────┘ │
|
||||
│ [Widget Placeholder] │
|
||||
└─────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ METADATA FOOTER (Editor+ only) │
|
||||
│ ▸ View IGNY8 Metadata │
|
||||
│ - Content ID: 123 │
|
||||
│ - Task ID: 456 │
|
||||
│ - Meta Title: ... │
|
||||
│ - Meta Description: ... │
|
||||
│ - Primary Keyword: ... │
|
||||
│ - Secondary Keywords: [list] │
|
||||
│ - Cluster ID: 789 │
|
||||
│ - Sector: Industry Name │
|
||||
│ - Source: AI Generated │
|
||||
│ - Last Synced: Date/Time │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 12. App ContentViewTemplate Updates
|
||||
|
||||
**Changes to body section only (not header):**
|
||||
|
||||
1. **Remove "Section Spotlight" label** - Replace with keyword badge matching system
|
||||
2. **Add Table of Contents** below featured image (matching WordPress implementation)
|
||||
3. **Match image layout rules** from WordPress template:
|
||||
- Section 1: Square right-aligned 50% (with description)
|
||||
- Section 2: Landscape full width max 1024px (with description)
|
||||
- Section 3: Square left-aligned 50% (with description)
|
||||
- Section 4: Landscape full width max 1024px (with description)
|
||||
- Sections 5+: Reuse images without descriptions
|
||||
4. **Featured image** max 1024px centered
|
||||
5. **Widget placeholders** below square images (empty for now)
|
||||
6. **Table detection** - full-width image before tables
|
||||
|
||||
**Implementation Priority:**
|
||||
- Phase 1: Update image sizing (1024px max)
|
||||
- Phase 2: Implement keyword badge matching
|
||||
- Phase 3: Add table of contents component
|
||||
- Phase 4: Add widget placeholder divs
|
||||
|
||||
---
|
||||
|
||||
## Summary of Files to Update
|
||||
|
||||
| File | Changes | Priority |
|
||||
|------|---------|----------|
|
||||
| `igny8-content-template.css` | Container width breakpoints, image sizing classes, TOC styles, widget placeholder styles | 🔴 High |
|
||||
| `igny8-header.php` | Remove emojis, add SVG icons, add Topic field, remove SEO/internal metadata | 🔴 High |
|
||||
| `igny8-metadata.php` | Add role check (`current_user_can('edit_posts')`), include all moved metadata fields | 🔴 High |
|
||||
| `igny8-content-sections.php` | Keyword badge matching logic, smart image distribution (Section 1-4 pattern), widget placeholders | 🔴 High |
|
||||
| `igny8-featured-image.php` | Max 1024px, landscape priority | 🟡 Medium |
|
||||
| `includes/template-functions.php` | Add helper functions: `igny8_get_section_badges()`, `igny8_section_has_table()`, `igny8_show_image_description()`, `igny8_generate_table_of_contents()` | 🔴 High |
|
||||
| `ContentViewTemplate.tsx` | Match section labels, image layouts, add TOC component, widget placeholders | 🟡 Medium |
|
||||
| **New File**: `parts/igny8-table-of-contents.php` | Table of contents component | 🟡 Medium |
|
||||
| **New File**: `admin/settings-page.php` | Widget settings, TOC settings (future) | 🟢 Low |
|
||||
|
||||
---
|
||||
|
||||
## Configuration Settings (Future Implementation)
|
||||
|
||||
```php
|
||||
// Plugin settings structure
|
||||
$igny8_plugin_settings = [
|
||||
'table_of_contents' => [
|
||||
'enabled' => true,
|
||||
'show_numbers' => true,
|
||||
'collapsible' => false,
|
||||
'sticky' => false,
|
||||
'min_headings' => 3,
|
||||
'position' => 'after_featured_image', // or 'before_content', 'floating'
|
||||
],
|
||||
'widgets' => [
|
||||
'enabled' => false,
|
||||
'sections' => [
|
||||
'section_1' => [
|
||||
'position' => 'right',
|
||||
'widget_type' => 'none', // 'related_posts', 'custom_html', 'ad_unit', etc.
|
||||
'content' => '',
|
||||
],
|
||||
'section_3' => [
|
||||
'position' => 'left',
|
||||
'widget_type' => 'none',
|
||||
'content' => '',
|
||||
],
|
||||
],
|
||||
],
|
||||
'images' => [
|
||||
'featured_max_width' => 1024,
|
||||
'landscape_max_width' => 1024,
|
||||
'square_width_percentage' => 50,
|
||||
'show_descriptions_sections' => 4, // Show descriptions in first N sections
|
||||
],
|
||||
'badges' => [
|
||||
'show_section_badges' => true,
|
||||
'max_badges_per_section' => 2,
|
||||
'badge_sources' => ['primary_keyword', 'tags', 'categories', 'secondary_keywords'], // Priority order
|
||||
],
|
||||
];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Implementation Phases
|
||||
|
||||
### Phase 1: Core Template Updates (Week 1)
|
||||
- ✅ Update CSS container widths and image sizing
|
||||
- ✅ Replace emojis with SVG icons in header
|
||||
- ✅ Add Topic field to header
|
||||
- ✅ Move metadata to bottom with role check
|
||||
- ✅ Implement keyword badge matching logic
|
||||
|
||||
### Phase 2: Advanced Features (Week 2)
|
||||
- ⏳ Table of contents component
|
||||
- ⏳ Widget placeholder system
|
||||
- ⏳ Table detection and image positioning
|
||||
- ⏳ Image reuse logic (sections 5+)
|
||||
|
||||
### Phase 3: App Sync (Week 3)
|
||||
- ⏳ Update ContentViewTemplate.tsx to match WordPress
|
||||
- ⏳ Add TOC component to React app
|
||||
- ⏳ Sync image layouts and sizing
|
||||
|
||||
### Phase 4: Settings & Configuration (Week 4)
|
||||
- ⏳ Plugin settings page
|
||||
- ⏳ TOC configuration options
|
||||
- ⏳ Widget management interface
|
||||
- ⏳ Badge display preferences
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** January 10, 2026
|
||||
**Document Version:** 2.0
|
||||
**Status:** Design Complete - Ready for Implementation
|
||||
Reference in New Issue
Block a user