Display random image url from list of input values

Question

I have created an options page in my WordPress theme that allows the user to input a url/upload an image to an input field. The field has the name headerimage_options[image] and when it is populated it can be saved and outputted in the theme with the following code: <?php echo esc_url( $headerimage_options['image'] ); ?>

I have created three inputs with the names [image], [image2] and [image3]. I can save the content of the input fields and output all of the images using the code below:

<?php $headerimage_options = get_option( 'headerimage_options' ); ?>

    <img title="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( $headerimage_options['image'] ); ?>"/>

    <img title="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( $headerimage_options['image2'] ); ?>"/>

    <img title="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( $headerimage_options['image3'] ); ?>"/>

My question is how do I output just one of the images at random? I've searched but couldn't find an answer anywhere.

Answer 1

Instead of echoing out these images, just store them as strings inside an array and choose one of the array items at random.

<?php $headerimage_options = get_option('headerimage_options' ); 
$images = array();
$images[] = '<img title="'.get_bloginfo('name').'" src="'.esc_url( $headerimage_options['image'] ).'"/>';

$images[] = '<img title="'.get_bloginfo('name').'" src="'.esc_url( $headerimage_options['image2'] ).'"/>';

$images[] = '<img title="'.get_bloginfo('name').'" src="'.esc_url( $headerimage_options['image3'] ).'"/>';

$v = array_rand($images);
echo $images[$v];

Answer 2

You could do it this way (assumes that you know that all 3 images are there every time):

<?php
    $headerimage_options = get_option( 'headerimage_options' ); 
    $number = rand(1,3);
    if($number == 1) $number = ''; 
?>
        <img title="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( $headerimage_options['image' . $number] ); ?>"/>

Answer 3

Thanks to both of you. From this i figured out how to make them display only the images that had something actually in the input fields. So no broken image or empty div if the input field is empty. I used the following code:

<?php $headerimage_options = get_option('headerimage_options' ); 
$images = array();

if ( "" != $headerimage_options['image'] ) :

$images[] = '<img title="'.get_bloginfo('name').'" src="'.esc_url( $headerimage_options['image'] ).'"/>';

endif; 

if ( "" != $headerimage_options['image2'] ) :

$images[] = '<img title="'.get_bloginfo('name').'" src="'.esc_url( $headerimage_options['image2'] ).'"/>';

endif; 

if ( "" != $headerimage_options['image3'] ) :

$images[] = '<img title="'.get_bloginfo('name').'" src="'.esc_url( $headerimage_options['image3'] ).'"/>';

endif; 

$v = array_rand($images);
echo $images[$v];

?>

Thanks again.