Show a number of posts ( or pages ) links and thumbnails images, randomly picked from a certain set.
For this we will need the set of ‘promoted’ posts ( or pages ), and a function to get the posts thumbnails.
For get the posts thumbnails function i will not insist and just use this one here. The set of ‘promoted’ posts will be a simple array of ID’s.
Add this to the functions.php file
function getPromotedLinks() {
// the array with the ID's of the posts ( or pages ) to be shown as promoted
$promoted = array( x, xx, xxx, ... n ); //here put your posts or pages ID's
$rand_ids = array_rand( $promoted, 5 ); //replace '5' with an integer of how many promoted items to be shown at once
//what will be showed in frontend
echo '<ul class="promotedlinks">';
foreach ( $rand_ids as $i ) {
//get the post (or page) image
$postID = $promoted[$i];
$all_images =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $postID );
if($all_images) {
$arr_of_all_images = array_keys( $all_images );
// Get the first image attachment from post
$firstImage = $arr_of_all_images[0];
// Get the thumbnail url for the attachment
// If you want the full-size image instead of the thumbnail, use wp_get_attachment_url() instead of wp_get_attachment_thumb_url().
$thumb_url = wp_get_attachment_thumb_url( $firstImage );
// Build the <img> string
$First_thumb_image = '<img src="' . $thumb_url . '" width="100" height="100" alt="Thumbnail Image" title="Thumbnail Image" />';
}
echo '<li><a href="'. get_permalink( $promoted[$i] ) .'">';
echo $First_thumb_image;
echo '<span>'. get_the_title( $promoted[$i] ) .'</span></a></li>';
}
echo '</ul>';
}
this is all, … you get a list of 5 (or how many you like), random links with thumbnails, which you can call anywhere ( inside loop, outside loop-> sidebar etc ), by <?php getPromotedLinks(); ?>.
Style as you wish,… an example would be:
ul.promotedlinks { margin: 0; list-style-type: none; }
ul.promotedlinks li { width: 125px; float: left; padding: 0; border-left: 1px solid #DDDDEE; overflow: hidden; }
ul.promotedlinks li:first-child { border-left: none; }
ul.promotedlinks li a { display: block; height: 100%; padding: 6px; }
ul.promotedlinks li a:hover { text-decoration: none; background: #DDDDEE; }
ul.promotedlinks li a img, ul.promotedlinks li a span { display: block; }