Changing playlist shortcode thumbnail sizes?

by

I’m using do_shortcode() to display a custom WordPress audio playlist. By default the playlist will load cover art for each audio file (the attachment’s featured image) and change according to what track is currently being played. The thing is, by default it loads the 150px x 150px thumbnail, but I would like to load a bigger size. There doesn’t seem to be a simple option to change the size. Here is the code I’m working with:

do_shortcode( '' );

I tried changing the thumbnail size in function.php by using set_post_thumbnail_size() and ran Regenerate Thumbnails, but nothing changed.

I also searched the WordPress core and found that the function that controls the playlist shortcode is called wp_playlist_shortcode(). There is a bit of code that sets the size of the thumbnail. I edited it just to see what happened, and it’s the only thing that worked so far. Obviously, that is not the way to go, but that is where I’m currently stuck. Not sure if I should dump that here as well, I’d appreciate any pointers and help I can get.

1 Answer
1

Demo Plugin – Fixed Size

Here’s one suggestion as a demo plugin (PHP 5.4+):

<?php
/* Plugin Name: Custom Playlist Thumb Size */

namespace WPSE238646\PlaylistThumbSize;

add_shortcode( 'playlist', function( $atts = [], $content="" )
{
    add_filter( 'wp_get_attachment_image_src', __NAMESPACE__ . '\\src' , 10, 3 );
    $out = wp_playlist_shortcode( $atts, $content );
    remove_filter( 'wp_get_attachment_image_src', __NAMESPACE__ . '\\src' );    
    return $out;        
} );

function src( $image, $id, $size )
{
    add_filter( 'image_downsize', __NAMESPACE__ . '\\size', 10, 3 );
    return $image;
}

function size( $downsize, $id, $size )
{
    remove_filter( current_filter(), __FUNCTION__ );
    if( 'thumbnail' !== $size )
        return $downsize;   
    return image_downsize( $id, $size="large" );           // <-- Adjust size here!
}

Here we change the thumb size from 'thumbnail' to 'large'.

First we override the playlist shortcode callback, to better scope our filters and only target the playlist shortcodes.

Then we hook into the image_downsize filter to our needs, to call the image_downsize() function with the wanted thumb size. But we must remember to remove our filter callback right away to avoid an infinite recursive loop.

Demo Plugin – Various Sizes

But it would be more flexible if we could write the thumb size as a shortcode attribute:

Here we prefix our _size attribute with an underscore, just in case it gets supported by core in the future.

Here’s a modification of our first demo plugin to support that (in a compact form):

<?php
/* Plugin Name: Playlist With _size Attribute */

namespace WPSE238646\PlaylistThumbSize;

add_shortcode( 'playlist', [ (new Playlist), 'shortcode' ] );

class Playlist
{
    protected $_size;

    public function shortcode( $atts = [], $content="" )
    {
        $allowed_sizes = (array) get_intermediate_image_sizes(); // <-- Allowed sizes
        $this->_size="thumbnail";  // <-- Default size
        if( ! empty( $atts['_size' ] ) && in_array( $atts['_size' ], $allowed_sizes ) )
            $this->_size = $atts['_size' ]; 
        add_filter( 'wp_get_attachment_image_src', [ $this, 'src' ] , 10, 3 );
        $out = wp_playlist_shortcode( $atts, $content );  // <-- Native playlist
        remove_filter( 'wp_get_attachment_image_src', [ $this, 'src' ] );
        return $out;       
    }     
    public function src( $image, $id, $size )
    {
        add_filter( 'image_downsize', [ $this, 'size' ], 10, 3 );
        return $image;
    }
    public function size( $downsize, $id, $size )
    {
        remove_filter( current_filter(), [ $this, 'size' ] );
        if( 'thumbnail' !== $size )
            return $downsize;  
        return image_downsize( $id, $this->_size ); // <--Apply new size
    }
} // end class

Here we restrict the allowed sizes to get_intermediate_image_sizes().

Hopefully you can test this further and adjust to your needs!

Leave a Comment