imagify / views / page-bulk.php

page-bulk.php in Imagify Image Optimization: Optimize Images | Compress & Convert to WebP/AVIF 1.7, at views/page-bulk.php

250 lines 9.5 KB

Raw Download Zip

1	<?php
2	defined( 'ABSPATH' ) \|\| die( 'Cheatin\' uh?' );
3	?>
4	<div class="wrap imagify-settings imagify-bulk">
5
6	<?php $this->print_template( 'part-bulk-optimization-header' ); ?>
7
8	<div class="imagify-settings-section">
9
10	<div class="imagify-columns">
11	<div class="imagify-col col-overview">
12	<h2 class="imagify-h2-like">
13	<span class="dashicons dashicons-chart-line"></span>
14	<?php esc_html_e( 'Overview', 'imagify' ); ?>
15	</h2>
16
17	<div class="imagify-columns">
18	<div class="imagify-col col-statistics">
19	<h3 class="screen-reader-text"><?php esc_html_e( 'Statistics', 'imagify' ); ?></h3>
20
21	<div class="imagify-number-you-optimized">
22	<p>
23	<span id="imagify-total-optimized-attachments" class="number"><?php echo esc_html( number_format_i18n( $data['already_optimized_attachments'] ) ); ?></span>
24	<span class="text">
25	<?php
26	printf(
27	/* translators: you can use %s to include a line break. */
28	esc_html__( 'that\'s the number of original images%s you optimized with Imagify', 'imagify' ),
29	'<br>'
30	);
31	?>
32	</span>
33	</p>
34	</div>
35
36	<div class="imagify-bars">
37	<p><?php esc_html_e( 'Original size', 'imagify' ); ?></p>
38	<div class="imagify-bar-negative base-transparent right-outside-number">
39	<div id="imagify-original-bar" class="imagify-progress" style="width: 100%"><span class="imagify-barnb"><?php echo esc_html( imagify_size_format( $data['original_size'], 1 ) ); ?></span></div>
40	</div>
41
42	<p><?php esc_html_e( 'Optimized size', 'imagify' ); ?></p>
43	<div class="imagify-bar-primary base-transparent right-outside-number">
44	<div id="imagify-optimized-bar" class="imagify-progress" style="width: <?php echo max( 100 - $data['optimized_percent'], 0 ); ?>%"><span class="imagify-barnb"><?php echo esc_html( imagify_size_format( $data['optimized_size'], 1 ) ); ?></span></div>
45	</div>
46
47	</div>
48
49	<div class="imagify-number-you-optimized">
50	<p>
51	<span id="imagify-total-optimized-attachments-pct" class="number"><?php echo esc_html( number_format_i18n( $data['optimized_percent'] ) ); ?>%</span>
52	<span class="text">
53	<?php
54	printf(
55	/* translators: %s is a line break. */
56	esc_html__( 'that\'s the size you saved %sby using Imagify', 'imagify' ),
57	'<br>'
58	);
59	?>
60	</span>
61	</p>
62	</div>
63	</div><!-- .imagify-col.col-statistics -->
64
65	<div class="imagify-col col-chart">
66	<div class="imagify-chart-container imagify-overview-chart-container">
67	<canvas id="imagify-overview-chart" width="180" height="180" data-unoptimized="<?php echo esc_attr( $data['unoptimized_attachments'] ); ?>" data-optimized="<?php echo esc_attr( $data['optimized_attachments'] ); ?>" data-errors="<?php echo esc_attr( $data['errors_attachments'] ); ?>"></canvas>
68	<div id="imagify-overview-chart-percent" class="imagify-chart-percent"><?php echo esc_html( min( $data['optimized_attachments_percent'], 100 ) ); ?><span>%</span></div>
69	</div>
70	<div id="imagify-overview-chart-legend"></div>
71
72	<p class="imagify-global-optim-phrase imagify-clear">
73	<?php
74	printf(
75	/* translators: %s is a percentage. */
76	esc_html__( 'You optimized %s of your website\'s images', 'imagify' ),
77	'<span class="imagify-total-percent">' . esc_html( min( $data['optimized_attachments_percent'], 100 ) ) . '%</span>'
78	);
79	?>
80	</p>
81	</div><!-- .imagify-col -->
82	</div>
83	</div><!-- .imagify-col.col-overview -->
84
85	<div class="imagify-col imagify-account-info-col">
86
87	<?php
88	if ( ( ! defined( 'IMAGIFY_HIDDEN_ACCOUNT' ) \|\| ! IMAGIFY_HIDDEN_ACCOUNT ) && imagify_valid_key() ) {
89	$user = new Imagify_User();
90	?>
91	<div class="imagify-options-title">
92	<p class="imagify-meteo-title">
93	<span class="dashicons dashicons-admin-users"></span>
94	<?php esc_html_e( 'Your Account', 'imagify' ); ?>
95	</p>
96
97	<a href="<?php echo esc_url( imagify_get_external_url( 'subscription' ) ); ?>" target="_blank"><?php _e( 'View your profile', 'imagify' ); ?></a>
98
99	<p class="imagify-meteo-subs">
100	<span class="screen-reader-text"><?php _e( 'Your subscription:', 'imagify' ); ?></span>
101	<strong class="imagify-user-plan imagify-user-plan-label"><?php echo $user->plan_label; ?></strong>
102	</p>
103	</div>
104
105	<?php if ( $user && 1 === $user->plan_id ) { ?>
106	<div class="imagify-col-content">
107	<?php
108	$unconsumed_quota = $user->get_percent_unconsumed_quota();
109	$meteo_icon = '<img src="' . IMAGIFY_ASSETS_IMG_URL . 'sun.svg" width="63" height="64" alt="" />';
110	$bar_class = 'positive';
111	$is_display_bubble = false;
112
113	if ( $unconsumed_quota >= 21 && $unconsumed_quota <= 50 ) {
114	$bar_class = 'neutral';
115	$meteo_icon = '<img src="' . IMAGIFY_ASSETS_IMG_URL . 'cloudy-sun.svg" width="63" height="64" alt="" />';
116	} elseif ( $unconsumed_quota <= 20 ) {
117	$bar_class = 'negative';
118	$is_display_bubble = true;
119	$meteo_icon = '<img src="' . IMAGIFY_ASSETS_IMG_URL . 'stormy.svg" width="64" height="63" alt="" />';
120	}
121	?>
122	<div class="imagify-flex imagify-vcenter">
123	<span class="imagify-meteo-icon imagify-noshrink"><?php echo $meteo_icon; ?></span>
124	<div class="imagify-space-left imagify-full-width">
125
126	<p>
127	<?php
128	printf(
129	/* translators: %s is a data quota. */
130	__( 'You have %s space credit left' , 'imagify' ),
131	'<span class="imagify-unconsumed-percent">' . $unconsumed_quota . '%</span>'
132	);
133	?>
134	</p>
135
136	<div class="imagify-bar-<?php echo $bar_class; ?>">
137	<div class="imagify-unconsumed-bar imagify-progress" style="width: <?php echo $unconsumed_quota . '%'; ?>;"></div>
138	</div>
139	</div>
140	</div>
141	<?php
142	/**
143	* Filter whether the plan chooser section is displayed.
144	*
145	* @param $show_new bool Default to true: display the section.
146	*/
147	if ( apply_filters( 'imagify_show_new_to_imagify', true ) ) {
148	?>
149	<div class="imagify-block-secondary">
150	<p class="imagify-section-title imagify-h3-like">
151	<?php
152	if ( ! $unconsumed_quota ) {
153	esc_html_e( 'Oops, It\'s Over!', 'imagify' );
154	} elseif ( $unconsumed_quota <= 20 ) {
155	esc_html_e( 'Oops, It\'s almost over!', 'imagify' );
156	} else {
157	esc_html_e( 'You\'re new to Imagify?', 'imagify' );
158	}
159	?>
160	</p>
161	<p><?php esc_html_e( 'Let us help you by analyzing your existing images and determine the best plan for you.', 'imagify' ); ?></p>
162
163	<button id="imagify-get-pricing-modal" data-nonce="<?php echo wp_create_nonce( 'imagify_get_pricing_' . get_current_user_id() ); ?>" data-target="#imagify-pricing-modal" type="button" class="imagify-modal-trigger imagify-button imagify-button-light imagify-button-big imagify-full-width">
164	<i class="dashicons dashicons-dashboard" aria-hidden="true"></i>
165	<span class="button-text"><?php _e( 'What plan do I need?', 'imagify' ); ?></span>
166	</button>
167	</div>
168	<?php
169	}
170	?>
171	</div><!-- .imagify-col-content -->
172	<?php } // End if(). ?>
173	<?php } // End if(). ?>
174
175	</div><!-- .imagify-account-info-col -->
176
177	</div><!-- .imagify-columns -->
178
179	<?php
180	$this->print_template( 'part-bulk-optimization-success' );
181
182	$this->print_template( 'part-bulk-optimization-table', $data );
183
184	// New Feature!
185	if ( ! empty( $data['no-custom-folders'] ) ) {
186	$this->print_template( 'part-bulk-optimization-newbie' );
187	}
188	?>
189
190	<div class="imagify-bulk-submit imagify-flex imagify-vcenter">
191	<div class="imagify-pr2">
192	<p>
193	<?php wp_nonce_field( 'imagify-bulk-upload', 'imagifybulkuploadnonce' ); ?>
194	<button id="imagify-bulk-action" type="button" class="button button-primary">
195	<span class="dashicons dashicons-admin-generic"></span>
196	<span class="button-text"><?php _e( 'Imagif\'em all', 'imagify' ); ?></span>
197	</button>
198	</p>
199	</div>
200	<?php if ( ! is_wp_error( get_imagify_max_image_size() ) ) { ?>
201	<p>
202	<?php
203	printf(
204	/* translators: %s is a file size. */
205	esc_html__( 'All images greater than %s will be optimized when using a paid plan.', 'imagify' ),
206	esc_html( imagify_size_format( get_imagify_max_image_size() ) )
207	);
208	?>
209	</p>
210	<?php } ?>
211	</div><!-- .imagify-bulk-submit -->
212	</div><!-- .imagify-settings-section -->
213
214	<?php
215	$this->print_template( 'modal-payment' );
216
217	if ( imagify_valid_key() ) {
218	$display_infos = get_transient( 'imagify_bulk_optimization_infos' );
219
220	?>
221	<script type="text/html" id="tmpl-imagify-overquota-alert">
222	<?php $this->print_template( 'part-bulk-optimization-overquota-alert' ); ?>
223	</script>
224	<?php
225
226	if ( ! $display_infos ) {
227	if ( ! isset( $unconsumed_quota ) ) {
228	$user = $user ? $user : new Imagify_User();
229	$unconsumed_quota = $user->get_percent_unconsumed_quota();
230	}
231	?>
232	<script type="text/html" id="tmpl-imagify-bulk-infos">
233	<?php
234	$this->print_template( 'part-bulk-optimization-infos', array(
235	'quota' => $unconsumed_quota,
236	'library' => ! empty( $data['groups']['library'] ),
237	) );
238	?>
239	</script>
240	<?php
241	}
242	}
243	?>
244
245	<script type="text/html" id="tmpl-imagify-spinner">
246	<?php $this->print_template( 'part-bulk-optimization-spinner' ); ?>
247	</script>
248	</div>
249	<?php
250