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
|
<?php
/**
* Tutorials meta box.
*
* @since 3.7.1
* @package WP_Smush
*/
if ( ! defined( 'WPINC' ) ) {
die;
}
$tutorials = $this->get_tutorials_data();
?>
<p><?php esc_html_e( 'Read our practical Smush tutorials and discover how to harness her full image-optimizing potential.', 'wp-smushit' ); ?></p>
<div class="wp-smush-tutorials-section">
<div class="sui-row">
<?php foreach ( $tutorials as $index => $tutorial ) : ?>
<?php if ( 0 !== $index && 0 === $index % 3 ) : ?>
</div>
<div class="sui-row">
<?php endif; ?>
<div class="sui-col-md-4">
<div
tabindex="0"
role="link"
class="wp-smush-tutorial-item"
<?php /* translators: title of the article */ ?>
aria-label="<?php printf( esc_html__( 'Read article %s', 'wp-smushit' ), esc_html( $tutorial['title'] ) ); ?>"
data-href="<?php echo esc_url( $tutorial['url'] ); ?>"
data-tutorial="<?php echo esc_attr( $index ); ?>"
>
<div tabindex="-1" class="wp-smush-tutorial-item-header" aria-hidden="true" style="background-image: url(<?php echo esc_url( WP_SMUSH_URL . 'app/assets/images/tutorials/' . $tutorial['thumbnail_full_2x'] ); ?>);"></div>
<div class="wp-smush-tutorial-item-body">
<h4 class="wp-smush-tutorial-item-title"><?php echo esc_html( $tutorial['title'] ); ?></h4>
<p class="sui-description"><?php echo esc_html( $tutorial['content'] ); ?></p>
</div>
<div class="wp-smush-tutorial-item-footer">
<p tabindex="-1" class="wp-smush-read-more" aria-hidden="true"><?php esc_html_e( 'Read article', 'wp-smushit' ); ?></p>
<?php /* translators: number of minutes */ ?>
<p class="wp-smush-reading-time"><span class="sui-icon-clock sui-sm" aria-hidden="true"></span> <?php printf( esc_html__( '%d min read', 'wp-smushit' ), esc_html( $tutorial['read_time'] ) ); ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
|