← All changes | views/modal-settings-visual-comparison.php +43 -43 1.10 → trunk View file →

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