| 1 |
<?php if (!defined('ABSPATH')) die('No direct access allowed'); ?> |
| 2 |
<?php |
| 3 |
$lazyload_options = $options->get_option('lazyload', array( |
| 4 |
'images' => false, |
| 5 |
'backgrounds' => false, |
| 6 |
'iframes' => false, |
| 7 |
'youtube_preview' => false, |
| 8 |
'skip_classes' => '', |
| 9 |
)); |
| 10 |
|
| 11 |
$read_more_link = 'https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/'; |
| 12 |
|
| 13 |
?> |
| 14 |
|
| 15 |
<div id="wpo_lazy_load_settings"> |
| 16 |
<h3 class="wpo-first-child"><?php esc_html_e('Lazy-load images', 'wp-optimize'); ?></h3> |
| 17 |
<div class="wpo-fieldgroup premium-only"> |
| 18 |
<p> |
| 19 |
<?php |
| 20 |
$message = __('Lazy-loading is a technique that defers loading of non-critical resources (images, video) at page load time.', 'wp-optimize'); |
| 21 |
$message .= ' '; |
| 22 |
$message .= __('Instead, these non-critical resources are loaded at the point they are needed (e.g. the user scrolls down to them).', 'wp-optimize'); |
| 23 |
echo esc_html($message); |
| 24 |
?> |
| 25 |
<br> |
| 26 |
<?php $wp_optimize->wp_optimize_url($read_more_link, __('Follow this link to read more about lazy-loading images and video', 'wp-optimize')); ?> |
| 27 |
</p> |
| 28 |
<ul> |
| 29 |
<li><label><input type="checkbox" name="lazyload[images]" <?php checked($lazyload_options['images']); ?> disabled /><?php esc_html_e('Images', 'wp-optimize'); ?></label></li> |
| 30 |
<li><label><input type="checkbox" name="lazyload[backgrounds]" <?php checked($lazyload_options['backgrounds']); ?> disabled /><?php esc_html_e('Background images', 'wp-optimize'); ?></label></li> |
| 31 |
<li><label><input type="checkbox" name="lazyload[iframes]" <?php checked($lazyload_options['iframes']); ?> disabled /><?php esc_html_e('Iframes and Videos', 'wp-optimize'); ?></label></li> |
| 32 |
<li> |
| 33 |
<label> <input type="checkbox" name="lazyload[youtube_preview]" <?php checked($lazyload_options['youtube_preview']); ?> disabled /><?php esc_html_e('Replace YouTube iframe with thumbnail image', 'wp-optimize'); ?> |
| 34 |
</label> |
| 35 |
<span tabindex="0" data-tooltip="<?php esc_attr_e('Improves page loading time when YouTube videos are present on the page.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span> |
| 36 |
</li> |
| 37 |
</ul> |
| 38 |
|
| 39 |
<p> |
| 40 |
<?php esc_html_e('Skip image classes', 'wp-optimize');?><br> |
| 41 |
<input type="text" name="lazyload[skip_classes]" id="wpo_lazyload_skip_classes" value="<?php echo esc_attr($lazyload_options['skip_classes']); ?>" disabled readonly /><br> |
| 42 |
<?php |
| 43 |
$message = __('Enter the image class or classes comma-separated.', 'wp-optimize'); |
| 44 |
$message .= ' '; |
| 45 |
$message .= __('Supports wildcards.', 'wp-optimize'); |
| 46 |
$message .= ' '; |
| 47 |
$message .= __('Example: image-class1, image-class2, thumbnail*, ...', 'wp-optimize'); |
| 48 |
?> |
| 49 |
<small><?php echo esc_html($message); ?></small> |
| 50 |
</p> |
| 51 |
|
| 52 |
<div class="wpo-unused-image-sizes__premium-mask"> |
| 53 |
<a class="wpo-unused-images__premium-link" href="<?php echo esc_url($wp_optimize->premium_version_link);?>&utm_content=enable-lazy-loading" target="_blank"><?php esc_html_e('Enable Lazy-loading with WP-Optimize Premium.', 'wp-optimize'); ?></a> |
| 54 |
</div> |
| 55 |
</div> |
| 56 |
</div> |
