searchpro / admin / tabs / media-optimization.php

media-optimization.php in BerqWP – All-In-One Optimization for Core Web Vitals, Cache, CDN, Images, CSS & JavaScript 4.0.17, at admin/tabs/media-optimization.php

144 lines 7.1 KB

Raw Download Zip

1	<?php
2	if (!defined('ABSPATH'))
3	exit;
4
5	$exclude_lazy_load = get_option('berqwp_exclude_lazy_load_images', []);
6	$exclude_lazy_load_lines = implode("\n", $exclude_lazy_load);
7	?>
8	<div id="media-optimization" <?php bwp_is_tab('media-optimization'); ?>>
9	<h2 class="berq-tab-title"><?php esc_html_e('Media Optimization', 'searchpro'); ?></h2>
10	<div class="berq-info-box berq-setting-group">
11	<div class="group-container">
12	<h3 class="berq-box-title <?php echo !$berqwp_can_use_cloud ? 'cloud-exclusive' : ''; ?>">
13	<?php esc_html_e('Convert Images to WebP', 'searchpro'); ?>
14	</h3>
15	<div class="berq-box-content berq-setting-toggle">
16	<div class="berq-option-content">
17	<p>
18	<?php esc_html_e("Extract and inline the CSS needed to render above-the-fold content instantly, then load remaining CSS based on the \"CSS Delivery Method\" setting.", 'searchpro'); ?>
19	</p>
20	</div>
21	<?php berqwp_render_toggle('berqwp_enable_webp', get_option('berqwp_enable_webp')); ?>
22	</div>
23	<table class="berq-image-settings">
24	<tr>
25	<td>
26	<p><?php esc_html_e('Max image width:', 'searchpro'); ?></p>
27	</td>
28	<td><input type="number" min="0" name="berqwp_webp_max_width"
29	value="<?php echo esc_attr(get_option('berqwp_webp_max_width')); ?>" style="width:100px">
30	px</td>
31	</tr>
32	<tr>
33	<td>
34	<p><?php esc_html_e('Image quality:', 'searchpro'); ?></p>
35	</td>
36	<td><input type="number" min="0" max="100" name="berqwp_webp_quality"
37	value="<?php echo esc_attr(get_option('berqwp_webp_quality')); ?>" style="width:100px"> %
38	</td>
39	</tr>
40	</table>
41	</div>
42	<div class="group-container">
43	<h3 class="berq-box-title <?php echo !$berqwp_can_use_cloud ? 'cloud-exclusive' : ''; ?>">
44	<?php esc_html_e('Fluid Images', 'searchpro'); ?>
45	</h3>
46	<div class="berq-box-content berq-setting-toggle">
47	<div class="berq-option-content">
48	<p>
49	<?php esc_html_e("Automatically serve correctly sized, retina-ready images in AVIF or WebP format based on the visitor's screen size and browser support.", 'searchpro'); ?>
50	</p>
51	</div>
52	<?php
53	if ( !(!empty($this->key_response->product_ref) && $this->key_response->product_ref == 'AppSumo Deal' && !get_option('berqwp_can_use_fluid_images')) ) {
54	berqwp_render_toggle('berqwp_fluid_images', get_option('berqwp_fluid_images'));
55	}
56	?>
57	</div>
58
59	<?php if (!empty($this->key_response->product_ref) && $this->key_response->product_ref == 'AppSumo Deal' && !get_option('berqwp_can_use_fluid_images')) { ?>
60	<ul>
61	<li><?php esc_html_e('Unlimited Websites', 'searchpro'); ?></li>
62	<li><?php esc_html_e('Unlimited CDN Bandwidth', 'searchpro'); ?></li>
63	</ul>
64	<a href="https://berqwp.com/addons/" target="_blank" class="fluid-images-signup">Get started - $5/month</a>
65
66	<?php } ?>
67	</div>
68	<div class="group-container">
69	<h3 class="berq-box-title">
70	<?php esc_html_e('Lazy Load Images', 'searchpro'); ?>
71	</h3>
72	<div class="berq-box-content berq-setting-toggle">
73	<div class="berq-option-content">
74	<p>
75	<?php esc_html_e("Load only the images visible on screen, then load the rest as the user scrolls.", 'searchpro'); ?>
76	</p>
77	</div>
78	<?php berqwp_render_toggle('berqwp_image_lazyloading', get_option('berqwp_image_lazyloading')); ?>
79	</div>
80	</div>
81	<div class="group-container">
82	<h3 class="berq-box-title">
83	<?php esc_html_e('Exclude Lazy Load', 'searchpro'); ?>
84	</h3>
85	<div class="berq-box-content">
86	<p>
87	<?php esc_html_e('Enter URLs, filenames, or keywords to exclude from the image lazy loading. Enter one per line.', 'searchpro'); ?>
88	</p>
89	<textarea name="berqwp_exclude_lazy_load_images" cols="30" rows="10"><?php echo esc_textarea($exclude_lazy_load_lines); ?></textarea>
90	</div>
91	</div>
92
93	</div>
94
95	<div class="berq-info-box berq-setting-group">
96	<div class="group-container">
97	<h3 class="berq-box-title">
98	<?php esc_html_e('Lazy Load Videos', 'searchpro'); ?>
99	</h3>
100	<div class="berq-box-content berq-setting-toggle">
101	<div class="berq-option-content">
102	<p>
103	<?php esc_html_e("Load videos only when they enter the viewport, while videos above the fold load immediately.", 'searchpro'); ?>
104	</p>
105	</div>
106	<?php berqwp_render_toggle('berqwp_lazy_load_videos', get_option('berqwp_lazy_load_videos')); ?>
107	</div>
108	</div>
109	<div class="group-container">
110	<h3 class="berq-box-title">
111	<?php esc_html_e('Lazy Load Iframes', 'searchpro'); ?>
112	</h3>
113	<div class="berq-box-content berq-setting-toggle">
114	<div class="berq-option-content">
115	<p>
116	<?php esc_html_e("Load iframes (like YouTube embeds, Google Maps) only when they enter the viewport, while iframes above the fold load immediately.", 'searchpro'); ?>
117	</p>
118	</div>
119	<?php berqwp_render_toggle('berqwp_lazyload_youtube_embed', get_option('berqwp_lazyload_youtube_embed')); ?>
120	</div>
121	</div>
122	<div class="group-container">
123	<h3 class="berq-box-title">
124	<?php esc_html_e('Add Poster to YouTube Embeds', 'searchpro'); ?>
125	</h3>
126	<div class="berq-box-content berq-setting-toggle">
127	<div class="berq-option-content">
128	<p>
129	<?php esc_html_e("Automatically use the video's thumbnail as a placeholder until the embed loads.", 'searchpro'); ?>
130	</p>
131	</div>
132	<?php berqwp_render_toggle('berqwp_preload_yt_poster', get_option('berqwp_preload_yt_poster')); ?>
133	</div>
134	</div>
135
136	</div>
137	<button type="submit" class="berqwp-save"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"
138	xmlns="http://www.w3.org/2000/svg">
139	<path d="M4.16663 10.8333L7.49996 14.1667L15.8333 5.83334" stroke="white" stroke-width="2"
140	stroke-linecap="round" stroke-linejoin="round" />
141	</svg>
142	<?php esc_html_e('Save changes', 'searchpro'); ?></button>
143	</div>
144