676 lines
36 KiB
PHP
676 lines
36 KiB
PHP
<?php
|
||
/**
|
||
* ==========================
|
||
* 🔐 IGNY8 FILE RULE HEADER
|
||
* ==========================
|
||
* @file : general-settings.php
|
||
* @location : /modules/settings/general-settings.php
|
||
* @type : Admin Page
|
||
* @scope : Module Only
|
||
* @allowed : Settings configuration, subpage routing, plugin preferences
|
||
* @reusability : Single Use
|
||
* @notes : Main settings page with subpage routing for settings module
|
||
*/
|
||
|
||
// Prevent direct access
|
||
if (!defined('ABSPATH')) {
|
||
exit;
|
||
}
|
||
|
||
// Initialize module manager and render the complete page
|
||
$module_manager = igny8_module_manager();
|
||
|
||
// Handle URL parameters for subpages
|
||
$subpage = $_GET['sp'] ?? 'general';
|
||
|
||
// Start output buffering
|
||
ob_start();
|
||
|
||
switch ($subpage) {
|
||
case 'status':
|
||
include plugin_dir_path(__FILE__) . 'status.php';
|
||
break;
|
||
case 'integration':
|
||
include plugin_dir_path(__FILE__) . 'integration.php';
|
||
break;
|
||
case 'schedules':
|
||
include plugin_dir_path(__FILE__) . 'schedules.php';
|
||
break;
|
||
case 'import-export':
|
||
include plugin_dir_path(__FILE__) . 'import-export.php';
|
||
break;
|
||
case 'general':
|
||
default:
|
||
// General settings content
|
||
|
||
// Handle image generation settings form submission
|
||
if (isset($_POST['igny8_image_settings_nonce']) && wp_verify_nonce($_POST['igny8_image_settings_nonce'], 'igny8_image_settings')) {
|
||
$image_type = sanitize_text_field($_POST['igny8_image_type'] ?? 'realistic');
|
||
$desktop_enabled = isset($_POST['igny8_desktop_enabled']) ? '1' : '0';
|
||
$mobile_enabled = isset($_POST['igny8_mobile_enabled']) ? '1' : '0';
|
||
$max_in_article_images = intval($_POST['igny8_max_in_article_images'] ?? 1);
|
||
$image_format = sanitize_text_field($_POST['igny8_image_format'] ?? 'jpg');
|
||
|
||
update_option('igny8_image_type', $image_type);
|
||
update_option('igny8_desktop_enabled', $desktop_enabled);
|
||
update_option('igny8_mobile_enabled', $mobile_enabled);
|
||
update_option('igny8_max_in_article_images', $max_in_article_images);
|
||
update_option('igny8_image_format', $image_format);
|
||
|
||
echo '<div class="notice notice-success"><p>Image generation settings saved successfully!</p></div>';
|
||
} elseif (isset($_POST['igny8_image_settings_nonce'])) {
|
||
echo '<div class="notice notice-error"><p>Security check failed. Please try again.</p></div>';
|
||
}
|
||
|
||
// Handle editor type settings form submission
|
||
if (isset($_POST['igny8_editor_type_nonce']) && wp_verify_nonce($_POST['igny8_editor_type_nonce'], 'igny8_editor_type_settings')) {
|
||
$editor_type = isset($_POST['igny8_editor_type']) ? sanitize_text_field($_POST['igny8_editor_type']) : 'block';
|
||
update_option('igny8_editor_type', $editor_type);
|
||
echo '<div class="notice notice-success"><p>Editor type settings saved successfully! Selected: ' . esc_html($editor_type) . '</p></div>';
|
||
} elseif (isset($_POST['igny8_editor_type_nonce'])) {
|
||
echo '<div class="notice notice-error"><p>Security check failed. Please try again.</p></div>';
|
||
}
|
||
|
||
// Handle image metabox settings form submission
|
||
if (isset($_POST['igny8_image_metabox_nonce']) && wp_verify_nonce($_POST['igny8_image_metabox_nonce'], 'igny8_image_metabox_settings')) {
|
||
$enabled_types = isset($_POST['igny8_enable_image_metabox']) ? $_POST['igny8_enable_image_metabox'] : [];
|
||
$enabled_types = array_map('sanitize_text_field', $enabled_types);
|
||
update_option('igny8_enable_image_metabox', $enabled_types);
|
||
echo '<div class="notice notice-success"><p>Image metabox settings saved successfully!</p></div>';
|
||
}
|
||
|
||
// Handle module settings form submission (only if not editor type or image metabox form)
|
||
if (isset($_POST['submit']) && !isset($_POST['igny8_editor_type_nonce']) && !isset($_POST['igny8_image_metabox_nonce'])) {
|
||
$module_manager->save_module_settings();
|
||
}
|
||
|
||
// Debug: Log form submission data (remove in production)
|
||
if (isset($_POST['submit']) && current_user_can('manage_options')) {
|
||
error_log('Igny8 Settings Debug - POST data: ' . print_r($_POST, true));
|
||
}
|
||
|
||
|
||
$settings = get_option('igny8_module_settings', []);
|
||
?>
|
||
<div class="igny8-settings-section">
|
||
<!-- Module Manager Section -->
|
||
<div class="igny8-settings-section">
|
||
<div class="igny8-standard-header">
|
||
<div class="igny8-card-header-content">
|
||
<div class="igny8-card-title-text">
|
||
<h3>Module Manager</h3>
|
||
<p class="igny8-card-subtitle">Enable or disable plugin modules and features</p>
|
||
</div>
|
||
<div class="igny8-card-icon">
|
||
<span class="dashicons dashicons-admin-tools igny8-dashboard-icon-lg igny8-dashboard-icon-blue"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Module Settings -->
|
||
<div class="igny8-settings-section">
|
||
<div class="igny8-settings">
|
||
<form method="post" action="">
|
||
<?php wp_nonce_field('igny8_module_settings', 'igny8_module_nonce'); ?>
|
||
|
||
<!-- Main Modules Section -->
|
||
<div class="igny8-settings-section">
|
||
|
||
|
||
<div class="igny8-module-cards-grid">
|
||
<?php foreach ($module_manager->get_modules() as $module_key => $module): ?>
|
||
<?php if ($module['category'] === 'main'): ?>
|
||
<div class="igny8-card igny8-module-card">
|
||
<div class="igny8-module-header">
|
||
<div class="igny8-card-title">
|
||
<span class="dashicons <?php echo esc_attr($module['icon']); ?>" style="color: var(--blue); font-size: 20px; margin-right: 10px;"></span>
|
||
<h6><?php echo esc_html($module['name']); ?></h6>
|
||
</div>
|
||
<div class="igny8-module-toggle">
|
||
<label class="igny8-toggle-switch">
|
||
<input type="checkbox"
|
||
id="module_<?php echo esc_attr($module_key); ?>"
|
||
name="igny8_module_settings[<?php echo esc_attr($module_key); ?>]"
|
||
value="1"
|
||
<?php checked($module_manager->is_module_enabled($module_key)); ?>>
|
||
<span class="igny8-toggle-slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="igny8-module-description">
|
||
<p><?php echo esc_html($module['description']); ?></p>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Admin & Analytics Section -->
|
||
<div class="igny8-settings-section">
|
||
<div class="igny8-standard-header">
|
||
<div class="igny8-card-header-content">
|
||
<div class="igny8-card-title-text">
|
||
<h3>Admin & Analytics</h3>
|
||
<p class="igny8-card-subtitle">Administrative tools and analytics modules</p>
|
||
</div>
|
||
<div class="igny8-card-icon">
|
||
<span class="dashicons dashicons-chart-bar igny8-dashboard-icon-lg igny8-dashboard-icon-green"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="igny8-module-cards-grid">
|
||
<?php foreach ($module_manager->get_modules() as $module_key => $module): ?>
|
||
<?php if ($module['category'] === 'admin'): ?>
|
||
<div class="igny8-card igny8-module-card">
|
||
<div class="igny8-module-header">
|
||
<div class="igny8-card-title">
|
||
<span class="dashicons <?php echo esc_attr($module['icon']); ?>" style="color: var(--green); font-size: 20px; margin-right: 10px;"></span>
|
||
<h6><?php echo esc_html($module['name']); ?></h6>
|
||
</div>
|
||
<div class="igny8-module-toggle">
|
||
<label class="igny8-toggle-switch">
|
||
<input type="checkbox"
|
||
id="module_<?php echo esc_attr($module_key); ?>"
|
||
name="igny8_module_settings[<?php echo esc_attr($module_key); ?>]"
|
||
value="1"
|
||
<?php checked($module_manager->is_module_enabled($module_key)); ?>>
|
||
<span class="igny8-toggle-slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="igny8-module-description">
|
||
<p><?php echo esc_html($module['description']); ?></p>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<?php submit_button('Save Module Settings', 'primary', 'submit', true, ['style' => 'margin-top: 20px;']); ?>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Editor Type Selection Section -->
|
||
<div class="igny8-settings-section">
|
||
<div class="igny8-standard-header">
|
||
<div class="igny8-card-header-content">
|
||
<div class="igny8-card-title-text">
|
||
<h3>Content Editor Type</h3>
|
||
<p class="igny8-card-subtitle">Choose between Classic editor or Block (Gutenberg) editor for AI-generated content</p>
|
||
</div>
|
||
<div class="igny8-card-icon">
|
||
<span class="dashicons dashicons-edit-page igny8-dashboard-icon-lg igny8-dashboard-icon-green"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="igny8-settings">
|
||
<form method="post" action="">
|
||
<?php wp_nonce_field('igny8_editor_type_settings', 'igny8_editor_type_nonce'); ?>
|
||
|
||
<div class="igny8-form-group">
|
||
<label for="igny8_editor_type"><strong>Select Editor Type:</strong></label>
|
||
<div style="margin-top: 15px;">
|
||
<?php
|
||
$current_editor_type = get_option('igny8_editor_type', 'block');
|
||
?>
|
||
|
||
<!-- Current Setting Display -->
|
||
<div style="background: #e8f4fd; border: 1px solid #0073aa; padding: 10px; border-radius: 4px; margin-bottom: 15px;">
|
||
<strong>Current Setting:</strong>
|
||
<span style="color: #0073aa; font-weight: 600;">
|
||
<?php echo $current_editor_type === 'block' ? 'Block Editor (Gutenberg)' : 'Classic Editor'; ?>
|
||
</span>
|
||
</div>
|
||
|
||
<label class="igny8-editor-option <?php echo $current_editor_type === 'block' ? 'selected' : ''; ?>">
|
||
<input type="radio" name="igny8_editor_type" value="block" <?php checked($current_editor_type, 'block'); ?>>
|
||
<div class="igny8-editor-option-content">
|
||
<div class="igny8-editor-option-title">Block Editor (Gutenberg)</div>
|
||
<div class="igny8-editor-option-description">
|
||
Modern block-based editor with advanced formatting options. Recommended for better content structure and WordPress compatibility.
|
||
</div>
|
||
</div>
|
||
</label>
|
||
|
||
<label class="igny8-editor-option <?php echo $current_editor_type === 'classic' ? 'selected' : ''; ?>">
|
||
<input type="radio" name="igny8_editor_type" value="classic" <?php checked($current_editor_type, 'classic'); ?>>
|
||
<div class="igny8-editor-option-content">
|
||
<div class="igny8-editor-option-title">Classic Editor</div>
|
||
<div class="igny8-editor-option-description">
|
||
Traditional WYSIWYG editor. Choose this if you prefer the classic WordPress editing experience.
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
|
||
<div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 15px; border-radius: 6px; margin-top: 20px;">
|
||
<p style="margin: 0 0 10px 0; font-weight: bold; color: #495057;">📝 <strong>How this affects your content:</strong></p>
|
||
<ul style="margin: 0; padding-left: 20px; color: #6c757d; font-size: 14px;">
|
||
<li><strong>Block Editor:</strong> AI content will be converted to WordPress blocks for better formatting and structure</li>
|
||
<li><strong>Classic Editor:</strong> AI content will be saved as HTML and displayed in the classic editor</li>
|
||
<li>You can change this setting anytime and it will apply to all new AI-generated content</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<?php submit_button('Save Editor Settings', 'primary', 'submit', true, ['style' => 'margin-top: 20px;']); ?>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Enhanced editor selection interaction
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const editorOptions = document.querySelectorAll('.igny8-editor-option');
|
||
|
||
editorOptions.forEach(option => {
|
||
const radio = option.querySelector('input[type="radio"]');
|
||
|
||
// Add click handler to the entire label
|
||
option.addEventListener('click', function(e) {
|
||
if (e.target !== radio) {
|
||
radio.checked = true;
|
||
updateSelection();
|
||
}
|
||
});
|
||
|
||
// Add change handler to radio buttons
|
||
radio.addEventListener('change', function() {
|
||
updateSelection();
|
||
});
|
||
});
|
||
|
||
function updateSelection() {
|
||
editorOptions.forEach(option => {
|
||
const radio = option.querySelector('input[type="radio"]');
|
||
if (radio.checked) {
|
||
option.classList.add('selected');
|
||
} else {
|
||
option.classList.remove('selected');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Initialize selection on page load
|
||
updateSelection();
|
||
});
|
||
</script>
|
||
|
||
<!-- Image Generation Settings Section -->
|
||
<div class="igny8-settings-section">
|
||
<div class="igny8-standard-header">
|
||
<div class="igny8-card-header-content">
|
||
<div class="igny8-card-title-text">
|
||
<h3>Image Generation</h3>
|
||
<p class="igny8-card-subtitle">Configure AI image generation settings and preferences</p>
|
||
</div>
|
||
<div class="igny8-card-icon">
|
||
<span class="dashicons dashicons-format-image igny8-dashboard-icon-lg igny8-dashboard-icon-blue"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="igny8-settings">
|
||
<form method="post" action="" id="igny8-image-generation-form">
|
||
<?php wp_nonce_field('igny8_image_settings', 'igny8_image_settings_nonce'); ?>
|
||
|
||
<div class="igny8-form-group">
|
||
<label><strong>Image Settings</strong></label>
|
||
<div style="display: flex; gap: 20px; align-items: end; margin-top: 10px;">
|
||
<div style="flex: 1;">
|
||
<label for="igny8_image_type" style="display: block; margin-bottom: 5px; font-weight: 500;">Image Type</label>
|
||
<select id="igny8_image_type" name="igny8_image_type" class="igny8-form-control">
|
||
<option value="realistic" <?php selected(get_option('igny8_image_type', 'realistic'), 'realistic'); ?>>Realistic</option>
|
||
<option value="illustration" <?php selected(get_option('igny8_image_type', 'realistic'), 'illustration'); ?>>Illustration</option>
|
||
<option value="3D render" <?php selected(get_option('igny8_image_type', 'realistic'), '3D render'); ?>>3D Render</option>
|
||
<option value="minimalist" <?php selected(get_option('igny8_image_type', 'realistic'), 'minimalist'); ?>>Minimalist</option>
|
||
<option value="cartoon" <?php selected(get_option('igny8_image_type', 'realistic'), 'cartoon'); ?>>Cartoon</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div style="flex: 1;">
|
||
<label for="igny8_max_in_article_images" style="display: block; margin-bottom: 5px; font-weight: 500;">Max In-Article Images</label>
|
||
<select id="igny8_max_in_article_images" name="igny8_max_in_article_images" class="igny8-form-control">
|
||
<option value="1" <?php selected(get_option('igny8_max_in_article_images', '1'), '1'); ?>>1 Image</option>
|
||
<option value="2" <?php selected(get_option('igny8_max_in_article_images', '1'), '2'); ?>>2 Images</option>
|
||
<option value="3" <?php selected(get_option('igny8_max_in_article_images', '1'), '3'); ?>>3 Images</option>
|
||
<option value="4" <?php selected(get_option('igny8_max_in_article_images', '1'), '4'); ?>>4 Images</option>
|
||
<option value="5" <?php selected(get_option('igny8_max_in_article_images', '1'), '5'); ?>>5 Images</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div style="flex: 1;">
|
||
<label for="igny8_image_format" style="display: block; margin-bottom: 5px; font-weight: 500;">Image Format</label>
|
||
<select id="igny8_image_format" name="igny8_image_format" class="igny8-form-control">
|
||
<option value="jpg" <?php selected(get_option('igny8_image_format', 'jpg'), 'jpg'); ?>>JPG</option>
|
||
<option value="png" <?php selected(get_option('igny8_image_format', 'jpg'), 'png'); ?>>PNG</option>
|
||
<option value="webp" <?php selected(get_option('igny8_image_format', 'jpg'), 'webp'); ?>>WEBP</option>
|
||
</select>
|
||
<div id="igny8-selected-format" style="margin-top: 5px; font-weight: bold; color: #0073aa;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="igny8-form-group">
|
||
<label><strong>Current Image Provider & Model</strong></label>
|
||
<div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 15px; border-radius: 6px; margin-top: 10px;">
|
||
<?php
|
||
$current_service = get_option('igny8_image_service', 'openai');
|
||
$current_model = get_option('igny8_image_model', 'dall-e-3');
|
||
$current_runware_model = get_option('igny8_runware_model', 'runware:97@1');
|
||
|
||
if ($current_service === 'openai') {
|
||
$model_names = [
|
||
'dall-e-3' => 'DALL·E 3',
|
||
'dall-e-2' => 'DALL·E 2',
|
||
'gpt-image-1' => 'GPT Image 1 (Full)',
|
||
'gpt-image-1-mini' => 'GPT Image 1 Mini'
|
||
];
|
||
$model_name = $model_names[$current_model] ?? $current_model;
|
||
echo '<div style="display: flex; align-items: center; margin-bottom: 8px;">';
|
||
echo '<span style="font-weight: bold; color: #0073aa; margin-right: 10px;">Provider:</span>';
|
||
echo '<span style="color: #495057;">OpenAI</span>';
|
||
echo '</div>';
|
||
echo '<div style="display: flex; align-items: center;">';
|
||
echo '<span style="font-weight: bold; color: #0073aa; margin-right: 10px;">Model:</span>';
|
||
echo '<span style="color: #495057;">' . esc_html($model_name) . '</span>';
|
||
echo '</div>';
|
||
} else {
|
||
echo '<div style="display: flex; align-items: center; margin-bottom: 8px;">';
|
||
echo '<span style="font-weight: bold; color: #0073aa; margin-right: 10px;">Provider:</span>';
|
||
echo '<span style="color: #495057;">Runware</span>';
|
||
echo '</div>';
|
||
echo '<div style="display: flex; align-items: center;">';
|
||
echo '<span style="font-weight: bold; color: #0073aa; margin-right: 10px;">Model:</span>';
|
||
echo '<span style="color: #495057;">HiDream-I1 Full</span>';
|
||
echo '</div>';
|
||
}
|
||
?>
|
||
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #dee2e6;">
|
||
<small style="color: #6c757d;">
|
||
<strong>Note:</strong> To change the image provider or model, go to
|
||
<a href="<?php echo admin_url('admin.php?page=igny8-settings&sp=integration'); ?>" style="color: #0073aa;">Integration Settings</a>
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="igny8-form-group">
|
||
<label><strong>Image Size Options</strong></label>
|
||
<div class="igny8-size-checkbox-container">
|
||
<!-- Featured Image - Simple row without checkbox/count -->
|
||
<div class="igny8-size-option igny8-featured-image-row">
|
||
<div class="igny8-size-info igny8-size-featured">Featured Image</div>
|
||
<div class="igny8-size-info" id="featured-size-info">1280×832 pixels</div>
|
||
</div>
|
||
|
||
<div class="igny8-size-option">
|
||
<label class="igny8-checkbox-label">
|
||
<input type="checkbox" id="igny8_desktop_enabled" name="igny8_desktop_enabled" value="1" <?php checked(get_option('igny8_desktop_enabled', '1'), '1'); ?>>
|
||
<span class="igny8-checkbox-text">Desktop Images</span>
|
||
</label>
|
||
<div class="igny8-size-info" id="desktop-size-info">1024×1024 pixels</div>
|
||
</div>
|
||
|
||
<div class="igny8-size-option">
|
||
<label class="igny8-checkbox-label">
|
||
<input type="checkbox" id="igny8_mobile_enabled" name="igny8_mobile_enabled" value="1" <?php checked(get_option('igny8_mobile_enabled', '0'), '1'); ?>>
|
||
<span class="igny8-checkbox-text">Mobile Images</span>
|
||
</label>
|
||
<div class="igny8-size-info" id="mobile-size-info">960×1280 pixels</div>
|
||
</div>
|
||
</div>
|
||
<small class="form-help">Choose which image sizes to generate and how many of each type.</small>
|
||
</div>
|
||
|
||
<?php submit_button('Save Image Settings', 'primary', 'submit', true, ['style' => 'margin-top: 20px;']); ?>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Image generation settings JavaScript
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Get current provider from integration settings
|
||
const currentProvider = '<?php echo esc_js(get_option('igny8_image_service', 'openai')); ?>';
|
||
|
||
function updateSizeInfo(provider) {
|
||
const sizeInfo = {
|
||
'runware': {
|
||
featured: '1280×832 pixels',
|
||
desktop: '1024×1024 pixels',
|
||
mobile: '960×1280 pixels'
|
||
},
|
||
'openai': {
|
||
featured: '1024×1024 pixels',
|
||
desktop: '1024×1024 pixels',
|
||
mobile: '1024×1024 pixels'
|
||
},
|
||
'dalle': {
|
||
featured: '1024×1024 pixels',
|
||
desktop: '1024×1024 pixels',
|
||
mobile: '1024×1024 pixels'
|
||
}
|
||
};
|
||
|
||
if (sizeInfo[provider]) {
|
||
$('#featured-size-info').text(sizeInfo[provider].featured);
|
||
$('#desktop-size-info').text(sizeInfo[provider].desktop);
|
||
$('#mobile-size-info').text(sizeInfo[provider].mobile);
|
||
}
|
||
}
|
||
|
||
// Initialize with current provider
|
||
updateSizeInfo(currentProvider);
|
||
|
||
// Image format selector functionality
|
||
const $formatSelector = $('#igny8_image_format');
|
||
const $formatDisplay = $('#igny8-selected-format');
|
||
|
||
$formatSelector.on('change', function() {
|
||
const selectedFormat = $(this).val().toUpperCase();
|
||
$formatDisplay.text(selectedFormat + ' format');
|
||
});
|
||
|
||
// Initialize format display with saved value
|
||
const savedFormat = '<?php echo esc_js(get_option('igny8_image_format', 'jpg')); ?>';
|
||
$formatSelector.val(savedFormat);
|
||
$formatSelector.trigger('change');
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
/* Image Generation Settings Styles */
|
||
.igny8-size-checkbox-container {
|
||
background: #f8f9fa;
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.igny8-size-option {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #e9ecef;
|
||
}
|
||
|
||
.igny8-size-option:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.igny8-featured-image-row {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
border-radius: 6px;
|
||
padding: 15px 20px;
|
||
margin-bottom: 15px;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.igny8-size-featured {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.igny8-checkbox-label {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.igny8-checkbox-label input[type="checkbox"] {
|
||
margin-right: 10px;
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.igny8-size-info {
|
||
font-size: 14px;
|
||
color: #6c757d;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.igny8-featured-image-row .igny8-size-info {
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.form-help {
|
||
display: block;
|
||
margin-top: 5px;
|
||
font-size: 13px;
|
||
color: #6c757d;
|
||
font-style: italic;
|
||
}
|
||
</style>
|
||
|
||
<!-- Image Metabox Settings Section -->
|
||
<div class="igny8-settings-section">
|
||
<div class="igny8-standard-header">
|
||
<div class="igny8-card-header-content">
|
||
<div class="igny8-card-title-text">
|
||
<h3>In-Article Image Meta Box</h3>
|
||
<p class="igny8-card-subtitle">Enable image metabox for specific post types</p>
|
||
</div>
|
||
<div class="igny8-card-icon">
|
||
<span class="dashicons dashicons-format-image igny8-dashboard-icon-lg igny8-dashboard-icon-blue"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="igny8-settings">
|
||
<form method="post" action="">
|
||
<?php wp_nonce_field('igny8_image_metabox_settings', 'igny8_image_metabox_nonce'); ?>
|
||
|
||
<div class="igny8-form-group">
|
||
<label for="igny8_enable_image_metabox"><strong>Enable In-Article Image Meta Box For:</strong></label>
|
||
<div style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 15px; background: #f9f9f9; border-radius: 4px; margin-top: 10px;">
|
||
<?php
|
||
$all_post_types = get_post_types(['public' => true], 'objects');
|
||
$enabled_types = (array) get_option('igny8_enable_image_metabox', []);
|
||
|
||
foreach ($all_post_types as $pt => $obj) {
|
||
$checked = in_array($pt, $enabled_types) ? 'checked' : '';
|
||
echo '<label style="display: block; margin-bottom: 8px; padding: 5px;">';
|
||
echo '<input type="checkbox" name="igny8_enable_image_metabox[]" value="' . esc_attr($pt) . '" ' . $checked . ' style="margin-right: 8px;"> ';
|
||
echo '<strong>' . esc_html($obj->label) . '</strong> <em>(' . esc_html($pt) . ')</em>';
|
||
echo '</label>';
|
||
}
|
||
?>
|
||
</div>
|
||
<p class="description" style="margin-top: 10px;">Select which post types should display the In-Article Image metabox in the WordPress editor.</p>
|
||
</div>
|
||
|
||
<!-- Shortcode Usage Examples -->
|
||
<div class="igny8-form-group" style="margin-top: 25px;">
|
||
<label><strong>Shortcode Usage Examples:</strong></label>
|
||
<div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 15px; border-radius: 4px; margin-top: 10px;">
|
||
<p style="margin: 0 0 10px 0; font-weight: bold; color: #495057;">Use these shortcodes in your posts/pages to display the selected images:</p>
|
||
|
||
<div style="margin-bottom: 12px;">
|
||
<code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-images]</code>
|
||
<span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display all images</span>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 12px;">
|
||
<code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-image id="desktop-1"]</code>
|
||
<span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display specific image by ID</span>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 12px;">
|
||
<code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-desktop-images]</code>
|
||
<span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display only desktop images</span>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 12px;">
|
||
<code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-mobile-images]</code>
|
||
<span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display only mobile images</span>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 12px;">
|
||
<code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-responsive-gallery]</code>
|
||
<span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Responsive gallery (desktop on large screens, mobile on small screens)</span>
|
||
</div>
|
||
|
||
<div style="margin-bottom: 0;">
|
||
<code style="background: #fff; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 13px;">[igny8-image-count]</code>
|
||
<span style="margin-left: 8px; color: #6c757d; font-size: 13px;">Display count of images</span>
|
||
</div>
|
||
|
||
<p style="margin: 15px 0 0 0; font-size: 12px; color: #6c757d; font-style: italic;">
|
||
💡 <strong>Tip:</strong> After selecting images in the metabox, use these shortcodes in your post content to display them on the frontend.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<?php submit_button('Save Image Metabox Settings', 'primary', 'submit', true, ['style' => 'margin-top: 20px;']); ?>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table Settings Section -->
|
||
<div class="igny8-settings-section">
|
||
<form method="post" action="options.php">
|
||
<?php settings_fields('igny8_table_settings'); ?>
|
||
<table class="form-table">
|
||
<tr>
|
||
<th scope="row">
|
||
<label for="igny8_records_per_page">Records Per Page</label>
|
||
</th>
|
||
<td>
|
||
<select name="igny8_records_per_page" id="igny8_records_per_page">
|
||
<option value="10" <?php selected(get_option('igny8_records_per_page', 20), 10); ?>>10</option>
|
||
<option value="20" <?php selected(get_option('igny8_records_per_page', 20), 20); ?>>20</option>
|
||
<option value="50" <?php selected(get_option('igny8_records_per_page', 20), 50); ?>>50</option>
|
||
<option value="100" <?php selected(get_option('igny8_records_per_page', 20), 100); ?>>100</option>
|
||
</select>
|
||
<p class="description">Default number of records to display per page across all tables in the plugin.</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<?php submit_button('Save Settings'); ?>
|
||
</form>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<?php
|
||
break;
|
||
}
|
||
|
||
// Capture page content
|
||
$igny8_page_content = ob_get_clean();
|
||
|
||
// Include global layout
|
||
include plugin_dir_path(__FILE__) . '../../core/global-layout.php';
|
||
?>
|