Documentation > Developers > Filter Examples > Collection List Shortcode: Add a Thumbnail

Collection List Shortcode: Add a Thumbnail

This snippet will add a random image from the respective collection before the collection title.

/**
 * Change the output of the picu_collection_list shortcode
 *
 * @param string $collection_list The original html output
 * @param object $query The query of returned collections
 * @param array  $atts The shortcode attributes
 * @param string $content The content between the shortcode tags
 */
function my_picu_collection_list( $collection_list, $query, $atts, $content ) {
	
	if ( $query->have_posts() ) {

		$collection_list = '<ul class="picu-collection-list">';

		while ( $query->have_posts() ) {
			$query->the_post();
			$collection_list .= '<li class="picu-status-' . get_post_status() . '"><a href="' . get_permalink() . '">';

			$picu_collection_gallery_ids = get_post_meta( get_the_ID(), '_picu_collection_gallery_ids', true );
			$image_ids = explode( ',', $picu_collection_gallery_ids );
			shuffle( $image_ids );
			$image = wp_get_attachment_image( $image_ids[0], 'picu_thumbnail' );
			
			$collection_list .= $image;

			$collection_list .=	get_the_title() . '</a></li>';
		}

		wp_reset_query();

		$collection_list .= '</ul>';

	}
	else {
		$collection_list = '<div class="picu-no-collections">' . $content . '</div>';
	}
	
	return $collection_list;
	
}

add_filter( 'picu_collection_list', 'my_picu_collection_list', 10, 4 );Code language: PHP (php)

Need help?

If you couldn’t find what you were looking for and need more assistance, please get in touch with us directly and we’re happy to help.