0

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.

3 Answers 3

0

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];
1
  • @SharciaraniaAkbarAl-Gaadaafi You're welcome. Please show your thanks by voting up answers and/or choosing one of them as correct ;)
    – GhostToast
    Apr 26, 2013 at 16:13
1

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] ); ?>"/>
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.