← All changes | templates/images/smush.php +25 -23 3.4.1 → 4.7.0 View file →

		@@ -1,19 +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		- printf(__('Note: Image optimization feature is offered via %s free API', 'wp-optimize'), '<a href="https://resmush.it/" target="_blank">reSmush.it</a>');
	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>');
16	17	?>
17	18	</p>
18	19	<div class="wpo-fieldgroup">
19	20	<div class="autosmush wpo-fieldgroup__subgroup<?php echo $smush_options['autosmush'] ? ' active' : ''; ?>">
		@@ -21,10 +22,10 @@
21	22	<input type="checkbox" id="smush-automatically" <?php checked($smush_options['autosmush']); ?> >
22	23	<span class="slider round"></span>
23	24	</label>
24	25	<label for="smush-automatically"><?php esc_html_e('Automatically compress newly-added images', 'wp-optimize');?>
25		- <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>
26	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>
27	28	</div>
28	29
29	30	<div class="wpo-fieldgroup__subgroup">
30	31	<label class="switch">
		@@ -37,10 +38,10 @@
37	38	$message = __('The image compression metabox allows you to compress specific images from the media library.', 'wp-optimize');
38	39	$message .= ' ';
39	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')
40	41	?>
41		- <span tabindex="0" data-tooltip="<?php echo esc_attr($message);?>"><span class="dashicons dashicons-editor-help"></span> </span>
42	42	</label>
	43	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr($message);?>"><span class="dashicons dashicons-editor-help"></span> </span>
43	44	</div>
44	45
45	46	<div class="compression_options">
46	47	<h3><?php esc_html_e('Compression options', 'wp-optimize');?></h3>
		@@ -46,17 +47,18 @@
46	47	<h3><?php esc_html_e('Compression options', 'wp-optimize');?></h3>
47	48	<input type="radio" id="enable_lossy_compression" name="compression_level" <?php checked($smush_options['image_quality'], 60); ?> class="smush-options compression_level">
48	49	<label for="enable_lossy_compression"><?php esc_html_e('Prioritize maximum compression', 'wp-optimize');?></label>
49	50	<?php
	51	+ // This tooltip message is also located in /templates/admin-metabox-smush-settings.php.
50	52	$message = __('Uses lossy compression to ensure maximum savings per image.', 'wp-optimize');
51	53	$message .= ' ';
52	54	$message .= __('The resulting images are of a slightly lower quality', 'wp-optimize');
53	55	?>
54		- <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>
55	57	<br>
56	58	<input type="radio" id="enable_lossless_compression" <?php checked($smush_options['image_quality'], 92); ?>name="compression_level" class="smush-options compression_level">
57	59	<label for="enable_lossless_compression"><?php esc_html_e('Prioritize retention of detail', 'wp-optimize');?></label>
58		- <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>
59	61	<br>
60	62	<input id="enable_custom_compression" <?php checked($custom); ?> type="radio" name="compression_level" class="smush-options compression_level">
61	63	<label for="enable_custom_compression"><?php esc_html_e('Custom', 'wp-optimize');?></label>
62	64	<br>
		@@ -72,17 +74,17 @@
72	74	<option value="90"/>
73	75	</datalist>
74	76	<span class="slider-end"><?php esc_html_e('Best image quality', 'wp-optimize');?></span>
75	77	</div>
76		- <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>
77	79
78	80	<?php if (WPO_USE_WEBP_CONVERSION) : ?>
79	81	<h3><?php esc_html_e('WebP conversion', 'wp-optimize');?></h3>
80	82
81		- <?php if ($does_server_allows_local_webp_conversion) : ?>
	83	+ <?php if ($does_server_allow_local_webp_conversion) : ?>
82	84	<input type="checkbox" id="enable_webp_conversion" name="webp_conversion" <?php checked($smush_options['webp_conversion']); ?> class="smush-options webp_conversion">
83	85	<label for="enable_webp_conversion"><?php esc_html_e('Create WebP version of image', 'wp-optimize');?></label>
84		- <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>
85	87	<br>
86	88
87	89	<?php
88	90	$converters = WP_Optimize()->get_options()->get_option('webp_converters', false);
		@@ -97,9 +99,9 @@
97	99	<?php endif; ?>
98	100	</div>
99	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>
100	102	<div class="smush-advanced wpo-advanced-options">
101		- <?php if ($does_server_allows_local_webp_conversion && !empty($converters)) : ?>
	103	+ <?php if ($does_server_allow_local_webp_conversion && !empty($converters)) : ?>
102	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>
103	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>
104	106	<?php endif; ?>
105	107	<div class="compression_server">
		@@ -104,13 +106,13 @@
104	106	<?php endif; ?>
105	107	<div class="compression_server">
106	108	<h3><?php esc_html_e('Compression service', 'wp-optimize');?></h3>
107	109	<div> <input type="radio" name="compression_server" id="resmushit" value="resmushit" <?php checked($smush_options['compression_server'], 'resmushit'); ?> >
108		- <label for="resmushit">
	110	+ <div id="wpo-resmushit-details">
109	111	<h4><?php esc_html_e('reSmush.it', 'wp-optimize');?></h4>
110	112	<p><?php esc_html_e('Can keep EXIF data', 'wp-optimize');?></p>
111		- <small><?php esc_html_e('Service provided by reSmush.it', 'wp-optimize'); ?></small>
112		- </label>
	113	+ <small><?php echo esc_html($compression_server_hint); ?></small>
	114	+ </div>
113	115	</div>
114	116	</div>
115	117	<br>
116	118	<h3><?php esc_html_e('More options', 'wp-optimize');?></h3>
		@@ -119,13 +121,13 @@
119	121	<label for="smush-preserve-exif" class="smush-options preserve_exif"><?php esc_html_e('Preserve EXIF data', 'wp-optimize');?></label>
120	122	<br>
121	123	<input type="checkbox" id="smush-backup-original" class="smush-options" <?php checked($smush_options['back_up_original']); ?> >
122	124	<label for="smush-backup-original"><?php esc_html_e('Backup original images', 'wp-optimize');?></label>
123		- <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>
124	126	<br>
125	127	<input type="checkbox" id="smush-backup-delete" class="smush-options" <?php checked($smush_options['back_up_delete_after']); ?> >
126		- <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>
127		- <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="...">
128	130	<span id="wpo_smush_delete_backup_done" class="dashicons dashicons-yes display-none save-done"></span>
129	131	<br>
130	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>
131	133	<br>
		@@ -135,13 +137,13 @@
135	137	$message = __('Only the original image will be restored.', 'wp-optimize');
136	138	$message .= ' ';
137	139	$message .= __('In order to restore the other sizes, you should use a plugin such as "Regenerate Thumbnails".', 'wp-optimize');
138	140	?>
139		- <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>
140	142	</div>
141	143	</div>
142	144	<div class="save-options">
143		- <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="...">
144	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>
145	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>
146	148	</div>
147	149	</div>
		@@ -150,9 +152,9 @@
150	152	<h3><?php esc_html_e('Uncompressed images', 'wp-optimize');?></h3>
151	153	<?php if (is_multisite()) : ?>
152	154	<div id="wpo_uncompressed_images_sites_select_container">
153	155	<label for="wpo_uncompressed_images_sites_select"><?php esc_html_e('Select site', 'wp-optimize');?> </label>
154		- <select id="wpo_uncompressed_images_sites_select">
	156	+ <select id="wpo_uncompressed_images_sites_select" class="wpo-select2">
155	157	<?php foreach ($sites as $site) : ?>
156	158	<option value="<?php echo esc_attr($site->blog_id); ?>"><?php echo esc_html($site->domain . $site->path); ?></option>
157	159	<?php endforeach; ?>
158	160	</select>
		@@ -166,9 +168,9 @@
166	168	<div class="smush-refresh-icon align-right">
167	169	<a href="javascript:;" id="wpo_smush_images_refresh" class="wpo-refresh-button"><?php esc_html_e('Refresh image list', 'wp-optimize');?>
168	170	<span class="dashicons dashicons-image-rotate"></span>
169	171	</a>
170		- <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="..." />
171	173	</div>
172	174	</div>
173	175	<div id="wpo_smush_images_grid"></div>
174	176	<div class="smush-actions">