imagify / inc / admin / ui / options.php

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

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