PluginProbe
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance / 4.7.0
WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance v4.7.0
4.7.0 4.6.1 4.6.0 4.5.5 4.5.4 4.5.3 4.5.2 3.2.20 3.2.21 3.2.22 3.2.3 3.2.5 3.2.6 3.2.7 3.2.9 3.3.0 3.3.1 3.3.2 3.4.0 3.4.1 3.4.2 3.5.0 3.6.0 3.7.0 3.7.1 All 111 releases
← All changes | templates/images/smush.php +25 -98 3.3.1 → 4.7.0 View file →
@@ -1,24 +1,20 @@
1 -<?php if (!defined('WPO_VERSION')) die('No direct access allowed'); ?>
1 +<?php if (!defined('ABSPATH')) die('No direct access allowed'); ?>
2 2 <div id="wpo_smush_settings">
3 3 <div class="wpo-info">
4 4 <a class="wpo-info__trigger" href="#"><span class="dashicons dashicons-sos"></span> <?php esc_html_e('How to use the image compression feature', 'wp-optimize'); ?> <span class="wpo-info__close"><?php esc_html_e('Close', 'wp-optimize'); ?></span></a>
5 5 <div class="wpo-info__content">
6 - <p><strong><?php esc_html_e('Not sure how to use the image compression feature?', 'wp-optimize'); ?></strong> <br><?php esc_html_e('Watch our howto video below.', 'wp-optimize'); ?></p>
6 + <p><strong><?php esc_html_e('Not sure how to use the image compression feature?', 'wp-optimize'); ?></strong> <br><?php esc_html_e('Watch our how to video below.', 'wp-optimize'); ?></p>
7 7 <div class="wpo-video-preview">
8 - <a href="https://vimeo.com/333938451" data-embed="https://player.vimeo.com/video/333938451?color=df6926&title=0&byline=0&portrait=0" target="_blank"><img src="<?php echo esc_url(trailingslashit(WPO_PLUGIN_URL) . 'images/notices/image-compression-video-preview.png'); ?>" alt="<?php esc_attr_e('Video preview', 'wp-optimize'); ?>" /></a>
8 + <a href="https://vimeo.com/1014326354" data-embed="https://player.vimeo.com/video/1014326354?color=df6926&title=0&byline=0&portrait=0" target="_blank"><img src="<?php echo esc_url(trailingslashit(WPO_PLUGIN_URL) . 'images/notices/video-thumb.jpg'); ?>" alt="<?php esc_attr_e('Video preview', 'wp-optimize'); ?>" /></a>
9 9 </div>
10 - <small>(<?php esc_html_e('Loads a video hosted on vimeo.com', 'wp-optimize'); ?>) - <?php $wp_optimize->wp_optimize_url('https://vimeo.com/333938451', __('Open the video in a new window', 'wp-optimize')); ?></small>
10 + <small>(<?php esc_html_e('Loads a video hosted on vimeo.com', 'wp-optimize'); ?>) - <?php $wp_optimize->wp_optimize_url('https://vimeo.com/1014326354', __('Open the video in a new window', 'wp-optimize')); ?></small>
11 11 </div>
12 12 </div>
13 13 <p>
14 14 <?php
15 - $message = __('Note: Currently this feature uses third party services from reSmush.it.', 'wp-optimize');
16 - $message .= ' ';
17 - $message .= __('The performance of this free image compression service may be limited for large workloads.', 'wp-optimize');
18 - $message .= ' ';
19 - $message .= __('We are working on a premium service.', 'wp-optimize');
20 - echo esc_html($message);
15 + // translators: %s is a link to reSmush.it website
16 + printf(esc_html__('Note: Image optimization feature is offered via %s free API', 'wp-optimize'), '<a href="https://resmush.it/" target="_blank">reSmush.it</a>');
21 17 ?>
22 18 </p>
23 19 <div class="wpo-fieldgroup">
24 20 <div class="autosmush wpo-fieldgroup__subgroup<?php echo $smush_options['autosmush'] ? ' active' : ''; ?>">
@@ -26,10 +22,10 @@
26 22 <input type="checkbox" id="smush-automatically" <?php checked($smush_options['autosmush']); ?> >
27 23 <span class="slider round"></span>
28 24 </label>
29 25 <label for="smush-automatically"><?php esc_html_e('Automatically compress newly-added images', 'wp-optimize');?>
30 - <span tabindex="0" data-tooltip="<?php echo esc_attr__('The images will be added to a background queue, which will start automatically within the next hour.', 'wp-optimize').' '.esc_attr__('This prevents the site from being slowed down during media uploads.', 'wp-optimize').' '.esc_attr__('The time taken to complete the compression will depend upon the size and quantity of the images.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
31 26 </label>
27 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr__('The images will be added to a background queue, which will start automatically within the next hour.', 'wp-optimize').' '.esc_attr__('This prevents the site from being slowed down during media uploads.', 'wp-optimize').' '.esc_attr__('The time taken to complete the compression will depend upon the size and quantity of the images.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
32 28 </div>
33 29
34 30 <div class="wpo-fieldgroup__subgroup">
35 31 <label class="switch">
@@ -42,10 +38,10 @@
42 38 $message = __('The image compression metabox allows you to compress specific images from the media library.', 'wp-optimize');
43 39 $message .= ' ';
44 40 $message .= __('But if you are using a solution other than WP-Optimize to compress your images, you can hide these metaboxes by disabling this switch.', 'wp-optimize')
45 41 ?>
46 - <span tabindex="0" data-tooltip="<?php echo esc_attr($message);?>"><span class="dashicons dashicons-editor-help"></span> </span>
47 42 </label>
43 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr($message);?>"><span class="dashicons dashicons-editor-help"></span> </span>
48 44 </div>
49 45
50 46 <div class="compression_options">
51 47 <h3><?php esc_html_e('Compression options', 'wp-optimize');?></h3>
@@ -51,17 +47,18 @@
51 47 <h3><?php esc_html_e('Compression options', 'wp-optimize');?></h3>
52 48 <input type="radio" id="enable_lossy_compression" name="compression_level" <?php checked($smush_options['image_quality'], 60); ?> class="smush-options compression_level">
53 49 <label for="enable_lossy_compression"><?php esc_html_e('Prioritize maximum compression', 'wp-optimize');?></label>
54 50 <?php
51 + // This tooltip message is also located in /templates/admin-metabox-smush-settings.php.
55 52 $message = __('Uses lossy compression to ensure maximum savings per image.', 'wp-optimize');
56 53 $message .= ' ';
57 54 $message .= __('The resulting images are of a slightly lower quality', 'wp-optimize');
58 55 ?>
59 - <span tabindex="0" data-tooltip="<?php echo esc_attr($message); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
56 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr($message); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
60 57 <br>
61 58 <input type="radio" id="enable_lossless_compression" <?php checked($smush_options['image_quality'], 92); ?>name="compression_level" class="smush-options compression_level">
62 59 <label for="enable_lossless_compression"><?php esc_html_e('Prioritize retention of detail', 'wp-optimize');?></label>
63 - <span tabindex="0" data-tooltip="<?php esc_attr_e('Uses lossless compression, which results in much better image quality but lower file size savings per image', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
60 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Uses lossless compression, which results in much better image quality but lower file size savings per image', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
64 61 <br>
65 62 <input id="enable_custom_compression" <?php checked($custom); ?> type="radio" name="compression_level" class="smush-options compression_level">
66 63 <label for="enable_custom_compression"><?php esc_html_e('Custom', 'wp-optimize');?></label>
67 64 <br>
@@ -77,17 +74,17 @@
77 74 <option value="90"/>
78 75 </datalist>
79 76 <span class="slider-end"><?php esc_html_e('Best image quality', 'wp-optimize');?></span>
80 77 </div>
81 - <p><?php esc_html_e('Not sure what to choose?', 'wp-optimize'); ?> <?php $wp_optimize->wp_optimize_url('https://getwpo.com/lossy-vs-lossless-image-compression-a-guide-to-the-trade-off-between-image-size-and-quality/', __('Read our article "Lossy vs Lossless image compression"', 'wp-optimize')); ?></p>
78 + <p><?php esc_html_e('Not sure what to choose?', 'wp-optimize'); ?> <?php $wp_optimize->wp_optimize_url('https://teamupdraft.com/blog/lossy-vs-lossless-image-compression/?utm_source=wpo-plugin&utm_medium=referral&utm_campaign=paac&utm_content=lossy-vs-lossless-article-from-compress-tab&utm_creative_format=text', __('Read our article "Lossy vs Lossless image compression"', 'wp-optimize')); ?></p>
82 79
83 80 <?php if (WPO_USE_WEBP_CONVERSION) : ?>
84 81 <h3><?php esc_html_e('WebP conversion', 'wp-optimize');?></h3>
85 82
86 - <?php if ($does_server_allows_local_webp_conversion) : ?>
83 + <?php if ($does_server_allow_local_webp_conversion) : ?>
87 84 <input type="checkbox" id="enable_webp_conversion" name="webp_conversion" <?php checked($smush_options['webp_conversion']); ?> class="smush-options webp_conversion">
88 85 <label for="enable_webp_conversion"><?php esc_html_e('Create WebP version of image', 'wp-optimize');?></label>
89 - <span tabindex="0" data-tooltip="<?php esc_attr_e('Creates WebP image format and serves it whenever possible.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
86 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Creates WebP image format and serves it whenever possible.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
90 87 <br>
91 88
92 89 <?php
93 90 $converters = WP_Optimize()->get_options()->get_option('webp_converters', false);
@@ -102,9 +99,9 @@
102 99 <?php endif; ?>
103 100 </div>
104 101 <button type="button" class="button button-link wpo-toggle-advanced-options"><span class="text"><span class="dashicons dashicons-arrow-down-alt2"></span> <span class="wpo-toggle-advanced-options__text-show"><?php esc_html_e('Show advanced options', 'wp-optimize');?></span><span class="wpo-toggle-advanced-options__text-hide"><?php esc_html_e('Hide advanced options', 'wp-optimize');?></span></span></button>
105 102 <div class="smush-advanced wpo-advanced-options">
106 - <?php if ($does_server_allows_local_webp_conversion && !empty($converters)) : ?>
103 + <?php if ($does_server_allow_local_webp_conversion && !empty($converters)) : ?>
107 104 <button type="button" id="wpo_reset_webp_serving_method" class="wpo_primary_small button"><?php esc_html_e('Reset WebP serving method', 'wp-optimize'); ?></button>
108 105 <span id="wpo_reset_webp_serving_method_done" class="display-none"><span class="dashicons dashicons-yes"></span> <?php esc_html_e('The WebP serving method has been reset', 'wp-optimize');?></span>
109 106 <?php endif; ?>
110 107 <div class="compression_server">
@@ -109,13 +106,13 @@
109 106 <?php endif; ?>
110 107 <div class="compression_server">
111 108 <h3><?php esc_html_e('Compression service', 'wp-optimize');?></h3>
112 109 <div> <input type="radio" name="compression_server" id="resmushit" value="resmushit" <?php checked($smush_options['compression_server'], 'resmushit'); ?> >
113 - <label for="resmushit">
110 + <div id="wpo-resmushit-details">
114 111 <h4><?php esc_html_e('reSmush.it', 'wp-optimize');?></h4>
115 112 <p><?php esc_html_e('Can keep EXIF data', 'wp-optimize');?></p>
116 - <small><?php esc_html_e('Service provided by reSmush.it', 'wp-optimize'); ?></small>
117 - </label>
113 + <small><?php echo esc_html($compression_server_hint); ?></small>
114 + </div>
118 115 </div>
119 116 </div>
120 117 <br>
121 118 <h3><?php esc_html_e('More options', 'wp-optimize');?></h3>
@@ -124,13 +121,13 @@
124 121 <label for="smush-preserve-exif" class="smush-options preserve_exif"><?php esc_html_e('Preserve EXIF data', 'wp-optimize');?></label>
125 122 <br>
126 123 <input type="checkbox" id="smush-backup-original" class="smush-options" <?php checked($smush_options['back_up_original']); ?> >
127 124 <label for="smush-backup-original"><?php esc_html_e('Backup original images', 'wp-optimize');?></label>
128 - <span tabindex="0" data-tooltip="<?php esc_attr_e('The original images are stored alongside the compressed images, you can visit the edit screen of the individual images in the Media Library to restore them.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
125 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('The original images are stored alongside the compressed images, you can visit the edit screen of the individual images in the Media Library to restore them.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
129 126 <br>
130 127 <input type="checkbox" id="smush-backup-delete" class="smush-options" <?php checked($smush_options['back_up_delete_after']); ?> >
131 - <label for="smush-backup-delete"><?php esc_html_e('Automatically delete image backups after', 'wp-optimize');?><input id="smush-backup-delete-days" type="number" min="1" value="<?php echo (0 !== intval($smush_options['back_up_delete_after_days'])) ? intval($smush_options['back_up_delete_after_days']) : 50; ?>"><?php esc_html_e('days', 'wp-optimize');?></label><label> — <?php esc_html_e('or', 'wp-optimize'); ?></label> <button type="button" id="wpo_smush_delete_backup_btn" class="wpo_primary_small button"><?php esc_html_e('Delete all backup images now', 'wp-optimize'); ?></button>
132 - <img id="wpo_smush_delete_backup_spinner" class="display-none" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); ?>" alt="...">
128 + <label for="smush-backup-delete-days"><?php esc_html_e('Automatically delete image backups after', 'wp-optimize');?><input id="smush-backup-delete-days" type="number" min="1" value="<?php echo (0 !== intval($smush_options['back_up_delete_after_days'])) ? intval($smush_options['back_up_delete_after_days']) : 50; ?>"><?php esc_html_e('days', 'wp-optimize');?></label><label> — <?php esc_html_e('or', 'wp-optimize'); ?></label> <button type="button" id="wpo_smush_delete_backup_btn" class="wpo_primary_small button"><?php esc_html_e('Delete all backup images now', 'wp-optimize'); ?></button>
129 + <img id="wpo_smush_delete_backup_spinner" class="display-none" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- N/A ?>" alt="...">
133 130 <span id="wpo_smush_delete_backup_done" class="dashicons dashicons-yes display-none save-done"></span>
134 131 <br>
135 132 <button type="button" id="wpo_smush_mark_all_as_uncompressed_btn" class="wpo_primary_small button"><?php esc_html_e('Mark all images as uncompressed', 'wp-optimize'); ?></button>
136 133 <br>
@@ -140,14 +137,13 @@
140 137 $message = __('Only the original image will be restored.', 'wp-optimize');
141 138 $message .= ' ';
142 139 $message .= __('In order to restore the other sizes, you should use a plugin such as "Regenerate Thumbnails".', 'wp-optimize');
143 140 ?>
144 - <span tabindex="0" data-tooltip="<?php echo esc_attr($message);?>"><span class="dashicons dashicons-editor-help"></span> </span>
141 + <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr($message);?>"><span class="dashicons dashicons-editor-help"></span> </span>
145 142 </div>
146 143 </div>
147 144 <div class="save-options">
148 - <input type="button" id="wpo_smush_images_save_options_button" style="display:none" class="wpo_primary_small button-primary" value="<?php esc_attr_e('Save options', 'wp-optimize'); ?>" />
149 - <img id="wpo_smush_images_save_options_spinner" class="display-none" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); ?>" alt="...">
145 + <img id="wpo_smush_images_save_options_spinner" class="display-none" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- N/A ?>" alt="...">
150 146 <span id="wpo_smush_images_save_options_done" class="display-none"><span class="dashicons dashicons-yes"></span> <?php esc_html_e('Saved options', 'wp-optimize');?></span>
151 147 <span id="wpo_smush_images_save_options_fail" class="display-none"><span class="dashicons dashicons-no"></span> <?php esc_html_e('Failed to save options', 'wp-optimize');?></span>
152 148 </div>
153 149 </div>
@@ -156,9 +152,9 @@
156 152 <h3><?php esc_html_e('Uncompressed images', 'wp-optimize');?></h3>
157 153 <?php if (is_multisite()) : ?>
158 154 <div id="wpo_uncompressed_images_sites_select_container">
159 155 <label for="wpo_uncompressed_images_sites_select"><?php esc_html_e('Select site', 'wp-optimize');?> </label>
160 - <select id="wpo_uncompressed_images_sites_select">
156 + <select id="wpo_uncompressed_images_sites_select" class="wpo-select2">
161 157 <?php foreach ($sites as $site) : ?>
162 158 <option value="<?php echo esc_attr($site->blog_id); ?>"><?php echo esc_html($site->domain . $site->path); ?></option>
163 159 <?php endforeach; ?>
164 160 </select>
@@ -172,9 +168,9 @@
172 168 <div class="smush-refresh-icon align-right">
173 169 <a href="javascript:;" id="wpo_smush_images_refresh" class="wpo-refresh-button"><?php esc_html_e('Refresh image list', 'wp-optimize');?>
174 170 <span class="dashicons dashicons-image-rotate"></span>
175 171 </a>
176 - <img class="wpo_smush_images_loader" width="16" height="16" src="<?php echo esc_url(admin_url('/images/spinner-2x.gif')); ?>" />
172 + <img class="wpo_smush_images_loader" width="16" height="16" src="<?php echo esc_url(admin_url('/images/spinner-2x.gif')); // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- N/A ?>" alt="..." />
177 173 </div>
178 174 </div>
179 175 <div id="wpo_smush_images_grid"></div>
180 176 <div class="smush-actions">
@@ -182,74 +178,5 @@
182 178 <input type="button" id="wpo_smush_mark_as_compressed" class="wpo_primary_small button align-left" value="<?php esc_attr_e('Mark as already compressed', 'wp-optimize'); ?>" />
183 179 <input type="button" id="wpo_smush_get_logs" class="wpo_smush_get_logs wpo_primary_small button-primary align-right" value="<?php esc_attr_e('View logs', 'wp-optimize'); ?>" />
184 180 </div>
185 181 </div>
186 -</div>
187 -
188 -<div id="wpo_smush_images_information_container" style="display:none;">
189 - <div id="wpo_smush_images_information_wrapper">
190 - <h3 id="wpo_smush_images_information_heading"><?php esc_html_e('Compressing images', 'wp-optimize');?></h3>
191 - <h4 id="wpo_smush_images_information_server"></h4>
192 - <div class="progress-bar orange stripes">
193 - <span style="width: 100%"></span>
194 - </div>
195 - <p><?php esc_html_e('The selected images are being processed; please do not close the browser', 'wp-optimize');?></p>
196 - <table id="smush_stats" class="smush_stats_table">
197 - <tbody>
198 - <tr class="smush_stats_row">
199 - <td> <?php esc_html_e('Images pending', 'wp-optimize');?></td>
200 - <td id="smush_stats_pending_images">&nbsp;...</td>
201 - </tr>
202 - <tr class="smush_stats_row">
203 - <td> <?php esc_html_e('Images completed', 'wp-optimize');?></td>
204 - <td id="smush_stats_completed_images">&nbsp;...</td>
205 - </tr>
206 - <tr class="smush_stats_row">
207 - <td> <?php esc_html_e('Size savings', 'wp-optimize');?></td>
208 - <td id="smush_stats_bytes_saved">&nbsp;...</td>
209 - </tr>
210 - <tr class="smush_stats_row">
211 - <td> <?php esc_html_e('Average savings per image', 'wp-optimize');?></td>
212 - <td id="smush_stats_percent_saved">&nbsp;...</td>
213 - </tr>
214 - <tr class="smush_stats_row">
215 - <td> <?php esc_html_e('Time elapsed', 'wp-optimize');?></td>
216 - <td id="smush_stats_timer">&nbsp;</td>
217 - </tr>
218 - </tbody>
219 - </table>
220 - </div>
221 - <input type="button" id="wpo_smush_images_pending_tasks_cancel_button" class="wpo_primary_small button-primary" value="<?php esc_attr_e('Cancel', 'wp-optimize'); ?>" />
222 -</div>
223 -
224 -<div id="smush-complete-summary" class="complete-animation" style="display:none;">
225 - <span class="dashicons dashicons-no-alt close"></span>
226 - <div class="animation">
227 - <div class="checkmark-circle">
228 - <div class="background"></div>
229 - <div class="checkmark draw"></div>
230 - </div>
231 - </div>
232 - <div id="summary-message"></div>
233 - <input type="button" id="wpo_smush_get_logs" class="wpo_smush_get_logs wpo_primary_small button-primary" value="<?php esc_attr_e('View logs', 'wp-optimize'); ?>" />
234 - <input type="button" id="wpo_smush_clear_stats_btn" class="wpo_primary_small button-primary align-right" value="<?php esc_attr_e('Clear compression statistics', 'wp-optimize'); ?>" />
235 - <img id="wpo_smush_images_clear_stats_spinner" class="display-none align-right" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); ?>" alt="...">
236 - <span id="wpo_smush_images_clear_stats_done" class="dashicons dashicons-yes display-none save-done align-right"></span>
237 - <span class="clearfix"></span>
238 - <input type="button" class="wpo_primary_small button-primary wpo_smush_stats_cta_btn" value="<?php esc_attr_e('Close', 'wp-optimize'); ?>" />
239 -</div>
240 -
241 -<div id="smush-log-modal" class="complete-animation" style="display:none;">
242 - <div id="log-panel"></div>
243 - <a href="#" class="wpo_primary_small button-primary"> <?php esc_html_e('Download log file', 'wp-optimize'); ?></a>
244 - <input type="button" class="wpo_primary_small button-primary close" value="<?php esc_attr_e('Close', 'wp-optimize'); ?>" />
245 -</div>
246 -
247 -<div id="smush-information-modal" style="display:none;">
248 - <div class="smush-information"></div>
249 - <input type="button" class="wpo_primary_small button-primary information-modal-close" value="<?php esc_attr_e('Close', 'wp-optimize'); ?>" />
250 -</div>
251 -
252 -<div id="smush-information-modal-cancel-btn" style="display:none;">
253 - <div class="smush-information"></div>
254 - <input type="button" class="wpo_primary_small button-primary" value="<?php esc_attr_e('Cancel', 'wp-optimize'); ?>" />
255 182 </div>