metasync / media-optimization / views / settings-tab.php

settings-tab.php in Search Atlas SEO – OTTO AI SEO Automation for WordPress trunk, at media-optimization/views/settings-tab.php

347 lines 24.0 KB

Raw Download Zip

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 metasync-field--card">
36	<label for="conversion_format"><?php esc_html_e('Target Format', 'metasync'); ?></label>
37	<div class="metasync-select-wrap">
38	<select name="metasync_media[conversion_format]" id="conversion_format">
39	<option value="webp" <?php selected($settings['conversion_format'], 'webp'); ?>
40	<?php disabled(!$capabilities['webp_support']); ?>>
41	WebP <?php echo !$capabilities['webp_support'] ? esc_html__('(not supported)', 'metasync') : ''; ?>
42	</option>
43	<?php
44	// Distinguish "this server can't encode AVIF" from "this PHP
45	// version can't measure it", so the reason is actionable.
46	$avif_needs_newer_php = PHP_VERSION_ID < Metasync_Media_Settings::AVIF_MIN_PHP_VERSION_ID;
47	?>
48	<option value="avif" <?php selected($settings['conversion_format'], 'avif'); ?>
49	<?php disabled(!$capabilities['avif_support']); ?>>
50	AVIF <?php
51	if ($capabilities['avif_support']) {
52	echo '';
53	} elseif ($avif_needs_newer_php) {
54	echo esc_html__('(requires PHP 8.2 or later)', 'metasync');
55	} else {
56	echo esc_html__('(not supported)', 'metasync');
57	}
58	?>
59	</option>
60	</select>
61	</div>
62	<p class="metasync-field-description"><?php esc_html_e('WebP has broader browser support. AVIF offers better compression but requires newer browsers.', 'metasync'); ?></p>
63	</div>
64
65	<div class="metasync-field metasync-field--card">
66	<label for="conversion_quality"><?php esc_html_e('Quality', 'metasync'); ?></label>
67	<div class="metasync-range-group">
68	<input type="range" name="metasync_media[conversion_quality]" id="conversion_quality"
69	value="<?php echo esc_attr((int) $settings['conversion_quality']); ?>"
70	min="1" max="100" step="1">
71	<span class="metasync-range-value" id="quality-value"><?php echo esc_html((int) $settings['conversion_quality']); ?></span>
72	</div>
73	<p class="metasync-field-description"><?php esc_html_e('Lower values = smaller files. Recommended: 75-85 for best balance.', 'metasync'); ?></p>
74	</div>
75	</div>
76
77	<div class="metasync-field-row">
78	<div class="metasync-field metasync-field--card">
79	<label for="conversion_strategy"><?php esc_html_e('Conversion Strategy', 'metasync'); ?></label>
80	<div class="metasync-select-wrap">
81	<select name="metasync_media[conversion_strategy]" id="conversion_strategy">
82	<option value="alongside" <?php selected($settings['conversion_strategy'], 'alongside'); ?>>
83	<?php esc_html_e('Store alongside original (serve via <picture>)', 'metasync'); ?>
84	</option>
85	<option value="replace" <?php selected($settings['conversion_strategy'], 'replace'); ?>>
86	<?php esc_html_e('Replace original file (Not Recommended)', 'metasync'); ?>
87	</option>
88	</select>
89	</div>
90	<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>
91	<div class="metasync-strategy-warning" id="replace-strategy-warning" <?php echo $settings['conversion_strategy'] !== 'replace' ? 'style="display:none;"' : ''; ?>>
92	<span class="dashicons dashicons-warning"></span>
93	<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>
94	</div>
95	</div>
96
97	<div class="metasync-field metasync-field--card">
98	<label><?php esc_html_e('Thumbnail Sizes', 'metasync'); ?></label>
99	<label class="metasync-checkbox-label">
100	<input type="checkbox" name="metasync_media[convert_existing_sizes]" value="1"
101	<?php checked(!empty($settings['convert_existing_sizes'])); ?>>
102	<span><?php esc_html_e('Convert all thumbnail sizes', 'metasync'); ?></span>
103	</label>
104	<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>
105	</div>
106	</div>
107
108	<div class="metasync-field-row">
109	<div class="metasync-field metasync-field--card">
110	<label for="max_image_dimensions"><?php esc_html_e('Max Image Dimensions', 'metasync'); ?><?php Metasync::render_tooltip_icon('media_max_image_dimensions', 'Automatically shrinks any uploaded image wider or taller than this, to save space and speed up your site. This permanently resizes the file according to your Conversion Strategy setting.'); ?></label>
111	<div class="metasync-number-group">
112	<input type="number" name="metasync_media[max_image_dimensions]" id="max_image_dimensions"
113	value="<?php echo esc_attr((int) ($settings['max_image_dimensions'] ?? 2560)); ?>"
114	min="0" max="10000" step="1">
115	<span class="metasync-number-suffix"><?php esc_html_e('px', 'metasync'); ?></span>
116	</div>
117	<p class="metasync-field-description"><?php esc_html_e('Downscale images whose width or height exceeds this limit before converting (aspect ratio preserved). Caps memory use and output size for oversized uploads. Set to 0 to keep original dimensions.', 'metasync'); ?></p>
118	</div>
119	</div>
120	</div>
121	</div>
122
123	<!-- Section: Smart Lazy Loading -->
124	<div class="metasync-card">
125	<div class="metasync-card-header">
126	<div class="metasync-card-title-group">
127	<h2><?php esc_html_e('Smart Lazy Loading', 'metasync'); ?><?php Metasync::render_tooltip_icon('media_enable_lazy_loading', 'Delays loading images until a visitor scrolls near them, speeding up initial page load. Safe to leave on for most sites.'); ?></h2>
128	<span class="metasync-card-subtitle"><?php esc_html_e('Defer off-screen images and iframes for faster page loads', 'metasync'); ?></span>
129	</div>
130	<label class="metasync-toggle">
131	<input type="checkbox" name="metasync_media[enable_lazy_loading]" value="1" <?php checked(!empty($settings['enable_lazy_loading'])); ?>>
132	<span class="metasync-toggle-slider"></span>
133	</label>
134	</div>
135
136	<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_lazy_loading" <?php echo empty($settings['enable_lazy_loading']) ? 'style="display:none;"' : ''; ?>>
137	<div class="metasync-field-row">
138	<div class="metasync-field metasync-field--card">
139	<label for="lcp_skip_count"><?php esc_html_e('LCP Protection - Skip Count', 'metasync'); ?><?php Metasync::render_tooltip_icon('media_lcp_skip_count', "How many of the first images on a page are loaded immediately instead of lazily — these are usually the ones visible without scrolling. 'LCP' stands for Largest Contentful Paint, a page-speed metric; leave at the default unless a speed test flags your hero image."); ?></label>
140	<div class="metasync-number-group">
141	<input type="number" name="metasync_media[lcp_skip_count]" id="lcp_skip_count"
142	value="<?php echo esc_attr((int) $settings['lcp_skip_count']); ?>"
143	min="0" max="10" step="1">
144	<span class="metasync-number-suffix"><?php esc_html_e('images', 'metasync'); ?></span>
145	</div>
146	<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>
147	</div>
148
149	<div class="metasync-field metasync-field--card">
150	<label><?php esc_html_e('Iframe Loading', 'metasync'); ?></label>
151	<label class="metasync-checkbox-label">
152	<input type="checkbox" name="metasync_media[lazy_load_iframes]" value="1"
153	<?php checked(!empty($settings['lazy_load_iframes'])); ?>>
154	<span><?php esc_html_e('Lazy load iframes', 'metasync'); ?></span>
155	</label>
156	<p class="metasync-field-description"><?php esc_html_e('Also apply lazy loading to iframe elements (YouTube embeds, Google Maps, etc.).', 'metasync'); ?></p>
157	</div>
158	</div>
159	</div>
160	</div>
161
162	<!-- Section: Automatic Dimension Injection -->
163	<div class="metasync-card">
164	<div class="metasync-card-header">
165	<div class="metasync-card-title-group">
166	<h2><?php esc_html_e('Automatic Dimension Injection', 'metasync'); ?></h2>
167	<span class="metasync-card-subtitle"><?php esc_html_e('Prevent layout shifts by adding missing width/height attributes', 'metasync'); ?></span>
168	</div>
169	<label class="metasync-toggle">
170	<input type="checkbox" name="metasync_media[enable_dimension_injection]" value="1" <?php checked(!empty($settings['enable_dimension_injection'])); ?>>
171	<span class="metasync-toggle-slider"></span>
172	</label>
173	</div>
174
175	<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_dimension_injection" <?php echo empty($settings['enable_dimension_injection']) ? 'style="display:none;"' : ''; ?>>
176	<div class="metasync-dimension-info">
177	<div class="metasync-info-box">
178	<span class="dashicons dashicons-info"></span>
179	<div>
180	<strong><?php esc_html_e('How it works', 'metasync'); ?></strong>
181	<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>
182	</div>
183	</div>
184	</div>
185	</div>
186	</div>
187
188	<!-- Section: Exclusions -->
189	<div class="metasync-card">
190	<div class="metasync-card-header">
191	<div class="metasync-card-title-group">
192	<h2><?php esc_html_e('Exclusions', 'metasync'); ?></h2>
193	<span class="metasync-card-subtitle"><?php esc_html_e('Skip specific images from optimization', 'metasync'); ?></span>
194	</div>
195	</div>
196
197	<div class="metasync-card-body">
198	<div class="metasync-field-row">
199	<div class="metasync-field">
200	<label for="exclude_classes"><?php esc_html_e('Exclude by CSS Class', 'metasync'); ?><?php Metasync::render_tooltip_icon('media_exclude_classes', 'Skip lazy-loading and optimization for images matching this class or URL — use for logos or above-the-fold images you want to load instantly.'); ?></label>
201	<input type="text" name="metasync_media[exclude_classes]" id="exclude_classes"
202	value="<?php echo esc_attr($settings['exclude_classes']); ?>"
203	placeholder="no-lazy, skip-convert, custom-class"
204	class="metasync-text-input">
205	<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>
206	</div>
207
208	<div class="metasync-field">
209	<label for="exclude_urls"><?php esc_html_e('Exclude by URL Pattern', 'metasync'); ?><?php Metasync::render_tooltip_icon('media_exclude_urls', 'Skip lazy-loading and optimization for images matching this class or URL — use for logos or above-the-fold images you want to load instantly.'); ?></label>
210	<input type="text" name="metasync_media[exclude_urls]" id="exclude_urls"
211	value="<?php echo esc_attr($settings['exclude_urls']); ?>"
212	placeholder="/logo, /brand, external-cdn.com"
213	class="metasync-text-input">
214	<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>
215	</div>
216	</div>
217	</div>
218	</div>
219
220	<!-- Save Button -->
221	<div class="metasync-form-actions">
222	<button type="submit" class="button button-primary button-large" id="save-media-settings">
223	<span class="dashicons dashicons-saved" style="margin-top: 4px;"></span>
224	<?php esc_html_e('Save Settings', 'metasync'); ?>
225	</button>
226	<button type="button" class="button button-secondary" id="reset-media-settings">
227	<span class="dashicons dashicons-image-rotate" style="margin-top: 4px;"></span>
228	<?php esc_html_e('Reset to Defaults', 'metasync'); ?>
229	</button>
230	</div>
231	</form>
232	</div>
233
234	<!-- Sidebar -->
235	<div class="metasync-media-sidebar">
236	<!-- Server Capabilities -->
237	<div class="metasync-card">
238	<div class="metasync-card-header">
239	<h3><?php esc_html_e('Server Capabilities', 'metasync'); ?></h3>
240	</div>
241	<div class="metasync-capabilities-list">
242	<div class="metasync-capability-item">
243	<span class="metasync-capability-label"><?php esc_html_e('Imagick Extension', 'metasync'); ?></span>
244	<?php if ($capabilities['imagick']): ?>
245	<span class="metasync-capability-badge metasync-badge-success">
246	<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Available', 'metasync'); ?>
247	</span>
248	<?php else: ?>
249	<span class="metasync-capability-badge metasync-badge-warning">
250	<span class="dashicons dashicons-warning"></span> <?php esc_html_e('Not Available', 'metasync'); ?>
251	</span>
252	<?php endif; ?>
253	</div>
254	<div class="metasync-capability-item">
255	<span class="metasync-capability-label"><?php esc_html_e('GD Extension', 'metasync'); ?></span>
256	<?php if ($capabilities['gd']): ?>
257	<span class="metasync-capability-badge metasync-badge-success">
258	<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Available', 'metasync'); ?>
259	</span>
260	<?php else: ?>
261	<span class="metasync-capability-badge metasync-badge-warning">
262	<span class="dashicons dashicons-warning"></span> <?php esc_html_e('Not Available', 'metasync'); ?>
263	</span>
264	<?php endif; ?>
265	</div>
266	<div class="metasync-capability-item">
267	<span class="metasync-capability-label"><?php esc_html_e('WebP Support', 'metasync'); ?></span>
268	<?php if ($capabilities['webp_support']): ?>
269	<span class="metasync-capability-badge metasync-badge-success">
270	<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Supported', 'metasync'); ?>
271	</span>
272	<?php else: ?>
273	<span class="metasync-capability-badge metasync-badge-error">
274	<span class="dashicons dashicons-no"></span> <?php esc_html_e('Not Supported', 'metasync'); ?>
275	</span>
276	<?php endif; ?>
277	</div>
278	<div class="metasync-capability-item">
279	<span class="metasync-capability-label"><?php esc_html_e('AVIF Support', 'metasync'); ?></span>
280	<?php if ($capabilities['avif_support']): ?>
281	<span class="metasync-capability-badge metasync-badge-success">
282	<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Supported', 'metasync'); ?>
283	</span>
284	<?php else: ?>
285	<span class="metasync-capability-badge metasync-badge-warning">
286	<span class="dashicons dashicons-warning"></span>
287	<?php
288	echo PHP_VERSION_ID < Metasync_Media_Settings::AVIF_MIN_PHP_VERSION_ID
289	? esc_html__('Requires PHP 8.2+', 'metasync')
290	: esc_html__('Not Supported', 'metasync');
291	?>
292	</span>
293	<?php endif; ?>
294	</div>
295	</div>
296	</div>
297
298	<!-- Feature Status -->
299	<div class="metasync-card">
300	<div class="metasync-card-header">
301	<h3><?php esc_html_e('Active Features', 'metasync'); ?></h3>
302	</div>
303	<div class="metasync-feature-status-list">
304	<div class="metasync-feature-status-item">
305	<span class="metasync-feature-dot <?php echo !empty($settings['enable_conversion']) ? 'active' : 'inactive'; ?>"></span>
306	<span><?php esc_html_e('Image Conversion', 'metasync'); ?></span>
307	<span class="metasync-feature-format"><?php echo !empty($settings['enable_conversion']) ? esc_html(strtoupper($settings['conversion_format'])) : ''; ?></span>
308	</div>
309	<div class="metasync-feature-status-item">
310	<span class="metasync-feature-dot <?php echo !empty($settings['enable_lazy_loading']) ? 'active' : 'inactive'; ?>"></span>
311	<span><?php esc_html_e('Lazy Loading', 'metasync'); ?></span>
312	<span class="metasync-feature-format"><?php echo !empty($settings['enable_lazy_loading']) ? sprintf(esc_html__('Skip %d', 'metasync'), (int) $settings['lcp_skip_count']) : ''; ?></span>
313	</div>
314	<div class="metasync-feature-status-item">
315	<span class="metasync-feature-dot <?php echo !empty($settings['enable_dimension_injection']) ? 'active' : 'inactive'; ?>"></span>
316	<span><?php esc_html_e('Dimension Injection', 'metasync'); ?></span>
317	</div>
318	</div>
319	</div>
320
321	<!-- Tips -->
322	<div class="metasync-card metasync-warnings-card">
323	<div class="metasync-card-header">
324	<h3><?php esc_html_e('Performance Tips', 'metasync'); ?></h3>
325	</div>
326	<ul class="metasync-warnings-list">
327	<li>
328	<span class="dashicons dashicons-performance" style="color: #10b981;"></span>
329	<?php esc_html_e('WebP images are typically 25-35% smaller than JPEG with comparable quality.', 'metasync'); ?>
330	</li>
331	<li>
332	<span class="dashicons dashicons-visibility" style="color: #3b82f6;"></span>
333	<?php esc_html_e('Always keep LCP Skip Count at 2-3 to ensure hero images load immediately.', 'metasync'); ?>
334	</li>
335	<li>
336	<span class="dashicons dashicons-layout" style="color: #f59e0b;"></span>
337	<?php esc_html_e('Dimension injection prevents layout shifts (CLS) - a key Core Web Vital metric.', 'metasync'); ?>
338	</li>
339	<li>
340	<span class="dashicons dashicons-info" style="color: #2271b1;"></span>
341	<?php esc_html_e('Use "Alongside" strategy to keep originals as fallback for older browsers.', 'metasync'); ?>
342	</li>
343	</ul>
344	</div>
345	</div>
346	</div>
347