| 1 |
<?php |
| 2 |
|
| 3 |
use Imagify\Stats\OptimizedMediaWithoutNextGen; |
| 4 |
use Imagify\Webp\Display; |
| 5 |
|
| 6 |
defined( 'ABSPATH' ) || exit; |
| 7 |
|
| 8 |
$settings = Imagify_Settings::get_instance(); |
| 9 |
?> |
| 10 |
<div> |
| 11 |
<h3 class="imagify-options-subtitle"><?php esc_html_e( 'Next-Gen image format', 'imagify' ); ?></h3> |
| 12 |
|
| 13 |
<div class="imagify-setting-line"> |
| 14 |
<?php |
| 15 |
$message = __( 'Select WebP for high compatibility, AVIF for superior compression. Please note that the generation process will start automatically after saving the settings.', 'imagify' ); |
| 16 |
$message_class = 'info'; |
| 17 |
$disabled = false; |
| 18 |
|
| 19 |
if ( has_filter( 'imagify_nextgen_images_formats' ) ) { |
| 20 |
$message = sprintf( |
| 21 |
// translators: %1$s and %2$s are <code> tag opening and closing, %3$s and %4$s are <a> tag opening and closing. |
| 22 |
__( 'Next-Gen Images format is currently defined by the %1$simagify_nextgen_images_format%2$s filter. %3$sRead more%4$s', 'imagify' ), |
| 23 |
'<code>', |
| 24 |
'</code>', |
| 25 |
'<a href="https://imagify.io/documentation/how-to-use-the-next-gen-image-format-filter/" target="_blank">', |
| 26 |
'</a>' |
| 27 |
); |
| 28 |
|
| 29 |
$message_class = 'error'; |
| 30 |
$disabled = true; |
| 31 |
} |
| 32 |
|
| 33 |
$attributes = [ |
| 34 |
'aria-describedby' => 'describe-optimization_format', |
| 35 |
]; |
| 36 |
|
| 37 |
if ( $disabled ) { |
| 38 |
$attributes['disabled'] = true; |
| 39 |
} |
| 40 |
|
| 41 |
$settings->field_inline_radio_list( |
| 42 |
[ |
| 43 |
'option_name' => 'optimization_format', |
| 44 |
'legend' => __( 'Next-gen image format', 'imagify' ), |
| 45 |
'info' => $message, |
| 46 |
'info_class' => $message_class, |
| 47 |
'values' => [ |
| 48 |
'off' => __( 'Off', 'imagify' ), |
| 49 |
'avif' => __( 'AVIF', 'imagify' ), |
| 50 |
'webp' => __( 'WebP', 'imagify' ), |
| 51 |
], |
| 52 |
'attributes' => $attributes, |
| 53 |
] |
| 54 |
); |
| 55 |
?> |
| 56 |
</div> |
| 57 |
|
| 58 |
<div class="imagify-setting-line"> |
| 59 |
|
| 60 |
<div class="imagify-options-line"> |
| 61 |
<?php |
| 62 |
$settings->field_checkbox( |
| 63 |
[ |
| 64 |
'option_name' => 'display_nextgen', |
| 65 |
'label' => __( 'Display images in Next-Gen format on the site', 'imagify' ), |
| 66 |
] |
| 67 |
); |
| 68 |
?> |
| 69 |
|
| 70 |
<div class="imagify-options-line"> |
| 71 |
<?php |
| 72 |
$settings->field_radio_list( |
| 73 |
[ |
| 74 |
'option_name' => 'display_nextgen_method', |
| 75 |
'values' => [ |
| 76 |
'rewrite' => __( 'Use rewrite rules', 'imagify' ), |
| 77 |
/* translators: 1 and 2 are <em> tag opening and closing. */ |
| 78 |
'picture' => sprintf( __( 'Use <picture> tags %1$s(preferred)%2$s', 'imagify' ), '<em>', '</em>' ), |
| 79 |
], |
| 80 |
'attributes' => [ |
| 81 |
'aria-describedby' => 'describe-convert_to_webp', |
| 82 |
], |
| 83 |
] |
| 84 |
); |
| 85 |
?> |
| 86 |
|
| 87 |
<div class="imagify-options-line"> |
| 88 |
<?php |
| 89 |
$cdn_source = apply_filters( 'imagify_cdn_source_url', '' ); |
| 90 |
|
| 91 |
if ( 'option' !== $cdn_source['source'] ) { |
| 92 |
if ( 'constant' === $cdn_source['source'] ) { |
| 93 |
printf( |
| 94 |
/* translators: 1 is an URL, 2 is a php constant name. */ |
| 95 |
esc_html__( 'Your CDN URL is set to %1$s by the constant %2$s.', 'imagify' ), |
| 96 |
'<code>' . esc_url( $cdn_source['url'] ) . '</code>', |
| 97 |
'<code>' . esc_html( $cdn_source['name'] ) . '</code>' |
| 98 |
); |
| 99 |
} elseif ( ! empty( $cdn_source['name'] ) ) { |
| 100 |
printf( |
| 101 |
/* translators: 1 is an URL, 2 is a plugin name. */ |
| 102 |
esc_html__( 'Your CDN URL is set to %1$s by %2$s.', 'imagify' ), |
| 103 |
'<code>' . esc_url( $cdn_source['url'] ) . '</code>', |
| 104 |
'<code>' . esc_html( $cdn_source['name'] ) . '</code>' |
| 105 |
); |
| 106 |
} else { |
| 107 |
printf( |
| 108 |
/* translators: %s is an URL. */ |
| 109 |
esc_html__( 'Your CDN URL is set to %1$s by filter.', 'imagify' ), |
| 110 |
'<code>' . esc_url( $cdn_source['url'] ) . '</code>' |
| 111 |
); |
| 112 |
} |
| 113 |
|
| 114 |
$settings->field_hidden( |
| 115 |
[ |
| 116 |
'option_name' => 'cdn_url', |
| 117 |
'current_value' => $cdn_source['url'], |
| 118 |
] |
| 119 |
); |
| 120 |
} else { |
| 121 |
$settings->field_text_box( |
| 122 |
[ |
| 123 |
'option_name' => 'cdn_url', |
| 124 |
'label' => __( 'If you use a CDN, specify the URL:', 'imagify' ), |
| 125 |
'attributes' => [ |
| 126 |
'size' => 30, |
| 127 |
'placeholder' => __( 'https://cdn.example.com', 'imagify' ), |
| 128 |
], |
| 129 |
] |
| 130 |
); |
| 131 |
} |
| 132 |
?> |
| 133 |
</div> |
| 134 |
</div> |
| 135 |
|
| 136 |
<div id="describe-display_nextgen_method" class="imagify-info"> |
| 137 |
<span class="dashicons dashicons-info"></span> |
| 138 |
<?php |
| 139 |
$conf_file_path = Display::get_instance()->get_file_path( true ); |
| 140 |
|
| 141 |
if ( $conf_file_path ) { |
| 142 |
printf( |
| 143 |
/* translators: 1 is a file name, 2 is a <strong> tag opening, 3 is the <strong> tag closing. */ |
| 144 |
esc_html__( 'The first option adds rewrite rules to your site’s configuration file (%1$s) and does not alter your pages code. %2$sThis does not work with CDN though.%3$s', 'imagify' ), |
| 145 |
'<code>' . esc_html( $conf_file_path ) . '</code>', |
| 146 |
'<strong>', |
| 147 |
'</strong>' |
| 148 |
); |
| 149 |
|
| 150 |
echo '<br/>'; |
| 151 |
} |
| 152 |
|
| 153 |
printf( |
| 154 |
/* translators: 1 and 2 are HTML tag names, 3 is a <strong> tag opening, 4 is the <strong> tag closing. */ |
| 155 |
esc_html__( 'The second option replaces the %1$s tags with %2$s tags. %3$sThis is the preferred solution but some themes may break%4$s, so make sure to verify that everything seems fine.', 'imagify' ), |
| 156 |
'<code><img></code>', |
| 157 |
'<code><picture></code>', |
| 158 |
'<strong>', |
| 159 |
'</strong>' |
| 160 |
); |
| 161 |
|
| 162 |
echo '<br/>'; |
| 163 |
|
| 164 |
/** |
| 165 |
* Add more information about WebP. |
| 166 |
* |
| 167 |
* @since 1.9 |
| 168 |
* @author Grégory Viguier |
| 169 |
*/ |
| 170 |
do_action( 'imagify_settings_webp_info' ); |
| 171 |
?> |
| 172 |
</div> |
| 173 |
</div> |
| 174 |
|
| 175 |
<?php |
| 176 |
$count = OptimizedMediaWithoutNextGen::get_instance()->get_cached_stat(); |
| 177 |
|
| 178 |
if ( $count ) { |
| 179 |
?> |
| 180 |
<div class="imagify-options-line hide-if-no-js generate-missing-webp"> |
| 181 |
<?php $this->print_template( 'part-settings-webp-missing-message', [ 'count' => $count ] ); ?> |
| 182 |
|
| 183 |
<button id="imagify-generate-webp-versions" class="button imagify-button-primary imagify-button-mini" type="button"> |
| 184 |
<span class="dashicons dashicons-admin-generic"></span> |
| 185 |
<?php |
| 186 |
/* |
| 187 |
* Keep this string byte-identical to the ability label in |
| 188 |
* classes/Abilities/GenerateMissingNextgen.php: same wording means one shared |
| 189 |
* entry on translate.wordpress.org rather than two. The casing looks off next |
| 190 |
* to the rest of the UI, but the button is uppercased by CSS, so it renders as |
| 191 |
* "GENERATE MISSING NEXT-GEN VERSIONS" either way. Re-casing it here would |
| 192 |
* silently fork the two into separate strings to translate. |
| 193 |
*/ |
| 194 |
?> |
| 195 |
<span class="button-text"><?php esc_html_e( 'Generate missing next-gen versions', 'imagify' ); ?></span> |
| 196 |
</button> |
| 197 |
|
| 198 |
<?php |
| 199 |
$remaining = OptimizedMediaWithoutNextGen::get_instance()->get_stat(); |
| 200 |
$total = get_transient( 'imagify_missing_next_gen_total' ); |
| 201 |
$progress = 0; |
| 202 |
$aria = ' aria-hidden="true"'; |
| 203 |
$class = 'hidden'; |
| 204 |
$style = ''; |
| 205 |
|
| 206 |
if ( |
| 207 |
false !== $total |
| 208 |
&& |
| 209 |
$total > 0 |
| 210 |
) { |
| 211 |
$aria = ''; |
| 212 |
$class = ''; |
| 213 |
|
| 214 |
/* |
| 215 |
* `$total` is a snapshot taken when the run started, while `$remaining` is |
| 216 |
* recounted on every page load. Anything growing the workload mid-run (new |
| 217 |
* uploads, or switching the Next-Gen format so every media is missing one) |
| 218 |
* pushes `$remaining` above `$total`, and `$total - $remaining` goes negative. |
| 219 |
* Report against the largest workload seen instead. Mirrors getProgress() in |
| 220 |
* assets/js/options.js. |
| 221 |
*/ |
| 222 |
$remaining = max( (int) $remaining, 0 ); |
| 223 |
$effective_total = max( (int) $total, $remaining ); |
| 224 |
$processed = $effective_total - $remaining; |
| 225 |
$progress = $processed . '/' . $effective_total; |
| 226 |
$percent = $effective_total > 0 ? floor( $processed / $effective_total * 100 ) : 0; |
| 227 |
$style = 'style="width:' . $percent . '%;"'; |
| 228 |
} |
| 229 |
?> |
| 230 |
|
| 231 |
<div <?php echo $aria; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> class="imagify-progress <?php echo esc_attr( $class ); ?>"> |
| 232 |
<div class="progress"> |
| 233 |
<div class="bar" <?php echo $style; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>><div class="percent"><?php echo esc_html( $progress ); ?></div></div> |
| 234 |
</div> |
| 235 |
</div> |
| 236 |
</div> |
| 237 |
<?php |
| 238 |
if ( Imagify_Requirements::is_api_key_valid() ) { |
| 239 |
?> |
| 240 |
<script type="text/html" id="tmpl-imagify-overquota-alert"> |
| 241 |
<?php $this->print_template( 'part-bulk-optimization-overquota-alert' ); ?> |
| 242 |
</script> |
| 243 |
<?php |
| 244 |
} |
| 245 |
} |
| 246 |
?> |
| 247 |
</div> |
| 248 |
</div> |
| 249 |
<?php |
| 250 |
|
