| 1 |
<?php if (!defined('ABSPATH')) die('No direct access allowed'); ?> |
| 2 |
<?php |
| 3 |
$fcp_link = 'https://getwpo.com/first-contentful-paint/'; |
| 4 |
$cls_link = 'https://getwpo.com/cumulative-layout-shift/'; |
| 5 |
?> |
| 6 |
|
| 7 |
<div class="wpo-fieldgroup wpo-first-child dimensions-options"> |
| 8 |
<div class="wpo-images-dimensions__premium-mask"> |
| 9 |
<a class="wpo-images-dimensions__premium-link" href="<?php echo esc_url($wp_optimize->premium_version_link);?>&utm_content=auto-add-image-dimensions" target="_blank"><?php esc_html_e('Auto add images dimensions with WP-Optimize Premium.', 'wp-optimize'); ?></a> |
| 10 |
</div> |
| 11 |
<p class="wpo-images-dimension-show-links"><?php |
| 12 |
// translators: %1$s - First Contentful Paint link, %2$s - Cumulative Layout Shift link (articles about core web vitals, FCP and CLS). |
| 13 |
printf(esc_html__('WP-Optimize will automatically detect images with missing width or height, and add those attributes for improving %1$s and %2$s.', 'wp-optimize'), |
| 14 |
// phpcs:disable |
| 15 |
// WordPress.Security.EscapeOutput.OutputNotEscaped - Output is already escaped |
| 16 |
$wp_optimize->wp_optimize_url($fcp_link, esc_html__('First Contentful Paint time', 'wp-optimize'), '', '', true), |
| 17 |
$wp_optimize->wp_optimize_url($cls_link, esc_html__('Cumulative Layout Shift', 'wp-optimize'), '', '', true)); |
| 18 |
// phpcs:enable |
| 19 |
?></p> |
| 20 |
<div class="switch-container"> |
| 21 |
<label class="switch"> |
| 22 |
<input name="images_dimensions" id="images_dimensions" class="dimensions-settings" type="checkbox"> |
| 23 |
<span class="slider round"></span> |
| 24 |
</label> |
| 25 |
<label for="images_dimensions"> |
| 26 |
<?php esc_html_e('Enable images dimensions', 'wp-optimize'); ?> |
| 27 |
</label> |
| 28 |
</div> |
| 29 |
<div> |
| 30 |
<p><?php esc_html_e('Skip image CSS classes', 'wp-optimize'); ?></p> |
| 31 |
<input type="text" name="image_dimensions_ignore_classes" id="image_dimensions_ignore_classes" value="<?php echo esc_attr($ignore_classes); ?>"> |
| 32 |
<p><small><?php |
| 33 |
esc_html_e('Enter the image class or classes comma-separated.', 'wp-optimize'); |
| 34 |
echo ' '; |
| 35 |
esc_html_e('Supports wildcards.', 'wp-optimize'); |
| 36 |
echo ' '; |
| 37 |
esc_html_e('Example: image-class1, image-class2, thumbnail*, ...', 'wp-optimize'); |
| 38 |
?> |
| 39 |
</small></p> |
| 40 |
|
| 41 |
</div> |
| 42 |
<p> |
| 43 |
<small><?php esc_html_e("For advanced users: use `data-no-image-dimensions` in image tags to bypass this feature.", 'wp-optimize'); ?></small> |
| 44 |
</p> |
| 45 |
</div> |
