imagify / inc / admin / ui / options.php

options.php in Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF 1.4, at inc/admin/ui/options.php

487 lines 22.5 KB

Raw Download Zip

1	<?php
2	defined( 'ABSPATH' ) or die( 'Cheatin\' uh?' );
3
4	/**
5	* The main settings page construtor using the required functions from WP
6	*
7	* @since 1.0
8	*/
9	function _imagify_display_options_page() {
10	global $_wp_additional_image_sizes, $wp_version;
11	?>
12	<div class="wrap imagify-settings">
13	<?php
14	if ( ! defined( 'WP_ROCKET_VERSION' ) ) { ?>
15	<div class="imagify-col imagify-sidebar">
16	<div class="imagify-sidebar-section">
17	<span class="imagify-sidebar-title">
18	<img src="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>phone.svg" width="19" height="16" alt=""> <?php _e( 'Is your website too slow?', 'imagify' ); ?>
19	</span>
20	<ul class="wp-media-products">
21	<li>
22	<div class="links wprocket-link">
23	<p><strong>
24	<?php _e( 'Discover the best caching plugin to speed up your website.', 'imagify' ); ?>
25	</strong></p>
26
27	<p class="imagify-big-text">
28	<?php
29	$discount_percent = '20%';
30	$discount_code = 'IMAGIFY20';
31
32	printf( __( '%sGet %s off%s with this coupon code:%s', 'imagify' ), '<span class="imagify-mark-styled"><span>', '<strong>' . $discount_percent, '</strong></span></span>', '<span class="imagify-discount-code">' . $discount_code . '</span>' );
33	?>
34	</p>
35
36	<p>
37	<a class="btn btn-rocket" href="http://wp-rocket.me/?utm_source=imagify&utm_medium=plugin&utm_campaign=coupon-code"><?php _e( 'Get WP Rocket now', 'imagify' ); ?></a>
38	</p>
39	</div>
40	</li>
41	</ul>
42	</div>
43	</div>
44	<?php
45	}
46	?>
47
48	<div class="imagify-col">
49	<?php $heading_tag = version_compare( $GLOBALS['wp_version'], '4.3' ) >= 0 ? 'h1' : 'h2'; ?>
50	<div class="imagify-title">
51	<img width="225" height="26" alt="Imagify" src="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>imagify-logo.png" class="imagify-logo" /> <small><sup><?php echo IMAGIFY_VERSION; ?></sup></small>
52
53	<?php $imagify_rate_url = 'https://wordpress.org/support/view/plugin-reviews/imagify?rate=5#postform'; ?>
54	<p class="imagify-rate-us">
55	<?php printf( __( '%sDo you like this plugin?%s Please take a few seconds to %srate it on WordPress.org%s!', 'imagify' ), '<strong>', '</strong><br />', '<a href="' . $imagify_rate_url . '">', '</a>' ); ?>
56	<br>
57	<a class="stars" href="<?php echo $imagify_rate_url; ?>"><?php echo str_repeat( '<span class="dashicons dashicons-star-filled"></span>', 5 ); ?></a>
58	</p>
59	</div>
60	<?php $form_action = ( imagify_is_active_for_network() ) ? admin_url( 'admin-post.php' ) : admin_url( 'options.php' ); ?>
61	<form action="<?php echo $form_action; ?>" id="imagify-settings" method="post">
62
63	<?php settings_fields( IMAGIFY_SLUG ); ?>
64	<?php wp_nonce_field( 'imagify-signup', 'imagifysignupnonce', false ); ?>
65	<?php wp_nonce_field( 'imagify-check-api-key', 'imagifycheckapikeynonce', false ); ?>
66
67	<input id="check_api_key" type="hidden" value="<?php echo esc_attr( get_imagify_option( 'api_key' ) ); ?>" name="check_api_key">
68	<input id="version" type="hidden" value="<?php echo esc_attr( get_imagify_option( 'version' ) ); ?>" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[version]">
69
70	<h3 class="screen-reader-text"><?php _e( 'Settings' ); ?></h3>
71
72	<?php
73	if ( ! defined( 'IMAGIFY_API_KEY' ) \|\| ! IMAGIFY_API_KEY ) { ?>
74	<div class="imagify-sub-header">
75	<table class="form-table">
76	<tbody>
77	<tr>
78	<th scope="row"><label for="api_key"><?php _e( 'API Key', 'imagify' ); ?></label></th>
79	<td>
80	<input type="text" size="35" value="<?php echo esc_attr( get_imagify_option( 'api_key' ) ); ?>" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[api_key]" id="api_key">
81	<?php
82	if ( imagify_valid_key() ) {
83	?>
84	<span id="imagify-check-api-container" class="imagify-valid">
85	<span class="dashicons dashicons-yes"></span> <?php _e( 'Your API key is valid.', 'imagify' ); ?>
86	</span>
87	<?php
88	} elseif ( ! imagify_valid_key() && get_imagify_option( 'api_key', false ) ) { ?>
89
90	<span id="imagify-check-api-container">
91	<span class="dashicons dashicons-no"></span> <?php _e( 'Your API key isn\'t valid!', 'imagify' ); ?>
92	</span>
93
94	<?php
95	}
96
97	if ( ! get_imagify_option( 'api_key', false ) ) {
98	echo '<p class="description desc api_key">' . sprintf( __( 'Don\'t have an API Key yet? %sCreate one, it\'s FREE%s.', 'imagify' ), '<a id="imagify-signup" href="' . IMAGIFY_APP_MAIN . '/#/register">', '</a>' ) . '</p>';
99	}
100	?>
101	</td>
102	</tr>
103	</tbody>
104	</table>
105	</div>
106	<?php
107	}
108	?>
109
110	<div class="imagify-settings-section <?php echo ( ! imagify_valid_key() ) ? 'hidden' : ''; ?>">
111	<table class="form-table">
112	<tbody>
113	<tr class="imagify-middle">
114	<th scope="row"><?php _e( 'Optimization Level', 'imagify' ); ?></th>
115	<td>
116	<p class="imagify-inline-options">
117	<input type="radio" id="imagify-optimization_level_normal" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[optimization_level]" value="0" <?php checked( get_imagify_option( 'optimization_level' ), 0 ); ?>>
118	<label for="imagify-optimization_level_normal">
119	<?php _e( 'Normal', 'imagify' ); ?>
120	</label>
121
122	<input type="radio" id="imagify-optimization_level_aggro" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[optimization_level]" value="1" <?php checked( get_imagify_option( 'optimization_level' ), 1 ); ?>>
123	<label for="imagify-optimization_level_aggro">
124	<?php _e( 'Aggressive', 'imagify' ); ?>
125	</label>
126
127	<input type="radio" id="imagify-optimization_level_ultra" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[optimization_level]" value="2" <?php checked( get_imagify_option( 'optimization_level' ), 2 ); ?>>
128	<label for="imagify-optimization_level_ultra">
129	<?php _e( 'Ultra', 'imagify' ); ?>
130	</label>
131
132	<span class="imagify-info">
133	<span class="dashicons dashicons-info"></span>
134	<a href="#imagify-more-info" class="imagify-modal-trigger"><?php _e( 'More info?', 'imagify' ); ?></a>
135	</span>
136	</p>
137
138	<p class="imagify-visual-comparison-text">
139	<?php
140	printf(
141	__( 'Need help to choose? %sTry the Visual Comparison%s', 'imagify' ),
142	'<button type="button" class="button button-primary button-mini-flat imagify-visual-comparison-btn imagify-modal-trigger" data-target="#imagify-visual-comparison">',
143	'</button>'
144	);
145	?>
146	</p>
147	</td>
148	</tr>
149	<tr>
150	<th scope="row"><span><?php _e( 'Auto-Optimize images on upload', 'imagify' ); ?></span></th>
151	<td>
152	<input type="checkbox" value="1" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[auto_optimize]" id="auto_optimize" <?php checked( get_imagify_option( 'auto_optimize', 0 ), 1 ); ?> aria-describedby="describe-auto-optimize" />
153	<!-- Empty onclick attribute to make clickable labels on iTruc & Mac -->
154	<label for="auto_optimize" onclick=""><span class="screen-reader-text"><?php _e( 'Auto-Optimize images on upload', 'imagify' ); ?></span></label>
155
156	<span id="describe-auto-optimize" class="imagify-info">
157	<span class="dashicons dashicons-info"></span>
158	<?php _e( 'Automatically optimize every image you upload to WordPress.', 'imagify' ); ?>
159	</span>
160	</td>
161	</tr>
162	<tr>
163	<th scope="row"><span><?php _e( 'Backup original images', 'imagify' ); ?></span></th>
164	<td>
165	<input type="checkbox" value="1" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[backup]" id="backup" <?php checked( get_imagify_option( 'backup', 0 ), 1 ); ?> aria-describedby="describe-backup" />
166	<label for="backup" onclick=""><span class="screen-reader-text"><?php _e( 'Backup original images', 'imagify' ); ?></span></label>
167
168	<span id="describe-backup" class="imagify-info">
169	<span class="dashicons dashicons-info"></span>
170	<?php _e( 'Keep your original images in a separate folder before optimization process.', 'imagify' ); ?>
171	</span>
172	</td>
173	</tr>
174	<tr>
175	<th scope="row"><span><?php _e( 'Resize larger images', 'imagify' ); ?></span></th>
176	<td>
177	<input type="checkbox" value="1" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[resize_larger]" id="resize_larger" <?php checked( get_imagify_option( 'resize_larger', 0 ), 1 ); ?> aria-describedby="describe-resize-larger" />
178	<label for="resize_larger" onclick=""><span class="screen-reader-text"><?php _e( 'Resize larger images', 'imagify' ); ?></span></label>
179
180	<p id="describe-resize-larger" class="imagify-options-line">
181	<?php
182	$max_sizes = get_imagify_max_intermediate_image_size();
183	printf(
184	__( 'to maximum %s pixels width', 'imagify' ),
185	'<input type="number" min="' . $max_sizes['width'] . '" name="' . IMAGIFY_SETTINGS_SLUG . '[resize_larger_w]" value="' . get_imagify_option( 'resize_larger_w', false ). '" size="5">'
186	);
187	?>
188	</p>
189
190	<p class="imagify-checkbox-marged">
191	<span class="imagify-info">
192	<span class="dashicons dashicons-info"></span>
193
194	<?php
195	printf( __( 'This option is recommended to reduce larger images. You can save up to 80%% after resizing. The new width should not be less than your largest thumbnail width, which is actually %spx.', 'imagify' ), $max_sizes['width'] );
196	?>
197	</span>
198	</p>
199	</td>
200	</tr>
201	<tr>
202	<th scope="row"><span><?php _e( 'EXIF Data', 'imagify' ); ?></span></th>
203	<td>
204	<input type="checkbox" value="1" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[exif]" id="exif" <?php checked( get_imagify_option( 'exif', 0 ), 1 ); ?> aria-describedby="describe-exif" />
205	<label for="exif" onclick=""><span class="screen-reader-text"><?php _e( 'EXIF Data', 'imagify' ); ?></span></label>
206
207	<span id="describe-exif" class="imagify-info">
208	<span class="dashicons dashicons-info"></span>
209	<?php _e( 'Keep all EXIF data from your images. EXIF are informations stored in your pictures like shutter speed, exposure compensation, ISO, etc...', 'imagify' ); ?>
210	<a href="https://en.wikipedia.org/wiki/Exchangeable_image_file_format" target="_blank"><?php _e( 'Learn more', 'imagify' ); ?></a>
211	<br/><br/>
212	<?php _e( 'If you are a photographer, you may be interested in this option if you are displaying on your pages some info like the model of your camera.', 'imagify' ); ?>
213
214	</span>
215	</td>
216	</tr>
217	<?php
218	if ( ! imagify_is_active_for_network() ) { ?>
219
220	<tr>
221	<th scope="row"><?php _e( 'Files optimization', 'imagify' ); ?></th>
222	<td>
223	<p>
224	<?php _e( 'You can choose to compress different image sizes created by WordPress here.', 'imagify' ); ?>
225	<br/>
226	<?php printf( __( 'The %soriginal size%s is %sautomatically optimized%s by Imagify.', 'imagify' ), '<strong>', '</strong>', '<strong>', '</strong>' ); ?>
227	<br>
228	<span class="imagify-important">
229	<?php _e( 'Remember each additional image size will affect your Imagify monthly usage!', 'imagify' ); ?>
230	</span>
231	</p>
232
233	<br>
234
235	<?php
236	$sizes = array();
237	$is_wp44 = version_compare( $wp_version, '4.4-beta3' ) >= 0;
238	$all_intermediate_image_sizes = get_intermediate_image_sizes();
239	$intermediate_image_sizes = apply_filters( 'image_size_names_choose', $all_intermediate_image_sizes );
240	$all_intermediate_image_sizes = array_combine( $all_intermediate_image_sizes, $all_intermediate_image_sizes );
241	$intermediate_image_sizes = array_merge( $all_intermediate_image_sizes, $intermediate_image_sizes );
242	$wp_image_sizes = $is_wp44 ? array( 'thumbnail', 'medium', 'medium_large', 'large' ) : array( 'thumbnail', 'medium', 'large' );
243
244	// Create the full array with sizes and crop info
245	foreach ( $intermediate_image_sizes as $size => $size_name ) {
246	if ( in_array( $size, $wp_image_sizes ) && ! is_int( $size ) ) {
247	$sizes[ $size ] = array(
248	'width' => get_option( $size . '_size_w' ),
249	'height' => get_option( $size . '_size_h' ),
250	'name' => $size_name,
251	);
252	} elseif ( isset( $_wp_additional_image_sizes[ $size ] ) ) {
253	$sizes[ $size ] = array(
254	'width' => $_wp_additional_image_sizes[ $size ]['width'],
255	'height' => $_wp_additional_image_sizes[ $size ]['height'],
256	'name' => $size_name,
257	);
258	}
259	}
260
261	foreach( $sizes as $size_key => $size_data ) {
262	$label = esc_html( stripslashes( $size_data['name'] ) );
263	$label = sprintf( '%s - %d × %d', $label, $size_data['width'], $size_data['height'] );
264	?>
265	<input type="hidden" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[sizes][<?php echo $size_key; ?>-hidden]" value="1" />
266	<input type="checkbox" id="imagify_sizes_<?php echo $size_key; ?>" class="mini" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[sizes][<?php echo $size_key; ?>]" value="1" <?php echo ( ! array_key_exists( $size_key, get_imagify_option( 'disallowed-sizes', array() ) ) ) ? 'checked="checked"' : '' ?> />
267	<label for="imagify_sizes_<?php echo $size_key; ?>" onclick=""><?php echo $label; ?></label>
268	<br class="imagify-br">
269
270	<?php
271	}
272	?>
273	</td>
274	</tr>
275
276	<?php
277	}
278	?>
279	</tbody>
280	</table>
281
282	<h3 class="imagify-options-title"><?php _e( 'Display options', 'Imagify' ); ?></h3>
283
284	<table class="form-table">
285	<tbody>
286	<tr>
287	<th scope="row"><span><?php _e( 'Show Admin Bar menu', 'imagify' ); ?></span></th>
288	<td>
289	<input type="checkbox" value="1" name="<?php echo IMAGIFY_SETTINGS_SLUG; ?>[admin_bar_menu]" id="admin_bar_menu" <?php checked( get_imagify_option( 'admin_bar_menu', 0 ), 1 ); ?> aria-describedby="describe-admin-bar-menu" />
290	<!-- Empty onclick attribute to make clickable labels on iTruc & Mac -->
291	<label for="admin_bar_menu" onclick="">
292	<span class="screen-reader-text"><?php _e( 'Show Admin Bar menu', 'imagify' ); ?></span>
293	<span class="imagify-visual-label"><?php _e( 'I want this awesome quick access menu on my admin bar.', 'imagify' ); ?></span>
294	</label>
295
296	<p>
297	<img class="imagify-menu-bar-img" src="<?php echo IMAGIFY_ASSETS_IMG_URL . 'imagify-menu-bar.jpg'; ?>" width="300" height="225" alt="">
298	</p>
299	</td>
300	</tr>
301	</tbody>
302	</table>
303
304	</div>
305	<div class="submit">
306	<?php submit_button(); ?>
307	<div class="imagify-bulk-info">
308	<p><?php printf( __( 'Once your settings saved, optimize all your images by using the %sImagify Bulk Optimization%s feature.', 'imagify' ), '<a href="' . get_admin_url() . 'upload.php?page=' . IMAGIFY_SLUG . '-bulk-optimization">', '</a>' ); ?></p>
309	</div>
310	</div>
311	</form>
312	</div>
313
314	<div id="imagify-more-info" class="imagify-modal">
315	<div class="imagify-modal-content">
316	<p class="h2"><?php _e('You can choose three levels of compression', 'imagify'); ?></p>
317	<div class="imagify-columns">
318	<div class="col-1-3">
319	<p class="h3"><?php _e( 'Ultra', 'imagify' ); ?></p>
320	<p>
321	<?php _e( 'This mode will apply all available optimizations for maximum image compression.', 'imagify' ); ?>
322	</p>
323	<p>
324	<?php _e( 'This will provide a huge savings on the initial weight. Sometimes the image quality could be degraded a little.', 'imagify' ); ?>
325	</p>
326	<p>
327	<?php _e( 'If you want the maximum weight reduction, and you agree to lose some quality on the images we recommend using this mode.' , 'imagify' ); ?>
328	</p>
329	</div>
330	<div class="col-1-3">
331	<p class="h3"><?php _e( 'Aggressive', 'imagify' ); ?></p>
332	<p>
333	<?php _e( 'This mode provides perfect optimization of your images without any significant quality loss.', 'imagify' ); ?>
334	</p>
335	<p>
336	<?php _e( 'This will provide a drastic savings on the initial weight, with a small reduction in image quality. Most of the time it\'s not even noticeable.', 'imagify' ); ?>
337	</p>
338	<p>
339	<?php _e( 'If you want the maximum weight reduction, we recommend using this mode.' , 'imagify' ); ?>
340	</p>
341	</div>
342	<div class="col-1-3">
343	<p class="h3"><?php _e( 'Normal', 'imagify' ); ?></p>
344	<p>
345	<?php _e( 'This mode provides lossless optimization, your images will be optimized without any visible change.', 'imagify' ); ?>
346	</p>
347	<p>
348	<?php _e( 'If you want the perfect quality for your images, we recommend you that mode.', 'imagify' ); ?>
349	</p>
350	<p>
351	<em><?php _e( 'Note: the file size reduction will be less, compared to aggressive mode.', 'imagify' ); ?></em>
352	</p>
353	</div>
354	</div>
355
356	<button type="button" class="close-btn">
357	<i class="dashicons dashicons-no-alt" aria-hidden="true"></i>
358	<span class="screen-reader-text"><?php _e( 'Close' ); ?></span>
359	</button>
360	</div>
361	</div>
362
363
364	<div class="imagify-modal" id="imagify-visual-comparison">
365	<div class="imagify-modal-content">
366
367	<p class="imagify-comparison-title">
368	<?php
369	printf (
370	__( 'I want to compare%s and%s', 'imagify'),
371	'<span class="twentytwenty-left-buttons"></span>',
372	'<span class="twentytwenty-right-buttons"></span>'
373	);
374	?>
375	</p>
376
377	<div class="twentytwenty-container"
378	data-loader="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>loader-balls.svg"
379	data-label-original="<?php esc_attr_e( 'Original', 'imagify' ); ?>"
380	data-label-normal="<?php esc_attr_e( 'Normal', 'imagify' ); ?>"
381	data-label-aggressive="<?php esc_attr_e( 'Aggressive', 'imagify' ); ?>"
382	data-label-ultra="<?php esc_attr_e( 'Ultra', 'imagify' ); ?>"
383
384	data-original-label="<?php esc_attr_e( 'Original', 'imagify' ); ?>"
385	data-original-img="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>penseur-original.jpg"
386	data-original-dim="1220x350"
387	data-original-alt="<?php printf( esc_attr__( 'Original photography about %s', 'imagify' ), size_format(405000)); ?>"
388
389	data-normal-label="<?php esc_attr_e( 'Normal', 'imagify' ); ?>"
390	data-normal-img="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>penseur-normal.jpg"
391	data-normal-dim="1220x350"
392	data-normal-alt="<?php printf( esc_attr__( 'Optimized photography about %s', 'imagify' ), size_format(371712) ); ?>"
393
394	data-aggressive-label="<?php esc_attr_e( 'Aggressive', 'imagify' ); ?>"
395	data-aggressive-img="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>penseur-aggressive.jpg"
396	data-aggressive-dim="1220x350"
397	data-aggressive-alt="<?php printf( esc_attr__( 'Optimized photography about %s', 'imagify' ), size_format(143360) ); ?>"
398
399	data-ultra-label="<?php esc_attr_e( 'Ultra', 'imagify' ); ?>"
400	data-ultra-img="<?php echo IMAGIFY_ASSETS_IMG_URL; ?>penseur-ultra.jpg"
401	data-ultra-dim="1220x350"
402	data-ultra-alt="<?php printf( esc_attr__( 'Optimized photography about %s', 'imagify' ), size_format(108544) ); ?>"></div>
403
404	<div class="imagify-comparison-levels">
405	<div class="imagify-c-level imagify-level-original go-left">
406	<p class="imagify-c-level-row">
407	<span class="label"><?php _e( 'Level:', 'imagify' ); ?></span>
408	<span class="value level"><?php _e( 'Original', 'imagify' ); ?></span>
409	</p>
410	<p class="imagify-c-level-row">
411	<span class="label"><?php _e( 'File Size:', 'imagify' ); ?></span>
412	<span class="value"><?php echo size_format(405000); ?></span>
413	</p>
414	</div>
415	<div class="imagify-c-level imagify-level-optimized" aria-hidden="true">
416	<p class="imagify-c-level-row">
417	<span class="label"><?php _e( 'Level:', 'imagify' ); ?></span>
418	<span class="value level"><?php _e( 'Normal', 'imagify' ); ?></span>
419	</p>
420	<p class="imagify-c-level-row">
421	<span class="label"><?php _e( 'File Size:', 'imagify' ); ?></span>
422	<span class="value size"><?php echo size_format(371712); ?></span>
423	</p>
424	<p class="imagify-c-level-row">
425	<span class="label"><?php _e( 'Original Saving:', 'imagify' ); ?></span>
426	<span class="value">
427	<span class="imagify-chart">
428	<span class="imagify-chart-container">
429	<canvas id="imagify-consumption-chart-normal" width="15" height="15"></canvas>
430	</span>
431	</span><span class="imagify-chart-value">10.44</span>%
432	</span>
433	</p>
434	</div>
435	<div class="imagify-c-level imagify-level-aggressive">
436	<p class="imagify-c-level-row">
437	<span class="label"><?php _e( 'Level:', 'imagify' ); ?></span>
438	<span class="value level"><?php _e( 'Aggressive', 'imagify' ); ?></span>
439	</p>
440	<p class="imagify-c-level-row">
441	<span class="label"><?php _e( 'File Size:', 'imagify' ); ?></span>
442	<span class="value size"><?php echo size_format(143360); ?></span>
443	</p>
444	<p class="imagify-c-level-row">
445	<span class="label"><?php _e( 'Original Saving:', 'imagify' ); ?></span>
446	<span class="value">
447	<span class="imagify-chart">
448	<span class="imagify-chart-container">
449	<canvas id="imagify-consumption-chart-aggressive" width="15" height="15"></canvas>
450	</span>
451	</span><span class="imagify-chart-value">65.53</span>%
452	</span>
453	</p>
454	</div>
455
456	<div class="imagify-c-level imagify-level-ultra go-right">
457	<p class="imagify-c-level-row">
458	<span class="label"><?php _e( 'Level:', 'imagify' ); ?></span>
459	<span class="value level"><?php _e( 'Ultra', 'imagify' ); ?></span>
460	</p>
461	<p class="imagify-c-level-row">
462	<span class="label"><?php _e( 'File Size:', 'imagify' ); ?></span>
463	<span class="value size"><?php echo size_format(108544); ?></span>
464	</p>
465	<p class="imagify-c-level-row">
466	<span class="label"><?php _e( 'Original Saving:', 'imagify' ); ?></span>
467	<span class="value">
468	<span class="imagify-chart">
469	<span class="imagify-chart-container">
470	<canvas id="imagify-consumption-chart-ultra" width="15" height="15"></canvas>
471	</span>
472	</span><span class="imagify-chart-value">74.16</span>%
473	</span>
474	</p>
475	</div>
476	</div>
477
478	<button type="button" class="close-btn">
479	<i class="dashicons dashicons-no-alt" aria-hidden="true"></i>
480	<span class="screen-reader-text"><?php _e( 'Close' ); ?></span>
481	</button>
482	</div>
483	</div>
484
485	</div>
486	<?php
487	}