| @@ -39,11 +39,24 @@ | ||
| 39 | 39 | <option value="webp" <?php selected($settings['conversion_format'], 'webp'); ?> |
| 40 | 40 | <?php disabled(!$capabilities['webp_support']); ?>> |
| 41 | 41 | WebP <?php echo !$capabilities['webp_support'] ? esc_html__('(not supported)', 'metasync') : ''; ?> |
| 42 | 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 | + ?> | |
| 43 | 48 | <option value="avif" <?php selected($settings['conversion_format'], 'avif'); ?> |
| 44 | 49 | <?php disabled(!$capabilities['avif_support']); ?>> |
| 45 | - AVIF <?php echo !$capabilities['avif_support'] ? esc_html__('(not supported)', 'metasync') : ''; ?> | |
| 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 | + ?> | |
| 46 | 59 | </option> |
| 47 | 60 | </select> |
| 48 | 61 | </div> |
| 49 | 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> |
| @@ -90,8 +103,21 @@ | ||
| 90 | 103 | </label> |
| 91 | 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> |
| 92 | 105 | </div> |
| 93 | 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> | |
| 94 | 120 | </div> |
| 95 | 121 | </div> |
| 96 | 122 | |
| 97 | 123 | <!-- Section: Smart Lazy Loading --> |
| @@ -97,9 +123,9 @@ | ||
| 97 | 123 | <!-- Section: Smart Lazy Loading --> |
| 98 | 124 | <div class="metasync-card"> |
| 99 | 125 | <div class="metasync-card-header"> |
| 100 | 126 | <div class="metasync-card-title-group"> |
| 101 | - <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> | |
| 102 | 128 | <span class="metasync-card-subtitle"><?php esc_html_e('Defer off-screen images and iframes for faster page loads', 'metasync'); ?></span> |
| 103 | 129 | </div> |
| 104 | 130 | <label class="metasync-toggle"> |
| 105 | 131 | <input type="checkbox" name="metasync_media[enable_lazy_loading]" value="1" <?php checked(!empty($settings['enable_lazy_loading'])); ?>> |
| @@ -109,9 +135,9 @@ | ||
| 109 | 135 | |
| 110 | 136 | <div class="metasync-card-body metasync-toggle-section" data-toggle="enable_lazy_loading" <?php echo empty($settings['enable_lazy_loading']) ? 'style="display:none;"' : ''; ?>> |
| 111 | 137 | <div class="metasync-field-row"> |
| 112 | 138 | <div class="metasync-field metasync-field--card"> |
| 113 | - <label for="lcp_skip_count"><?php esc_html_e('LCP Protection - Skip Count', 'metasync'); ?></label> | |
| 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> | |
| 114 | 140 | <div class="metasync-number-group"> |
| 115 | 141 | <input type="number" name="metasync_media[lcp_skip_count]" id="lcp_skip_count" |
| 116 | 142 | value="<?php echo esc_attr((int) $settings['lcp_skip_count']); ?>" |
| 117 | 143 | min="0" max="10" step="1"> |
| @@ -170,9 +196,9 @@ | ||
| 170 | 196 | |
| 171 | 197 | <div class="metasync-card-body"> |
| 172 | 198 | <div class="metasync-field-row"> |
| 173 | 199 | <div class="metasync-field"> |
| 174 | - <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> | |
| 175 | 201 | <input type="text" name="metasync_media[exclude_classes]" id="exclude_classes" |
| 176 | 202 | value="<?php echo esc_attr($settings['exclude_classes']); ?>" |
| 177 | 203 | placeholder="no-lazy, skip-convert, custom-class" |
| 178 | 204 | class="metasync-text-input"> |
| @@ -179,9 +205,9 @@ | ||
| 179 | 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> |
| 180 | 206 | </div> |
| 181 | 207 | |
| 182 | 208 | <div class="metasync-field"> |
| 183 | - <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> | |
| 184 | 210 | <input type="text" name="metasync_media[exclude_urls]" id="exclude_urls" |
| 185 | 211 | value="<?php echo esc_attr($settings['exclude_urls']); ?>" |
| 186 | 212 | placeholder="/logo, /brand, external-cdn.com" |
| 187 | 213 | class="metasync-text-input"> |
| @@ -256,9 +282,14 @@ | ||
| 256 | 282 | <span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e('Supported', 'metasync'); ?> |
| 257 | 283 | </span> |
| 258 | 284 | <?php else: ?> |
| 259 | 285 | <span class="metasync-capability-badge metasync-badge-warning"> |
| 260 | - <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 | + ?> | |
| 261 | 292 | </span> |
| 262 | 293 | <?php endif; ?> |
| 263 | 294 | </div> |
| 264 | 295 | </div> |
| @@ -277,8 +308,9 @@ | ||
| 277 | 308 | </div> |
| 278 | 309 | <div class="metasync-feature-status-item"> |
| 279 | 310 | <span class="metasync-feature-dot <?php echo !empty($settings['enable_lazy_loading']) ? 'active' : 'inactive'; ?>"></span> |
| 280 | 311 | <span><?php esc_html_e('Lazy Loading', 'metasync'); ?></span> |
| 312 | + <?php /* translators: %d: number of leading images to skip. */ ?> | |
| 281 | 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> |
| 282 | 314 | </div> |
| 283 | 315 | <div class="metasync-feature-status-item"> |
| 284 | 316 | <span class="metasync-feature-dot <?php echo !empty($settings['enable_dimension_injection']) ? 'active' : 'inactive'; ?>"></span> |