1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
|
<?php
/**
* WebP configarations meta box.
*
* @since 3.8.0
* @package WP_Smush
*
* @var array $servers List of server names.
* @var string $detected_server Current server name detected by this plugin..
* @var array $detected_server_name Current server name ( human readable ) detected by this plugin.
* @var string $nginx_config_code Configuration code for NGINX server.
* @var string $apache_htaccess_code htaccess code for Apache server.
* @var bool $is_htaccess_written Whether htaccess rules have been written or not.
*/
if ( ! defined( 'WPINC' ) ) {
die;
}
?>
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<span class="sui-settings-label">
<?php esc_html_e( 'Server type', 'wp-smushit' ); ?>
</span>
<span class="sui-description">
<?php
esc_html_e( 'Choose your server type. If you don\'t know this, please contact your hosting provider.', 'wp-smushit' );
?>
</span>
</div>
<div class="sui-box-settings-col-2">
<div class="sui-form-field sui-input-md">
<label for="webp-server-type" id="label-webp-server-type" class="sui-settings-label" style="font-size:13px;color:#888888;">
<?php esc_html_e( 'Server type', 'wp-smushit' ); ?>
</label>
<select id="webp-server-type" name="webp-server-type" aria-labelledby="label-webp-server-type" aria-describedby="description-webp-server-type">
<?php foreach ( $servers as $key => $name ) : ?>
<option value="<?php echo esc_attr( $key ); ?>" <?php selected( $detected_server, $key ); ?>><?php echo esc_html( $name ); ?></option>
<?php endforeach; ?>
</select>
</div>
<?php if ( ! empty( $detected_server_name ) ) : ?>
<div class="sui-notice">
<div class="sui-notice-content">
<div class="sui-notice-message">
<i class="sui-notice-icon sui-icon-info sui-md" aria-hidden="true"></i>
<p>
<?php /* translators: server type name. */ ?>
<?php echo sprintf( esc_html( __( 'We\'ve automatically detected your server type is %s. If this is incorrect, manually select your server type to generate the relevant rules and instructions.', 'wp-smushit' ) ), esc_html( $detected_server_name ) ); ?>
</p>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<span class="sui-settings-label">
<?php esc_html_e( 'Enable conversion', 'wp-smushit' ); ?>
</span>
<span class="sui-description">
<?php
esc_html_e( 'Follow the instructions to activate WebP conversion for this website.', 'wp-smushit' );
?>
</span>
</div>
<div class="sui-box-settings-col-2">
<div id="webp-server-instructions-apache" class="webp-server-instructions sui-hidden" data-server="apache">
<div class="sui-tabs">
<div role="tablist" class="sui-tabs-menu">
<button type="button" role="tab" id="webp-tab-auto" class="sui-tab-item active" aria-controls="webp-tab-content-auto" aria-selected="true">
<?php esc_html_e( 'AUTOMATIC', 'wp-smushit' ); ?>
</button>
<button type="button" role="tab" id="webp-tab-manual" class="sui-tab-item" aria-controls="webp-tab-content-manual" aria-selected="false" tabindex="-1">
<?php esc_html_e( 'MANUAL', 'wp-smushit' ); ?>
</button>
</div>
<div class="sui-tabs-content">
<div role="tabpanel" tabindex="0" id="webp-tab-content-auto" class="sui-tab-content active" aria-labelledby="webp-tab-auto">
<p class="sui-description">
<?php esc_html_e( 'Smush can automatically apply WebP conversion rules for Apache servers by writing your .htaccess file. Alternatively, switch to Manual to apply these rules yourself.', 'wp-smushit' ); ?>
</p>
<p class="sui-description">
<?php esc_html_e( 'Please note: Some servers have both Apache and NGINX software which may not begin serving WebP images after applying the .htaccess rules. If errors occur after applying the rules, we recommend adding NGINX rules manually.', 'wp-smushit' ); ?>
</p>
<?php if ( $is_htaccess_written ) : ?>
<button type="button" id="smush-webp-remove-htaccess" class="sui-button sui-button-ghost">
<span class="sui-loading-text">
<i class="sui-icon-trash" aria-hidden="true"></i><?php esc_html_e( 'Remove rules', 'wp-smushit' ); ?>
</span>
<i class="sui-icon-loader sui-loading" aria-hidden="true"></i>
</button>
<?php else : ?>
<button type="button" id="smush-webp-apply-htaccess" class="sui-button sui-button-blue">
<span class="sui-loading-text"><?php esc_html_e( 'Apply rules', 'wp-smushit' ); ?></span>
<i class="sui-icon-loader sui-loading" aria-hidden="true"></i>
</button>
<?php endif; ?>
</div>
<div role="tabpanel" tabindex="0" id="webp-tab-content-manual" class="sui-tab-content" aria-labelledby="webp-tab-manual" hidden>
<p class="sui-description">
<?php esc_html_e( 'If you are unable to get the automated method working, you can copy the generated code below into your .htaccess file in the uploads directory (wp-content/uploads) to activate WebP conversion. If the file does not exist, you can create one.', 'wp-smushit' ); ?>
</p>
<ol class="sui-description">
<li>
<?php esc_html_e( 'Copy & paste the generated code below into your .htaccess file in the uploads directory (wp-content/uploads). If the file does not exist, you can create one', 'wp-smushit' ); ?>
</li>
<li>
<?php
printf(
/* translators: 1. opening 'a' tag to check Webp conversion status, 2. closing 'a' tag, 3. opening 'a' tag to premium support. */
esc_html__( 'Next, %1$sre-check WebP conversion status%2$s to see if it worked. %3$sStill having issues?%2$s', 'wp-smushit' ),
'<a href="#smush-webp-recheck" id="smush-webp-recheck-link">',
'</a>',
'<a href="https://premium.wpmudev.org/hub/support/#get-support" target="_blank">'
);
?>
</li>
</ol>
<pre class="sui-code-snippet"><?php echo esc_html( $apache_htaccess_code ); ?></pre>
<h5 class="sui-settings-label" style="margin-top: 30px; font-size: 13px; color: #333333;"><?php esc_html_e( 'Troubleshooting', 'wp-smushit' ); ?></h5>
<p class="sui-description">
<?php esc_html_e( 'If .htaccess does not work, and you have access to vhosts.conf or httpd.conf try this', 'wp-smushit' ); ?>:
</p>
<ol class="sui-description">
<li>
<?php esc_html_e( 'Look for your site in the file and find the line that starts with <Directory> - add the code above that line and into that section and save the file.', 'wp-smushit' ); ?>
</li>
<li>
<?php esc_html_e( 'Reload Apache.', 'wp-smushit' ); ?>
</li>
<li>
<?php esc_html_e( "If you don't know where those files are, or you aren't able to reload Apache, you would need to consult with your hosting provider or a system administrator who has access to change the configuration of your server", 'wp-smushit' ); ?>
</li>
</ol>
<p class="sui-description">
<?php
printf(
/* translators: 1. opening 'a' tag to check Webp conversion status, 2. closing 'a' tag, 3. opening 'a' tag to premium support. */
esc_html__( 'Next, %1$sre-check WebP conversion status%2$s to see if it worked. %3$sStill having issues?%2$s', 'wp-smushit' ),
'<a href="#smush-webp-recheck" id="smush-webp-recheck-link">',
'</a>',
'<a href="https://premium.wpmudev.org/hub/support/#get-support" target="_blank">'
);
?>
</li>
</div>
<pre class="sui-code-snippet"><?php echo esc_html( $apache_htaccess_code ); ?></pre>
<h5 class="sui-settings-label" style="margin-top: 30px; font-size: 13px; color: #333333;"><?php esc_html_e( 'Troubleshooting', 'wp-smushit' ); ?></h5>
<p class="sui-description">
<?php esc_html_e( 'If .htaccess does not work, and you have access to vhosts.conf or httpd.conf try this', 'wp-smushit' ); ?>:
</p>
<ol class="sui-description">
<li>
<?php esc_html_e( 'Look for your site in the file and find the line that starts with <Directory> - add the code above into that section and save the file.', 'wp-smushit' ); ?>
</li>
<li>
<?php esc_html_e( 'Reload Apache.', 'wp-smushit' ); ?>
</li>
<li>
<?php esc_html_e( 'If you don\'t know where those files are, or you aren\'t able to reload Apache, you would need to consult with your hosting provider or a system administrator who has access to change the configuration of your server.', 'wp-smushit' ); ?>
</li>
</ol>
<p class="sui-description">
<?php
printf(
/* translators: 1. opening 'a' tag to premium support, 2. closing 'a' tag. */
esc_html__( 'Still having trouble? %1$sGet support%2$s.', 'wp-smushit' ),
'<a href="https://premium.wpmudev.org/hub/support/#get-support" target="_blank">',
'</a>'
);
?>
</p>
</div><!-- /.sui-tabs -->
</div><!-- #webp-server-instructions-apache -->
</div>
<div id="webp-server-instructions-nginx" class="webp-server-instructions sui-hidden" data-server="nginx">
<span class="sui-settings-label" style="font-size:13px; color:#333333;font-weight:bold">
<?php esc_html_e( 'For NGINX servers:', 'wp-smushit' ); ?>
</span>
<ol class="sui-description">
<li>
<?php esc_html_e( 'Insert the following in the server context of your configuration file (usually found in /etc/nginx/sites-available). "The server context" refers to the part of the configuration that starts with "server {" and ends with the matching "}".', 'wp-smushit' ); ?>
</li>
<li>
<?php esc_html_e( 'Copy the generated code found below and paste it inside your server block.', 'wp-smushit' ); ?>
</li>
<li>
<?php esc_html_e( 'Reload NGINX.', 'wp-smushit' ); ?>
</li>
</ol>
<pre class="sui-code-snippet"><?php echo esc_html( $nginx_config_code ); ?></pre>
<span class="sui-settings-label sui-margin-top" style="font-size:13px; color:#333333;font-weight:bold">
<?php esc_html_e( 'Troubleshooting:', 'wp-smushit' ); ?>
</span>
<p class="sui-description">
<?php esc_html_e( 'If you do not have access to your NGINX config files you will need to contact your hosting provider to make these changes.', 'wp-smushit' ); ?>
</p>
<p class="sui-description">
<?php
printf(
/* translators: 1. opening 'a' tag to premium support, 2. closing 'a' tag. */
esc_html__( 'Still having trouble? %1$sGet support%2$s.', 'wp-smushit' ),
'<a href="https://premium.wpmudev.org/hub/support/#get-support" target="_blank">',
'</a>'
);
?>
</p>
</div><!-- #webp-server-instructions-nginx -->
</div>
</div>
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<span class="sui-settings-label">
<?php esc_html_e( 'Revert WebP Conversion', 'wp-smushit' ); ?>
</span>
<span class="sui-description"><?php esc_html_e( 'If your server storage space is full, use this feature to revert the WebP conversions by deleting all generated files. The files will fall back to normal PNGs or JPEGs once you delete them.', 'wp-smushit' ); ?></span>
</div>
<div class="sui-box-settings-col-2">
<button
type="button"
class="sui-button sui-button-ghost"
id="wp-smush-webp-delete-all-modal-open"
data-modal-open="wp-smush-wp-delete-all-dialog"
data-modal-close-focus="wp-smush-webp-delete-all-modal-open"
>
<span class="sui-loading-text">
<i class="sui-icon-trash" aria-hidden="true"></i>
<?php esc_html_e( 'Delete WebP Files', 'wp-smushit' ); ?>
</span>
<i class="sui-icon-loader sui-loading" aria-hidden="true"></i>
</button>
<span class="sui-description">
<?php
esc_html_e( 'This feature won’t delete the WebP files converted via CDN, only the files generated via the local WebP feature.', 'wp-smushit' );
?>
</span>
</div>
</div>
<div class="sui-box-settings-row">
<div class="sui-box-settings-col-1">
<span class="sui-settings-label">
<?php esc_html_e( 'Deactivate', 'wp-smushit' ); ?>
</span>
<span class="sui-description">
<?php
esc_html_e(
'If you no longer want to use this feature, click on Deactivate and we will disable the feature.',
'wp-smushit'
);
?>
</span>
</div>
<div class="sui-box-settings-col-2">
<button class="sui-button sui-button-ghost" id="smush-toggle-webp-button" data-action="disable">
<span class="sui-loading-text">
<i class="sui-icon-power-on-off" aria-hidden="true"></i><?php esc_html_e( 'Deactivate', 'wp-smushit' ); ?>
</span>
<i class="sui-icon-loader sui-loading" aria-hidden="true"></i>
</button>
<span class="sui-description">
<?php esc_html_e( 'Deactivation won’t delete existing WebP images.', 'wp-smushit' ); ?>
</span>
</div>
</div>
|