imagify / views / modal-settings-visual-comparison.php

modal-settings-visual-comparison.php in Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF 2.2.8, at views/modal-settings-visual-comparison.php

141 lines 6.0 KB

Raw Download Zip

1	<?php
2	defined( 'ABSPATH' ) \|\| exit;
3
4	// translators: %s is a formatted file size.
5	$original_alt = sprintf( esc_attr__( 'Original photography about %s', 'imagify' ), imagify_size_format( 343040 ) );
6
7	// translators: %s is a formatted file size.
8	$normal_alt = sprintf( esc_attr__( 'Optimized photography about %s', 'imagify' ), imagify_size_format( 301056 ) );
9
10	// translators: %s is a formatted file size.
11	$aggressive_alt = sprintf( esc_attr__( 'Optimized photography about %s', 'imagify' ), imagify_size_format( 108544 ) );
12
13	// translators: %s is a formatted file size.
14	$ultra_alt = sprintf( esc_attr__( 'Optimized photography about %s', 'imagify' ), imagify_size_format( 46080 ) );
15	?>
16
17	<div class="imagify-modal" id="imagify-visual-comparison">
18	<div class="imagify-modal-content">
19
20	<p class="imagify-comparison-title">
21	<?php
22	printf(
23	/* translators: 1 and 2 are optimization levels: "Original", "Normal", "Aggressive", or "Ultra". */
24	esc_html__( 'I want to compare %1$s and %2$s', 'imagify' ),
25	'<span class="twentytwenty-left-buttons"></span>',
26	'<span class="twentytwenty-right-buttons"></span>'
27	);
28	?>
29	</p>
30
31	<div class="twentytwenty-container"
32	data-loader="<?php echo esc_url( IMAGIFY_ASSETS_IMG_URL ); ?>loader-balls.svg"
33	data-label-original="<?php esc_attr_e( 'Original', 'imagify' ); ?>"
34	data-label-normal="<?php esc_attr_e( 'Normal', 'imagify' ); ?>"
35	data-label-aggressive="<?php esc_attr_e( 'Aggressive', 'imagify' ); ?>"
36	data-label-ultra="<?php esc_attr_e( 'Ultra', 'imagify' ); ?>"
37
38	data-original-label="<?php esc_attr_e( 'Original', 'imagify' ); ?>"
39	data-original-img="<?php echo esc_url( IMAGIFY_ASSETS_IMG_URL ); ?>mushrooms-original.jpg"
40	data-original-dim="1220x350"
41	data-original-alt="<?php echo esc_attr( $original_alt ); ?>"
42
43	data-normal-label="<?php esc_attr_e( 'Normal', 'imagify' ); ?>"
44	data-normal-img="<?php echo esc_url( IMAGIFY_ASSETS_IMG_URL ); ?>mushrooms-normal.jpg"
45	data-normal-dim="1220x350"
46	data-normal-alt="<?php echo esc_attr( $normal_alt ); ?>"
47
48	data-aggressive-label="<?php esc_attr_e( 'Aggressive', 'imagify' ); ?>"
49	data-aggressive-img="<?php echo esc_url( IMAGIFY_ASSETS_IMG_URL ); ?>mushrooms-aggressive.jpg"
50	data-aggressive-dim="1220x350"
51	data-aggressive-alt="<?php echo esc_attr( $aggressive_alt ); ?>"
52
53	data-ultra-label="<?php esc_attr_e( 'Ultra', 'imagify' ); ?>"
54	data-ultra-img="<?php echo esc_url( IMAGIFY_ASSETS_IMG_URL ); ?>mushrooms-ultra.jpg"
55	data-ultra-dim="1220x350"
56	data-ultra-alt="<?php echo esc_attr( $ultra_alt ); ?>">
57	</div>
58
59	<div class="imagify-comparison-levels">
60	<div class="imagify-c-level imagify-level-original go-left">
61	<p class="imagify-c-level-row">
62	<span class="label"><?php esc_html_e( 'Level:', 'imagify' ); ?></span>
63	<span class="value level"><?php esc_html_e( 'Original', 'imagify' ); ?></span>
64	</p>
65	<p class="imagify-c-level-row">
66	<span class="label"><?php esc_html_e( 'File Size:', 'imagify' ); ?></span>
67	<span class="value"><?php echo esc_html( imagify_size_format( 343040 ) ); ?></span>
68	</p>
69	</div>
70	<div class="imagify-c-level imagify-level-optimized imagify-level-normal" aria-hidden="true">
71	<p class="imagify-c-level-row">
72	<span class="label"><?php esc_html_e( 'Level:', 'imagify' ); ?></span>
73	<span class="value level"><?php esc_html_e( 'Normal', 'imagify' ); ?></span>
74	</p>
75	<p class="imagify-c-level-row">
76	<span class="label"><?php esc_html_e( 'File Size:', 'imagify' ); ?></span>
77	<span class="value size"><?php echo esc_html( imagify_size_format( 301056 ) ); ?></span>
78	</p>
79	<p class="imagify-c-level-row">
80	<span class="label"><?php esc_html_e( 'Original Saving:', 'imagify' ); ?></span>
81	<span class="value">
82	<span class="imagify-chart">
83	<span class="imagify-chart-container">
84	<canvas id="imagify-consumption-chart-normal" width="15" height="15"></canvas>
85	</span>
86	</span><span class="imagify-chart-value">12.24</span>%
87	</span>
88	</p>
89	</div>
90	<div class="imagify-c-level imagify-level-aggressive">
91	<p class="imagify-c-level-row">
92	<span class="label"><?php esc_html_e( 'Level:', 'imagify' ); ?></span>
93	<span class="value level"><?php esc_html_e( 'Aggressive', 'imagify' ); ?></span>
94	</p>
95	<p class="imagify-c-level-row">
96	<span class="label"><?php esc_html_e( 'File Size:', 'imagify' ); ?></span>
97	<span class="value size"><?php echo esc_html( imagify_size_format( 108544 ) ); ?></span>
98	</p>
99	<p class="imagify-c-level-row">
100	<span class="label"><?php esc_html_e( 'Original Saving:', 'imagify' ); ?></span>
101	<span class="value">
102	<span class="imagify-chart">
103	<span class="imagify-chart-container">
104	<canvas id="imagify-consumption-chart-aggressive" width="15" height="15"></canvas>
105	</span>
106	</span><span class="imagify-chart-value">68.36</span>%
107	</span>
108	</p>
109	</div>
110
111	<div class="imagify-c-level imagify-level-ultra go-right">
112	<p class="imagify-c-level-row">
113	<span class="label"><?php esc_html_e( 'Level:', 'imagify' ); ?></span>
114	<span class="value level"><?php esc_html_e( 'Ultra', 'imagify' ); ?></span>
115	</p>
116	<p class="imagify-c-level-row">
117	<span class="label"><?php esc_html_e( 'File Size:', 'imagify' ); ?></span>
118	<span class="value size"><?php echo esc_html( imagify_size_format( 46080 ) ); ?></span>
119	</p>
120	<p class="imagify-c-level-row">
121	<span class="label"><?php esc_html_e( 'Original Saving:', 'imagify' ); ?></span>
122	<span class="value">
123	<span class="imagify-chart">
124	<span class="imagify-chart-container">
125	<canvas id="imagify-consumption-chart-ultra" width="15" height="15"></canvas>
126	</span>
127	</span><span class="imagify-chart-value">86.57</span>%
128	</span>
129	</p>
130	</div>
131	</div>
132
133	<button type="button" class="close-btn">
134	<i class="dashicons dashicons-no-alt" aria-hidden="true"></i>
135	<span class="screen-reader-text"><?php esc_html_e( 'Close', 'imagify' ); ?></span>
136	</button>
137	</div>
138	</div>
139
140	<?php
141