← All changes | media-optimization/views/settings-tab.php +67 -29 2.6.5 → 2.7.2 View file →

		@@ -31,24 +31,39 @@
31	31	</div>
32	32
33	33	<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_conversion" <?php echo empty($settings['enable_conversion']) ? 'style="display:none;"' : ''; ?>>
34	34	<div class="metasync-field-row">
35		- <div class="metasync-field">
	35	+ <div class="metasync-field metasync-field--card">
36	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>
	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>
47	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>
48	63	</div>
49	64
50		- <div class="metasync-field">
	65	+ <div class="metasync-field metasync-field--card">
51	66	<label for="conversion_quality"><?php esc_html_e('Quality', 'metasync'); ?></label>
52	67	<div class="metasync-range-group">
53	68	<input type="range" name="metasync_media[conversion_quality]" id="conversion_quality"
54	69	value="<?php echo esc_attr((int) $settings['conversion_quality']); ?>"
		@@ -59,18 +74,20 @@
59	74	</div>
60	75	</div>
61	76
62	77	<div class="metasync-field-row">
63		- <div class="metasync-field">
	78	+ <div class="metasync-field metasync-field--card">
64	79	<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>
	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>
73	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>
74	91	<div class="metasync-strategy-warning" id="replace-strategy-warning" <?php echo $settings['conversion_strategy'] !== 'replace' ? 'style="display:none;"' : ''; ?>>
75	92	<span class="dashicons dashicons-warning"></span>
76	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>
		@@ -76,9 +93,10 @@
76	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>
77	94	</div>
78	95	</div>
79	96
80		- <div class="metasync-field">
	97	+ <div class="metasync-field metasync-field--card">
	98	+ <label><?php esc_html_e('Thumbnail Sizes', 'metasync'); ?></label>
81	99	<label class="metasync-checkbox-label">
82	100	<input type="checkbox" name="metasync_media[convert_existing_sizes]" value="1"
83	101	<?php checked(!empty($settings['convert_existing_sizes'])); ?>>
84	102	<span><?php esc_html_e('Convert all thumbnail sizes', 'metasync'); ?></span>
		@@ -85,8 +103,21 @@
85	103	</label>
86	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>
87	105	</div>
88	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>
89	120	</div>
90	121	</div>
91	122
92	123	<!-- Section: Smart Lazy Loading -->
		@@ -92,9 +123,9 @@
92	123	<!-- Section: Smart Lazy Loading -->
93	124	<div class="metasync-card">
94	125	<div class="metasync-card-header">
95	126	<div class="metasync-card-title-group">
96		- <h2><?php esc_html_e('Smart Lazy Loading', 'metasync'); ?></h2>
	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>
97	128	<span class="metasync-card-subtitle"><?php esc_html_e('Defer off-screen images and iframes for faster page loads', 'metasync'); ?></span>
98	129	</div>
99	130	<label class="metasync-toggle">
100	131	<input type="checkbox" name="metasync_media[enable_lazy_loading]" value="1" <?php checked(!empty($settings['enable_lazy_loading'])); ?>>
		@@ -103,10 +134,10 @@
103	134	</div>
104	135
105	136	<div class="metasync-card-body metasync-toggle-section" data-toggle="enable_lazy_loading" <?php echo empty($settings['enable_lazy_loading']) ? 'style="display:none;"' : ''; ?>>
106	137	<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>
	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>
109	140	<div class="metasync-number-group">
110	141	<input type="number" name="metasync_media[lcp_skip_count]" id="lcp_skip_count"
111	142	value="<?php echo esc_attr((int) $settings['lcp_skip_count']); ?>"
112	143	min="0" max="10" step="1">
		@@ -114,9 +145,10 @@
114	145	</div>
115	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>
116	147	</div>
117	148
118		- <div class="metasync-field">
	149	+ <div class="metasync-field metasync-field--card">
	150	+ <label><?php esc_html_e('Iframe Loading', 'metasync'); ?></label>
119	151	<label class="metasync-checkbox-label">
120	152	<input type="checkbox" name="metasync_media[lazy_load_iframes]" value="1"
121	153	<?php checked(!empty($settings['lazy_load_iframes'])); ?>>
122	154	<span><?php esc_html_e('Lazy load iframes', 'metasync'); ?></span>
		@@ -164,9 +196,9 @@
164	196
165	197	<div class="metasync-card-body">
166	198	<div class="metasync-field-row">
167	199	<div class="metasync-field">
168		- <label for="exclude_classes"><?php esc_html_e('Exclude by CSS Class', 'metasync'); ?></label>
	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>
169	201	<input type="text" name="metasync_media[exclude_classes]" id="exclude_classes"
170	202	value="<?php echo esc_attr($settings['exclude_classes']); ?>"
171	203	placeholder="no-lazy, skip-convert, custom-class"
172	204	class="metasync-text-input">
		@@ -173,9 +205,9 @@
173	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>
174	206	</div>
175	207
176	208	<div class="metasync-field">
177		- <label for="exclude_urls"><?php esc_html_e('Exclude by URL Pattern', 'metasync'); ?></label>
	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>
178	210	<input type="text" name="metasync_media[exclude_urls]" id="exclude_urls"
179	211	value="<?php echo esc_attr($settings['exclude_urls']); ?>"
180	212	placeholder="/logo, /brand, external-cdn.com"
181	213	class="metasync-text-input">
		@@ -250,9 +282,14 @@
250	282	<span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Supported', 'metasync'); ?>
251	283	</span>
252	284	<?php else: ?>
253	285	<span class="metasync-capability-badge metasync-badge-warning">
254		- <span class="dashicons dashicons-warning"></span> <?php esc_html_e('Not Supported', 'metasync'); ?>
	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	+ ?>
255	292	</span>
256	293	<?php endif; ?>
257	294	</div>
258	295	</div>
		@@ -271,8 +308,9 @@
271	308	</div>
272	309	<div class="metasync-feature-status-item">
273	310	<span class="metasync-feature-dot <?php echo !empty($settings['enable_lazy_loading']) ? 'active' : 'inactive'; ?>"></span>
274	311	<span><?php esc_html_e('Lazy Loading', 'metasync'); ?></span>
	312	+ <?php /* translators: %d: number of leading images to skip. */ ?>
275	313	<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	314	</div>
277	315	<div class="metasync-feature-status-item">
278	316	<span class="metasync-feature-dot <?php echo !empty($settings['enable_dimension_injection']) ? 'active' : 'inactive'; ?>"></span>