| 1 |
<?php |
| 2 |
/** |
| 3 |
* Media Optimization Settings Tab View |
| 4 |
* |
| 5 |
* @package Search Atlas SEO |
| 6 |
* @copyright Copyright (C) 2021-2025, Search Atlas Group - support@searchatlas.com |
| 7 |
* @since 2.6.0 |
| 8 |
*/ |
| 9 |
|
| 10 |
if (!defined('WPINC')) { |
| 11 |
die; |
| 12 |
} |
| 13 |
?> |
| 14 |
<div class="metasync-media-container"> |
| 15 |
<!-- Main Settings Area --> |
| 16 |
<div class="metasync-media-main"> |
| 17 |
<form method="post" action="" id="metasync-media-optimization-form"> |
| 18 |
<?php wp_nonce_field('metasync_save_media_optimization', 'metasync_media_optimization_nonce'); ?> |
| 19 |
|
| 20 |
<!-- Section: Next-Gen Image Conversion --> |
| 21 |
<div class="metasync-card"> |
| 22 |
<div class="metasync-card-header"> |
| 23 |
<div class="metasync-card-title-group"> |
| 24 |
<h2><?php esc_html_e('Next-Gen Image Conversion', 'metasync'); ?></h2> |
| 25 |
<span class="metasync-card-subtitle"><?php esc_html_e('Automatically convert JPEG/PNG to WebP or AVIF', 'metasync'); ?></span> |
| 26 |
</div> |
| 27 |
<label class="metasync-toggle"> |
| 28 |
<input type="checkbox" name="metasync_media[enable_conversion]" value="1" <?php checked(!empty($settings['enable_conversion'])); ?>> |
| 29 |
<span class="metasync-toggle-slider"></span> |
| 30 |
</label> |
| 31 |
</div> |
| 32 |
|
| 33 |
<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_conversion" <?php echo empty($settings['enable_conversion']) ? 'style="display:none;"' : ''; ?>> |
| 34 |
<div class="metasync-field-row"> |
| 35 |
<div class="metasync-field"> |
| 36 |
<label for="conversion_format"><?php esc_html_e('Target Format', 'metasync'); ?></label> |
| 37 |
<select name="metasync_media[conversion_format]" id="conversion_format"> |
| 38 |
<option value="webp" <?php selected($settings['conversion_format'], 'webp'); ?> |
| 39 |
<?php disabled(!$capabilities['webp_support']); ?>> |
| 40 |
WebP <?php echo !$capabilities['webp_support'] ? esc_html__('(not supported)', 'metasync') : ''; ?> |
| 41 |
</option> |
| 42 |
<option value="avif" <?php selected($settings['conversion_format'], 'avif'); ?> |
| 43 |
<?php disabled(!$capabilities['avif_support']); ?>> |
| 44 |
AVIF <?php echo !$capabilities['avif_support'] ? esc_html__('(not supported)', 'metasync') : ''; ?> |
| 45 |
</option> |
| 46 |
</select> |
| 47 |
<p class="metasync-field-description"><?php esc_html_e('WebP has broader browser support. AVIF offers better compression but requires newer browsers.', 'metasync'); ?></p> |
| 48 |
</div> |
| 49 |
|
| 50 |
<div class="metasync-field"> |
| 51 |
<label for="conversion_quality"><?php esc_html_e('Quality', 'metasync'); ?></label> |
| 52 |
<div class="metasync-range-group"> |
| 53 |
<input type="range" name="metasync_media[conversion_quality]" id="conversion_quality" |
| 54 |
value="<?php echo esc_attr((int) $settings['conversion_quality']); ?>" |
| 55 |
min="1" max="100" step="1"> |
| 56 |
<span class="metasync-range-value" id="quality-value"><?php echo esc_html((int) $settings['conversion_quality']); ?></span> |
| 57 |
</div> |
| 58 |
<p class="metasync-field-description"><?php esc_html_e('Lower values = smaller files. Recommended: 75-85 for best balance.', 'metasync'); ?></p> |
| 59 |
</div> |
| 60 |
</div> |
| 61 |
|
| 62 |
<div class="metasync-field-row"> |
| 63 |
<div class="metasync-field"> |
| 64 |
<label for="conversion_strategy"><?php esc_html_e('Conversion Strategy', 'metasync'); ?></label> |
| 65 |
<select name="metasync_media[conversion_strategy]" id="conversion_strategy"> |
| 66 |
<option value="alongside" <?php selected($settings['conversion_strategy'], 'alongside'); ?>> |
| 67 |
<?php esc_html_e('Store alongside original (serve via <picture>)', 'metasync'); ?> |
| 68 |
</option> |
| 69 |
<option value="replace" <?php selected($settings['conversion_strategy'], 'replace'); ?>> |
| 70 |
<?php esc_html_e('Replace original file (Not Recommended)', 'metasync'); ?> |
| 71 |
</option> |
| 72 |
</select> |
| 73 |
<p class="metasync-field-description"><?php esc_html_e('"Alongside" keeps the original and creates a converted copy with automatic <picture> tag wrapping.', 'metasync'); ?></p> |
| 74 |
<div class="metasync-strategy-warning" id="replace-strategy-warning" <?php echo $settings['conversion_strategy'] !== 'replace' ? 'style="display:none;"' : ''; ?>> |
| 75 |
<span class="dashicons dashicons-warning"></span> |
| 76 |
<p><?php esc_html_e('Warning: "Replace" permanently overwrites the original file. This action is not reversible — you will lose the original image. Use "Alongside" to keep a safe fallback.', 'metasync'); ?></p> |
| 77 |
</div> |
| 78 |
</div> |
| 79 |
|
| 80 |
<div class="metasync-field"> |
| 81 |
<label class="metasync-checkbox-label"> |
| 82 |
<input type="checkbox" name="metasync_media[convert_existing_sizes]" value="1" |
| 83 |
<?php checked(!empty($settings['convert_existing_sizes'])); ?>> |
| 84 |
<span><?php esc_html_e('Convert all thumbnail sizes', 'metasync'); ?></span> |
| 85 |
</label> |
| 86 |
<p class="metasync-field-description"><?php esc_html_e('Also convert WordPress-generated thumbnail sizes (medium, large, etc.) in addition to the full-size image.', 'metasync'); ?></p> |
| 87 |
</div> |
| 88 |
</div> |
| 89 |
</div> |
| 90 |
</div> |
| 91 |
|
| 92 |
<!-- Section: Smart Lazy Loading --> |
| 93 |
<div class="metasync-card"> |
| 94 |
<div class="metasync-card-header"> |
| 95 |
<div class="metasync-card-title-group"> |
| 96 |
<h2><?php esc_html_e('Smart Lazy Loading', 'metasync'); ?></h2> |
| 97 |
<span class="metasync-card-subtitle"><?php esc_html_e('Defer off-screen images and iframes for faster page loads', 'metasync'); ?></span> |
| 98 |
</div> |
| 99 |
<label class="metasync-toggle"> |
| 100 |
<input type="checkbox" name="metasync_media[enable_lazy_loading]" value="1" <?php checked(!empty($settings['enable_lazy_loading'])); ?>> |
| 101 |
<span class="metasync-toggle-slider"></span> |
| 102 |
</label> |
| 103 |
</div> |
| 104 |
|
| 105 |
<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_lazy_loading" <?php echo empty($settings['enable_lazy_loading']) ? 'style="display:none;"' : ''; ?>> |
| 106 |
<div class="metasync-field-row"> |
| 107 |
<div class="metasync-field"> |
| 108 |
<label for="lcp_skip_count"><?php esc_html_e('LCP Protection - Skip Count', 'metasync'); ?></label> |
| 109 |
<div class="metasync-number-group"> |
| 110 |
<input type="number" name="metasync_media[lcp_skip_count]" id="lcp_skip_count" |
| 111 |
value="<?php echo esc_attr((int) $settings['lcp_skip_count']); ?>" |
| 112 |
min="0" max="10" step="1"> |
| 113 |
<span class="metasync-number-suffix"><?php esc_html_e('images', 'metasync'); ?></span> |
| 114 |
</div> |
| 115 |
<p class="metasync-field-description"><?php esc_html_e('Number of leading images to exclude from lazy loading. These will get loading="eager" to protect your Largest Contentful Paint (LCP) score. Recommended: 2-3 for hero images and logos.', 'metasync'); ?></p> |
| 116 |
</div> |
| 117 |
|
| 118 |
<div class="metasync-field"> |
| 119 |
<label class="metasync-checkbox-label"> |
| 120 |
<input type="checkbox" name="metasync_media[lazy_load_iframes]" value="1" |
| 121 |
<?php checked(!empty($settings['lazy_load_iframes'])); ?>> |
| 122 |
<span><?php esc_html_e('Lazy load iframes', 'metasync'); ?></span> |
| 123 |
</label> |
| 124 |
<p class="metasync-field-description"><?php esc_html_e('Also apply lazy loading to iframe elements (YouTube embeds, Google Maps, etc.).', 'metasync'); ?></p> |
| 125 |
</div> |
| 126 |
</div> |
| 127 |
</div> |
| 128 |
</div> |
| 129 |
|
| 130 |
<!-- Section: Automatic Dimension Injection --> |
| 131 |
<div class="metasync-card"> |
| 132 |
<div class="metasync-card-header"> |
| 133 |
<div class="metasync-card-title-group"> |
| 134 |
<h2><?php esc_html_e('Automatic Dimension Injection', 'metasync'); ?></h2> |
| 135 |
<span class="metasync-card-subtitle"><?php esc_html_e('Prevent layout shifts by adding missing width/height attributes', 'metasync'); ?></span> |
| 136 |
</div> |
| 137 |
<label class="metasync-toggle"> |
| 138 |
<input type="checkbox" name="metasync_media[enable_dimension_injection]" value="1" <?php checked(!empty($settings['enable_dimension_injection'])); ?>> |
| 139 |
<span class="metasync-toggle-slider"></span> |
| 140 |
</label> |
| 141 |
</div> |
| 142 |
|
| 143 |
<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_dimension_injection" <?php echo empty($settings['enable_dimension_injection']) ? 'style="display:none;"' : ''; ?>> |
| 144 |
<div class="metasync-dimension-info"> |
| 145 |
<div class="metasync-info-box"> |
| 146 |
<span class="dashicons dashicons-info"></span> |
| 147 |
<div> |
| 148 |
<strong><?php esc_html_e('How it works', 'metasync'); ?></strong> |
| 149 |
<p><?php esc_html_e('Scans your page HTML for <img> tags missing width and/or height attributes. Dimensions are resolved from WordPress attachment metadata, local file headers, or remote image headers. This prevents Cumulative Layout Shift (CLS) - a Core Web Vital metric.', 'metasync'); ?></p> |
| 150 |
</div> |
| 151 |
</div> |
| 152 |
</div> |
| 153 |
</div> |
| 154 |
</div> |
| 155 |
|
| 156 |
<!-- Section: Exclusions --> |
| 157 |
<div class="metasync-card"> |
| 158 |
<div class="metasync-card-header"> |
| 159 |
<div class="metasync-card-title-group"> |
| 160 |
<h2><?php esc_html_e('Exclusions', 'metasync'); ?></h2> |
| 161 |
<span class="metasync-card-subtitle"><?php esc_html_e('Skip specific images from optimization', 'metasync'); ?></span> |
| 162 |
</div> |
| 163 |
</div> |
| 164 |
|
| 165 |
<div class="metasync-card-body"> |
| 166 |
<div class="metasync-field-row"> |
| 167 |
<div class="metasync-field"> |
| 168 |
<label for="exclude_classes"><?php esc_html_e('Exclude by CSS Class', 'metasync'); ?></label> |
| 169 |
<input type="text" name="metasync_media[exclude_classes]" id="exclude_classes" |
| 170 |
value="<?php echo esc_attr($settings['exclude_classes']); ?>" |
| 171 |
placeholder="no-lazy, skip-convert, custom-class" |
| 172 |
class="metasync-text-input"> |
| 173 |
<p class="metasync-field-description"><?php esc_html_e('Comma-separated CSS class names. Images with these classes will be excluded from conversion, lazy loading, and dimension injection.', 'metasync'); ?></p> |
| 174 |
</div> |
| 175 |
|
| 176 |
<div class="metasync-field"> |
| 177 |
<label for="exclude_urls"><?php esc_html_e('Exclude by URL Pattern', 'metasync'); ?></label> |
| 178 |
<input type="text" name="metasync_media[exclude_urls]" id="exclude_urls" |
| 179 |
value="<?php echo esc_attr($settings['exclude_urls']); ?>" |
| 180 |
placeholder="/logo, /brand, external-cdn.com" |
| 181 |
class="metasync-text-input"> |
| 182 |
<p class="metasync-field-description"><?php esc_html_e('Comma-separated URL patterns. Images with URLs containing these patterns will be excluded from conversion.', 'metasync'); ?></p> |
| 183 |
</div> |
| 184 |
</div> |
| 185 |
</div> |
| 186 |
</div> |
| 187 |
|
| 188 |
<!-- Save Button --> |
| 189 |
<div class="metasync-form-actions"> |
| 190 |
<button type="submit" class="button button-primary button-large" id="save-media-settings"> |
| 191 |
<span class="dashicons dashicons-saved" style="margin-top: 4px;"></span> |
| 192 |
<?php esc_html_e('Save Settings', 'metasync'); ?> |
| 193 |
</button> |
| 194 |
<button type="button" class="button button-secondary" id="reset-media-settings"> |
| 195 |
<span class="dashicons dashicons-image-rotate" style="margin-top: 4px;"></span> |
| 196 |
<?php esc_html_e('Reset to Defaults', 'metasync'); ?> |
| 197 |
</button> |
| 198 |
</div> |
| 199 |
</form> |
| 200 |
</div> |
| 201 |
|
| 202 |
<!-- Sidebar --> |
| 203 |
<div class="metasync-media-sidebar"> |
| 204 |
<!-- Server Capabilities --> |
| 205 |
<div class="metasync-card"> |
| 206 |
<div class="metasync-card-header"> |
| 207 |
<h3><?php esc_html_e('Server Capabilities', 'metasync'); ?></h3> |
| 208 |
</div> |
| 209 |
<div class="metasync-capabilities-list"> |
| 210 |
<div class="metasync-capability-item"> |
| 211 |
<span class="metasync-capability-label"><?php esc_html_e('Imagick Extension', 'metasync'); ?></span> |
| 212 |
<?php if ($capabilities['imagick']): ?> |
| 213 |
<span class="metasync-capability-badge metasync-badge-success"> |
| 214 |
<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Available', 'metasync'); ?> |
| 215 |
</span> |
| 216 |
<?php else: ?> |
| 217 |
<span class="metasync-capability-badge metasync-badge-warning"> |
| 218 |
<span class="dashicons dashicons-warning"></span> <?php esc_html_e('Not Available', 'metasync'); ?> |
| 219 |
</span> |
| 220 |
<?php endif; ?> |
| 221 |
</div> |
| 222 |
<div class="metasync-capability-item"> |
| 223 |
<span class="metasync-capability-label"><?php esc_html_e('GD Extension', 'metasync'); ?></span> |
| 224 |
<?php if ($capabilities['gd']): ?> |
| 225 |
<span class="metasync-capability-badge metasync-badge-success"> |
| 226 |
<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Available', 'metasync'); ?> |
| 227 |
</span> |
| 228 |
<?php else: ?> |
| 229 |
<span class="metasync-capability-badge metasync-badge-warning"> |
| 230 |
<span class="dashicons dashicons-warning"></span> <?php esc_html_e('Not Available', 'metasync'); ?> |
| 231 |
</span> |
| 232 |
<?php endif; ?> |
| 233 |
</div> |
| 234 |
<div class="metasync-capability-item"> |
| 235 |
<span class="metasync-capability-label"><?php esc_html_e('WebP Support', 'metasync'); ?></span> |
| 236 |
<?php if ($capabilities['webp_support']): ?> |
| 237 |
<span class="metasync-capability-badge metasync-badge-success"> |
| 238 |
<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Supported', 'metasync'); ?> |
| 239 |
</span> |
| 240 |
<?php else: ?> |
| 241 |
<span class="metasync-capability-badge metasync-badge-error"> |
| 242 |
<span class="dashicons dashicons-no"></span> <?php esc_html_e('Not Supported', 'metasync'); ?> |
| 243 |
</span> |
| 244 |
<?php endif; ?> |
| 245 |
</div> |
| 246 |
<div class="metasync-capability-item"> |
| 247 |
<span class="metasync-capability-label"><?php esc_html_e('AVIF Support', 'metasync'); ?></span> |
| 248 |
<?php if ($capabilities['avif_support']): ?> |
| 249 |
<span class="metasync-capability-badge metasync-badge-success"> |
| 250 |
<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Supported', 'metasync'); ?> |
| 251 |
</span> |
| 252 |
<?php else: ?> |
| 253 |
<span class="metasync-capability-badge metasync-badge-warning"> |
| 254 |
<span class="dashicons dashicons-warning"></span> <?php esc_html_e('Not Supported', 'metasync'); ?> |
| 255 |
</span> |
| 256 |
<?php endif; ?> |
| 257 |
</div> |
| 258 |
</div> |
| 259 |
</div> |
| 260 |
|
| 261 |
<!-- Feature Status --> |
| 262 |
<div class="metasync-card"> |
| 263 |
<div class="metasync-card-header"> |
| 264 |
<h3><?php esc_html_e('Active Features', 'metasync'); ?></h3> |
| 265 |
</div> |
| 266 |
<div class="metasync-feature-status-list"> |
| 267 |
<div class="metasync-feature-status-item"> |
| 268 |
<span class="metasync-feature-dot <?php echo !empty($settings['enable_conversion']) ? 'active' : 'inactive'; ?>"></span> |
| 269 |
<span><?php esc_html_e('Image Conversion', 'metasync'); ?></span> |
| 270 |
<span class="metasync-feature-format"><?php echo !empty($settings['enable_conversion']) ? esc_html(strtoupper($settings['conversion_format'])) : ''; ?></span> |
| 271 |
</div> |
| 272 |
<div class="metasync-feature-status-item"> |
| 273 |
<span class="metasync-feature-dot <?php echo !empty($settings['enable_lazy_loading']) ? 'active' : 'inactive'; ?>"></span> |
| 274 |
<span><?php esc_html_e('Lazy Loading', 'metasync'); ?></span> |
| 275 |
<span class="metasync-feature-format"><?php echo !empty($settings['enable_lazy_loading']) ? sprintf(esc_html__('Skip %d', 'metasync'), (int) $settings['lcp_skip_count']) : ''; ?></span> |
| 276 |
</div> |
| 277 |
<div class="metasync-feature-status-item"> |
| 278 |
<span class="metasync-feature-dot <?php echo !empty($settings['enable_dimension_injection']) ? 'active' : 'inactive'; ?>"></span> |
| 279 |
<span><?php esc_html_e('Dimension Injection', 'metasync'); ?></span> |
| 280 |
</div> |
| 281 |
</div> |
| 282 |
</div> |
| 283 |
|
| 284 |
<!-- Tips --> |
| 285 |
<div class="metasync-card metasync-warnings-card"> |
| 286 |
<div class="metasync-card-header"> |
| 287 |
<h3><?php esc_html_e('Performance Tips', 'metasync'); ?></h3> |
| 288 |
</div> |
| 289 |
<ul class="metasync-warnings-list"> |
| 290 |
<li> |
| 291 |
<span class="dashicons dashicons-performance" style="color: #10b981;"></span> |
| 292 |
<?php esc_html_e('WebP images are typically 25-35% smaller than JPEG with comparable quality.', 'metasync'); ?> |
| 293 |
</li> |
| 294 |
<li> |
| 295 |
<span class="dashicons dashicons-visibility" style="color: #3b82f6;"></span> |
| 296 |
<?php esc_html_e('Always keep LCP Skip Count at 2-3 to ensure hero images load immediately.', 'metasync'); ?> |
| 297 |
</li> |
| 298 |
<li> |
| 299 |
<span class="dashicons dashicons-layout" style="color: #f59e0b;"></span> |
| 300 |
<?php esc_html_e('Dimension injection prevents layout shifts (CLS) - a key Core Web Vital metric.', 'metasync'); ?> |
| 301 |
</li> |
| 302 |
<li> |
| 303 |
<span class="dashicons dashicons-info" style="color: #2271b1;"></span> |
| 304 |
<?php esc_html_e('Use "Alongside" strategy to keep originals as fallback for older browsers.', 'metasync'); ?> |
| 305 |
</li> |
| 306 |
</ul> |
| 307 |
</div> |
| 308 |
</div> |
| 309 |
</div> |
| 310 |
|
