tigerstyle-heat/admin/pages/visual-elements-gallery.php

<?php
/**
 * Visual Elements Gallery Settings Page for TigerStyle Heat
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

?>

<div class="wrap">
    <h1><?php _e('Visual Elements Gallery', 'tigerstyle-heat'); ?></h1>
    <p class="description"><?php _e('Optimize your galleries for Google\'s Visual Elements Gallery and carousel rich results. Enhance image galleries with advanced structured data for better search visibility.', 'tigerstyle-heat'); ?></p>

    <form method="post" action="<?php echo admin_url('admin-post.php'); ?>">
        <?php wp_nonce_field('update_visual_gallery', 'visual_gallery_nonce'); ?>
        <input type="hidden" name="action" value="update_visual_gallery">

        <!-- Gallery Optimization -->
        <h2><?php _e('Gallery Optimization', 'tigerstyle-heat'); ?></h2>
        <div class="seo-section">
            <table class="form-table">
                <tr>
                    <th scope="row"><?php _e('Enable Gallery Optimization', 'tigerstyle-heat'); ?></th>
                    <td>
                        <label>
                            <input type="checkbox" name="visual_gallery_enabled" value="1" <?php checked(TigerStyleSEO_Utils::get_option('visual_gallery_enabled', false)); ?>>
                            <?php _e('Enable Visual Elements Gallery structured data for image galleries', 'tigerstyle-heat'); ?>
                        </label>
                        <p class="description"><?php _e('Adds structured data to WordPress galleries for enhanced search appearance and carousel eligibility.', 'tigerstyle-heat'); ?></p>
                    </td>
                </tr>
                
                <tr>
                    <th scope="row"><?php _e('Schema Type', 'tigerstyle-heat'); ?></th>
                    <td>
                        <select name="visual_gallery_type">
                            <option value="ImageGallery" <?php selected(TigerStyleSEO_Utils::get_option('visual_gallery_type', 'ImageGallery'), 'ImageGallery'); ?>><?php _e('ImageGallery (Standard)', 'tigerstyle-heat'); ?></option>
                            <option value="ItemList" <?php selected(TigerStyleSEO_Utils::get_option('visual_gallery_type', 'ImageGallery'), 'ItemList'); ?>><?php _e('ItemList (Carousel Optimized)', 'tigerstyle-heat'); ?></option>
                        </select>
                        <p class="description">
                            <?php _e('ImageGallery: Standard gallery schema for general optimization.', 'tigerstyle-heat'); ?><br>
                            <?php _e('ItemList: Optimized for Google\'s carousel rich results (requires minimum 3 images).', 'tigerstyle-heat'); ?>
                        </p>
                    </td>
                </tr>
                
                <tr>
                    <th scope="row"><?php _e('Gallery Description', 'tigerstyle-heat'); ?></th>
                    <td>
                        <textarea name="visual_gallery_description" rows="3" class="large-text" placeholder="<?php _e('Leave empty for automatic descriptions', 'tigerstyle-heat'); ?>"><?php echo esc_textarea(TigerStyleSEO_Utils::get_option('visual_gallery_description', '')); ?></textarea>
                        <p class="description"><?php _e('Custom description for all galleries. Leave empty to generate automatic descriptions based on post title and content.', 'tigerstyle-heat'); ?></p>
                    </td>
                </tr>
                
                <tr>
                    <th scope="row"><?php _e('Minimum Images for Optimization', 'tigerstyle-heat'); ?></th>
                    <td>
                        <input type="number" name="visual_gallery_min_images" value="<?php echo esc_attr(TigerStyleSEO_Utils::get_option('visual_gallery_min_images', 3)); ?>" min="1" max="20" class="small-text">
                        <p class="description"><?php _e('Minimum number of images required before adding structured data. Google recommends 3+ images for carousel rich results.', 'tigerstyle-heat'); ?></p>
                    </td>
                </tr>
            </table>
        </div>

        <!-- Carousel Rich Results -->
        <h2><?php _e('Carousel Rich Results (Beta)', 'tigerstyle-heat'); ?></h2>
        <div class="seo-section">
            <table class="form-table">
                <tr>
                    <th scope="row"><?php _e('Enable Carousel Optimization', 'tigerstyle-heat'); ?></th>
                    <td>
                        <label>
                            <input type="checkbox" name="visual_gallery_carousel_enabled" value="1" <?php checked(TigerStyleSEO_Utils::get_option('visual_gallery_carousel_enabled', false)); ?>>
                            <?php _e('Optimize galleries for Google\'s carousel rich results (Beta feature)', 'tigerstyle-heat'); ?>
                        </label>
                        <p class="description"><?php _e('Enables ItemList schema with sequential positioning for carousel eligibility. Requires minimum 3 images per gallery.', 'tigerstyle-heat'); ?></p>
                    </td>
                </tr>
            </table>
        </div>

        <!-- Enhanced Markup -->
        <h2><?php _e('Enhanced Markup', 'tigerstyle-heat'); ?></h2>
        <div class="seo-section">
            <table class="form-table">
                <tr>
                    <th scope="row"><?php _e('Add Microdata Attributes', 'tigerstyle-heat'); ?></th>
                    <td>
                        <label>
                            <input type="checkbox" name="visual_gallery_microdata" value="1" <?php checked(TigerStyleSEO_Utils::get_option('visual_gallery_microdata', false)); ?>>
                            <?php _e('Add Schema.org microdata attributes to gallery HTML', 'tigerstyle-heat'); ?>
                        </label>
                        <p class="description"><?php _e('Enhances gallery HTML with itemscope and itemtype attributes for additional SEO signals.', 'tigerstyle-heat'); ?></p>
                    </td>
                </tr>
                
                <tr>
                    <th scope="row"><?php _e('Enhanced Gallery Markup', 'tigerstyle-heat'); ?></th>
                    <td>
                        <label>
                            <input type="checkbox" name="visual_gallery_enhanced_markup" value="1" <?php checked(TigerStyleSEO_Utils::get_option('visual_gallery_enhanced_markup', false)); ?>>
                            <?php _e('Add structured markup to gallery shortcode output', 'tigerstyle-heat'); ?>
                        </label>
                        <p class="description"><?php _e('Automatically enhances [gallery] shortcodes with structured data attributes.', 'tigerstyle-heat'); ?></p>
                    </td>
                </tr>
            </table>
        </div>

        <?php submit_button(__('Update Visual Gallery Settings', 'tigerstyle-heat')); ?>
    </form>

    <!-- Gallery Detection Status -->
    <div class="seo-info-box">
        <h3><?php _e('Gallery Detection Status', 'tigerstyle-heat'); ?></h3>
        <div class="seo-setup-steps">
            <?php
            global $post;
            if ($post) {
                $gallery_module = TigerStyleSEO_VisualElementsGallery::instance();
                $performance_data = $gallery_module->get_gallery_performance_data($post->ID);
                
                if ($performance_data) {
                    echo '<p><strong>' . __('Current Page Analysis:', 'tigerstyle-heat') . '</strong></p>';
                    echo '<ul>';
                    echo '<li>' . sprintf(__('Total Galleries Found: %d', 'tigerstyle-heat'), $performance_data['total_galleries']) . '</li>';
                    echo '<li>' . sprintf(__('Total Images: %d', 'tigerstyle-heat'), $performance_data['total_images']) . '</li>';
                    echo '<li>' . sprintf(__('Qualifying Galleries: %d', 'tigerstyle-heat'), $performance_data['qualifying_galleries']) . '</li>';
                    echo '<li>' . __('Schema Type: ', 'tigerstyle-heat') . $performance_data['schema_type'] . '</li>';
                    echo '<li>' . __('Structured Data: ', 'tigerstyle-heat') . ($performance_data['has_structured_data'] ? '✅ Enabled' : '❌ Disabled') . '</li>';
                    echo '</ul>';
                } else {
                    echo '<p>' . __('No galleries detected on current page.', 'tigerstyle-heat') . '</p>';
                }
            } else {
                echo '<p>' . __('Navigate to a page with galleries to see detection status.', 'tigerstyle-heat') . '</p>';
            }
            ?>
        </div>
    </div>

    <!-- Visual Elements Gallery Guide -->
    <div class="seo-info-box">
        <h3><?php _e('Google\'s Visual Elements Gallery Guide', 'tigerstyle-heat'); ?></h3>
        <div class="seo-setup-steps">
            <p><?php _e('Google\'s Visual Elements Gallery documents the 22 most common search result elements. Gallery optimization targets:', 'tigerstyle-heat'); ?></p>
            
            <h4><?php _e('Rich Results Eligibility:', 'tigerstyle-heat'); ?></h4>
            <ul>
                <li><strong><?php _e('Image Carousels:', 'tigerstyle-heat'); ?></strong> <?php _e('Horizontal scrolling image results (Beta)', 'tigerstyle-heat'); ?></li>
                <li><strong><?php _e('Rich Image Results:', 'tigerstyle-heat'); ?></strong> <?php _e('Enhanced image search appearances', 'tigerstyle-heat'); ?></li>
                <li><strong><?php _e('Gallery Snippets:', 'tigerstyle-heat'); ?></strong> <?php _e('Image previews in search results', 'tigerstyle-heat'); ?></li>
                <li><strong><?php _e('Visual Search:', 'tigerstyle-heat'); ?></strong> <?php _e('Google Lens and visual discovery', 'tigerstyle-heat'); ?></li>
            </ul>
            
            <h4><?php _e('Implementation Requirements:', 'tigerstyle-heat'); ?></h4>
            <ul>
                <li><?php _e('Minimum 3 images per gallery for carousel eligibility', 'tigerstyle-heat'); ?></li>
                <li><?php _e('High-quality images with descriptive alt text', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Proper image metadata (title, description, caption)', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Valid structured data with no errors', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Mobile-friendly gallery presentation', 'tigerstyle-heat'); ?></li>
            </ul>
            
            <h4><?php _e('Schema Types Supported:', 'tigerstyle-heat'); ?></h4>
            <ul>
                <li><strong><?php _e('ImageGallery:', 'tigerstyle-heat'); ?></strong> <?php _e('Standard gallery schema for general optimization', 'tigerstyle-heat'); ?></li>
                <li><strong><?php _e('ItemList + ImageObject:', 'tigerstyle-heat'); ?></strong> <?php _e('Optimized for carousel rich results', 'tigerstyle-heat'); ?></li>
                <li><strong><?php _e('ImageObject:', 'tigerstyle-heat'); ?></strong> <?php _e('Individual image metadata and licensing', 'tigerstyle-heat'); ?></li>
            </ul>
            
            <p>
                <strong><?php _e('Learn More:', 'tigerstyle-heat'); ?></strong><br>
                <a href="https://developers.google.com/search/docs/appearance/visual-elements-gallery" target="_blank">
                    <?php _e('Google\'s Visual Elements Gallery Documentation', 'tigerstyle-heat'); ?>
                </a><br>
                <a href="https://developers.google.com/search/docs/appearance/structured-data/image" target="_blank">
                    <?php _e('Image Structured Data Guidelines', 'tigerstyle-heat'); ?>
                </a><br>
                <a href="https://search.google.com/test/rich-results" target="_blank">
                    <?php _e('Rich Results Testing Tool', 'tigerstyle-heat'); ?>
                </a>
            </p>
        </div>
    </div>

    <!-- Performance Tips -->
    <div class="seo-info-box">
        <h3><?php _e('Gallery Performance Optimization', 'tigerstyle-heat'); ?></h3>
        <div class="seo-setup-steps">
            <p><?php _e('Maximize your gallery SEO performance with these best practices:', 'tigerstyle-heat'); ?></p>
            
            <h4><?php _e('Image Optimization:', 'tigerstyle-heat'); ?></h4>
            <ul>
                <li><?php _e('Use descriptive, keyword-rich file names', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Optimize image sizes for web (typically under 500KB)', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Include alt text for all images', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Add captions and descriptions when relevant', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Use modern formats (WebP) when supported', 'tigerstyle-heat'); ?></li>
            </ul>
            
            <h4><?php _e('Content Strategy:', 'tigerstyle-heat'); ?></h4>
            <ul>
                <li><?php _e('Create galleries with 3-15 related images', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Group thematically related images together', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Write compelling gallery titles and descriptions', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Include relevant keywords in image metadata', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Update galleries regularly with fresh content', 'tigerstyle-heat'); ?></li>
            </ul>
            
            <h4><?php _e('Technical Excellence:', 'tigerstyle-heat'); ?></h4>
            <ul>
                <li><?php _e('Ensure fast page loading speeds', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Implement lazy loading for large galleries', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Test galleries on mobile devices', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Validate structured data with Google\'s tools', 'tigerstyle-heat'); ?></li>
                <li><?php _e('Monitor performance in Search Console', 'tigerstyle-heat'); ?></li>
            </ul>
        </div>
    </div>

    <script>
    jQuery(document).ready(function($) {
        // Show/hide carousel options based on schema type
        $('select[name="visual_gallery_type"]').change(function() {
            var $carouselSection = $('input[name="visual_gallery_carousel_enabled"]').closest('tr');
            if ($(this).val() === 'ItemList') {
                $carouselSection.show();
            } else {
                $carouselSection.hide();
            }
        }).trigger('change');
        
        // Update minimum images help text based on carousel setting
        $('input[name="visual_gallery_carousel_enabled"]').change(function() {
            var $helpText = $('input[name="visual_gallery_min_images"]').next('.description');
            if ($(this).is(':checked')) {
                $helpText.html('<?php _e("Minimum images for carousel optimization. Google requires 3+ images for carousel rich results.", "tigerstyle-heat"); ?>');
            } else {
                $helpText.html('<?php _e("Minimum number of images required before adding structured data.", "tigerstyle-heat"); ?>');
            }
        });
    });
    </script>
</div>