← All changes | public/templates/thumbnail.php +37 -69 2.9.1 → 2.3.8 View file →

		@@ -8,89 +8,57 @@
8	8	*
9	9	* @package Automatic_YouTube_Gallery
10	10	*/
11	11
12		-$single_url = ayg_get_single_video_url( $video, $attributes );
	12	+$single_video_page_url = ayg_get_single_video_url( $video, $attributes );
	13	+?>
13	14
14		-$image_url = '';
15		-$thumb = null;
16		-$thumb_width = 320;
17		-$thumb_height = 180;
18		-$thumb_ratio = isset( $attributes['thumb_ratio'] ) ? (float) $attributes['thumb_ratio'] : 56.25;
19		-$aspect_ratio = '16 / 9';
	15	+<div class="ayg-thumbnail" data-id="<?php echo esc_attr( $video->id ); ?>" data-title="<?php echo esc_attr( $video->title ); ?>" data-url="<?php echo esc_attr( $single_video_page_url ); ?>">
	16	+ <div class="ayg-thumbnail-image-wrapper">
	17	+ <?php
	18	+ $image_src = '';
	19	+
	20	+ if ( isset( $video->thumbnails->default ) ) {
	21	+ $image_src = $video->thumbnails->default->url;
	22	+ }
	23	+
	24	+ // 4:3 ( default - 120x90, high - 480x360, standard - 640x480 )
	25	+ if ( 75 == (int) $attributes['thumb_ratio'] ) {
	26	+ if ( isset( $video->thumbnails->high ) ) {
	27	+ $image_src = $video->thumbnails->high->url;
	28	+ }
	29	+ }
	30	+
	31	+ // 16:9 ( medium - 320x180, maxres - 1280x720 )
	32	+ if ( 56.25 == (float) $attributes['thumb_ratio'] ) {
	33	+ if ( isset( $video->thumbnails->medium ) ) {
	34	+ $image_src = $video->thumbnails->medium->url;
	35	+ }
20	36
21		-if ( $thumb_ratio >= 170 ) { // Shorts / Vertical
22		- if ( isset( $video->thumbnails->maxres ) ) {
23		- $thumb = $video->thumbnails->maxres;
24		- } elseif ( isset( $video->thumbnails->medium ) ) {
25		- $thumb = $video->thumbnails->medium;
26		- } elseif ( isset( $video->thumbnails->high ) ) {
27		- $thumb = $video->thumbnails->high;
28		- }
	37	+ if ( isset( $video->thumbnails->maxres ) ) {
	38	+ $image_src = $video->thumbnails->maxres->url;
	39	+ }
	40	+ }
	41	+ ?>
	42	+ <img src="<?php echo esc_url( $image_src ); ?>" class="ayg-thumbnail-image" alt="<?php echo esc_attr( $video->title );?>" />
29	43
30		- $aspect_ratio = '9 / 16';
31		-} elseif ( $thumb_ratio >= 70 ) { // Classic 4:3
32		- if ( isset( $video->thumbnails->standard ) ) {
33		- $thumb = $video->thumbnails->standard;
34		- } elseif ( isset( $video->thumbnails->high ) ) {
35		- $thumb = $video->thumbnails->high;
36		- }
	44	+ <svg class="ayg-icon ayg-thumbnail-icon-play" width="32" height="32" viewBox="0 0 32 32" fill="#fff" title="<?php esc_attr_e( 'Play', 'automatic-youtube-gallery' ); ?>" aria-label="<?php esc_attr_e( 'Play', 'automatic-youtube-gallery' ); ?>">
	45	+ <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13zM12 9l12 7-12 7z"></path>
	46	+ </svg>
37	47
38		- $aspect_ratio = '4 / 3';
39		-} else { // Standard 16:9
40		- if ( isset( $video->thumbnails->maxres ) ) {
41		- $thumb = $video->thumbnails->maxres;
42		- } elseif ( isset( $video->thumbnails->medium ) ) {
43		- $thumb = $video->thumbnails->medium;
44		- }
45		-}
	48	+ <div class="ayg-thumbnail-active" style="display: none;"><?php esc_html_e( 'active', 'automatic-youtube-gallery' ); ?></div>
	49	+ </div>
46	50
47		-if ( empty( $thumb ) && isset( $video->thumbnails->default ) ) {
48		- $thumb = $video->thumbnails->default;
49		-}
50		-
51		-if ( isset( $thumb ) ) {
52		- $image_url = $thumb->url;
53		- $thumb_width = isset( $thumb->width ) ? (int) $thumb->width : $thumb_width;
54		- $thumb_height = isset( $thumb->height ) ? (int) $thumb->height : $thumb_height;
55		-}
56		-
57		-$image_url = apply_filters( 'ayg_thumbnail_image_url', $image_url, $video, $attributes );
58		-?>
59		-<div class="ayg-thumbnail" data-id="<?php echo esc_attr( $video->id ); ?>" data-title="<?php echo esc_attr( $video->title ); ?>" data-url="<?php echo esc_attr( $single_url ); ?>">
60		- <div class="ayg-thumbnail-media" style="--ayg-image-ratio: <?php echo esc_attr( $aspect_ratio ); ?>">
61		- <?php
62		- // Image
63		- echo sprintf(
64		- '<img src="%s" class="ayg-thumbnail-image" width="%d" height="%d" alt="%s" %s/>',
65		- esc_url( $image_url ),
66		- $thumb_width,
67		- $thumb_height,
68		- esc_attr( $video->title ),
69		- ! empty( $attributes['lazyload'] ) ? 'loading="lazy" decoding="async"' : 'decoding="async"'
70		- );
71		-
72		- // Now Playing
73		- echo sprintf(
74		- '<div class="ayg-thumbnail-now-playing" style="display: none;">%s</div>',
75		- esc_html__( 'Now Playing', 'automatic-youtube-gallery' )
76		- );
77		-
78		- // Play Icon
79		- echo sprintf(
80		- '<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="40" height="40" viewBox="0 0 24 24" class="ayg-icon ayg-thumbnail-icon-play" title="%1$s" aria-label="%1$s"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z" clip-rule="evenodd" /></svg>',
81		- esc_attr__( 'Play', 'automatic-youtube-gallery' )
82		- );
83		- ?>
84		- </div>
85	51	<div class="ayg-thumbnail-caption">
86	52	<?php if ( ! empty( $attributes['thumb_title'] ) ) : ?>
87	53	<div class="ayg-thumbnail-title"><?php echo esc_html( ayg_trim_words( $video->title, (int) $attributes['thumb_title_length'] ) ); ?></div>
88	54	<?php endif; ?>
	55	+
89	56	<?php if ( ! empty( $attributes['thumb_excerpt'] ) && ! empty( $video->description ) ) : ?>
90	57	<div class="ayg-thumbnail-excerpt"><?php echo wp_kses_post( ayg_trim_words( $video->description, (int) $attributes['thumb_excerpt_length'] ) ); ?></div>
91	58	<?php endif; ?>
	59	+
92	60	<?php if ( ! empty( $attributes['player_description'] ) && ! empty( $video->description ) ) : ?>
93		- <div class="ayg-thumbnail-description" style="display: none;"><?php echo wp_kses_post( ayg_get_player_description( $video, $attributes ) ); ?></div>
	61	+ <div class="ayg-thumbnail-description" style="display: none;"><?php echo wp_kses_post( ayg_get_player_description( $video ) ); ?></div>
94	62	<?php endif; ?>
95	63	</div>
96	64	</div>