apply_filters( ‘post_playlist’, string $output, array $attr, int $instance )

User Contributed Notes

1. Skip to note 2 content

   luboslives 4 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

   How to display the album art from your audio files in a size other than ‘thumbnail’:

   Sadly we can’t use responsive image sets with the default playlist / media player without completely rewriting the whole stack, which appears to involve jQuery, Backbone, undescore, a couple of mediaelement JS files, inlined JSON, and PHP templating. See /wp-includes⁩/js⁩/mediaelement/ and /wp-includes/media.php and media-template.php.

   The next-best thing we can do is to use a higher-res image for the album artwork thumbnail. The JS files will read from the inlined JSON data, and by default will use the specified “thumb” property. That’s all we’re updating with the code below.

   1. Add a custom attribute to your playlist shortcode to signify which registered image size you’d like to use. We’ll use a cover_size="medium" attribute.

   [playlist ids="121,82,84,43" cover_size="medium"]

   2. Write your custom output using the post_playlist filter inside your functions.php file or elsewhere in your theme includes. Here I’ve removed any video playlist logic, see /wp-includes/media.php for the original.

   /**
    * Passing a non-empty value to the filter will short-circuit the default output.
    *
    * @param string $output   Playlist output. Default empty.
    * @param array  $attr     An array of shortcode attributes.
    * @param int    $instance Unique numeric ID of this playlist shortcode instance.
    */
   function wpdocs_mytheme_custom_playlist( $output, $attr, $instance ) {
   
   	if ( 'false' == $attr['images'] || 'video' == $attr['type'] ) {
   		return;
   	}
   
   	$cover_size = $attr['cover_size'] || 'thumbnail';
   	$post = get_post();
   
   	if ( ! empty( $attr['ids'] ) ) {
   		if ( empty( $attr['orderby'] ) ) {
   			$attr['orderby'] = 'post__in';
   		}
   		$attr['include'] = $attr['ids'];
   	}
   
   	$atts = shortcode_atts(
   		array(
   			'type'         => 'audio',
   			'order'        => 'ASC',
   			'orderby'      => 'menu_order ID',
   			'id'           => $post ? $post->ID : 0,
   			'include'      => '',
   			'exclude'      => '',
   			'style'        => 'light',
   			'tracklist'    => true,
   			'tracknumbers' => true,
   			'images'       => true,
   			'artists'      => true,
   		),
   		$attr,
   		'playlist'
   	);
   
   	$id = intval( $atts['id'] );
   
   	$args = array(
   		'post_status'    => 'inherit',
   		'post_type'      => 'attachment',
   		'post_mime_type' => $atts['type'],
   		'order'          => $atts['order'],
   		'orderby'        => $atts['orderby'],
   	);
   
   	if ( ! empty( $atts['include'] ) ) {
   		$args['include'] = $atts['include'];
   		$_attachments    = get_posts( $args );
   
   		$attachments = array();
   		foreach ( $_attachments as $key => $val ) {
   			$attachments[ $val->ID ] = $_attachments[ $key ];
   		}
   	} elseif ( ! empty( $atts['exclude'] ) ) {
   		$args['post_parent'] = $id;
   		$args['exclude']     = $atts['exclude'];
   		$attachments         = get_children( $args );
   	} else {
   		$args['post_parent'] = $id;
   		$attachments         = get_children( $args );
   	}
   
   	if ( empty( $attachments ) ) {
   		return '';
   	}
   
   	if ( is_feed() ) {
   		$output = "n";
   		foreach ( $attachments as $att_id => $attachment ) {
   			$output .= wp_get_attachment_link( $att_id ) . "n";
   		}
   		return $output;
   	}
   
   	$data = array(
   		'type'         => $atts['type'],
   		'tracklist'    => wp_validate_boolean( $atts['tracklist'] ),
   		'tracknumbers' => wp_validate_boolean( $atts['tracknumbers'] ),
   		'images'       => wp_validate_boolean( $atts['images'] ),
   		'artists'      => wp_validate_boolean( $atts['artists'] ),
   	);
   
   	$tracks = array();
   	foreach ( $attachments as $attachment ) {
   		$url   = wp_get_attachment_url( $attachment->ID );
   		$ftype = wp_check_filetype( $url, wp_get_mime_types() );
   		$track = array(
   			'src'         => $url,
   			'type'        => $ftype['type'],
   			'title'       => $attachment->post_title,
   			'caption'     => $attachment->post_excerpt,
   			'description' => $attachment->post_content,
   		);
   
   		$track['meta'] = array();
   		$meta          = wp_get_attachment_metadata( $attachment->ID );
   		if ( ! empty( $meta ) ) {
   			foreach ( wp_get_attachment_id3_keys( $attachment ) as $key => $label ) {
   				if ( ! empty( $meta[ $key ] ) ) {
   					$track['meta'][ $key ] = $meta[ $key ];
   				}
   			}
   		}
   
   		if ( $atts['images'] ) {
   			$thumb_id = get_post_thumbnail_id( $attachment->ID );
   			if ( ! empty( $thumb_id ) ) {
   				list( $src, $width, $height ) = wp_get_attachment_image_src( $thumb_id, 'full' );
   				$track['image']               = compact( 'src', 'width', 'height' );
   				// use our custom size
   				list( $src, $width, $height ) = wp_get_attachment_image_src( $thumb_id, $cover_size );
   				$track['thumb']               = compact( 'src', 'width', 'height' );
   			} else {
   				$src            = wp_mime_type_icon( $attachment->ID );
   				$width          = 48;
   				$height         = 64;
   				$track['image'] = compact( 'src', 'width', 'height' );
   				$track['thumb'] = compact( 'src', 'width', 'height' );
   			}
   		}
   
   		$tracks[] = $track;
   	}
   	$data['tracks'] = $tracks;
   
   	$safe_type  = esc_attr( $atts['type'] );
   	$safe_style = esc_attr( $atts['style'] );
   
   	// begin output
   	ob_start();
   
   	if ( 1 === $instance ) {
   		// Prints and enqueues playlist scripts, styles, and JavaScript templates.
   		do_action( 'wp_playlist_scripts', $atts['type'], $atts['style'] );
   	}
   	?>
   	<div class="wp-playlist wp-<?php echo $safe_type; ?>-playlist wp-playlist-<?php echo $safe_style; ?>">
   		<?php if ( 'audio' === $atts['type'] ) : ?>
   		<div class="wp-playlist-current-item"></div>
   		<?php endif ?>
   		<<?php echo $safe_type; ?> controls="controls" preload="none"></<?php echo $safe_type; ?>>
   		<div class="wp-playlist-next"></div>
   		<div class="wp-playlist-prev"></div>
   		<noscript>
   		<ol>
   		<?php
   		foreach ( $attachments as $att_id => $attachment ) {
   			printf( '<li>%s</li>', wp_get_attachment_link( $att_id ) );
   		}
   		?>
   		</ol>
   		</noscript>
   		<script type="application/json" class="wp-playlist-script"><?php echo wp_json_encode( $data ); ?></script>
   	</div>
   	<?php
   	return ob_get_clean();
   }
   add_filter( 'post_playlist', 'mytheme_custom_playlist', 10, 3 );

   • Correction: the conditional assignment should read $cover_size = $attr['cover_size'] ?? 'thumbnail'; (using the null coalescing operator, PHP >= 7.0)

     luboslives 4 years ago