Blog · Josetxu.com | Imagen aleatoria con PHP

Hay varias formas de obtener una imagen aleatoria de una carpeta (o de un array) con PHP, vamos a ver tres ejemplos:

Número aleatorio
Recorrer un array
Buscar en carpeta

Número aleatorio

Podemos cambiar el nombre de una imagen utilizando un número elegido al azar.

Llenamos una carpeta con las imágenes numeradas, por ejemplo: 1.jpg, 2.jpg, 3.jpg, 4.jpg y 5.jpg.

En HTML pintamos la imagen con la ruta a uno de los archivos.

<img src="img/1.jpg" alt="imagen aleatoria" />

1	<img src="img/1.jpg" alt="imagen aleatoria" />

Con PHP y la función rand podemos obtener un número aleatorio. Esta función lleva dos argumentos; el primero es desde que número queremos coger y el segundo es hasta que número queremos coger. En nuestro caso sería un número entre 1 y 5, y sería de esta manera:

rand(1, 5);

1	rand(1, 5);

Remplazamos el nombre del archivo (ojo, sin la extension) por el resultado de la función rand. Sabemos que ese resultado será un número entre 1 y 5, pero tenemos que pintarlo en el código con PHP y para eso usamos echo.

El código final sería este: numero-aleatorio.php

<img src="img/<?php echo rand(1, 5); ?>.jpg" alt="imagen aleatoria" />

1	<img src="img/<?php echo rand(1, 5); ?>.jpg" alt="imagen aleatoria" />

Detalles

Sistema muy simple.
Todas las imágenes deben tener la misma extensión.
Es importante que no falte ningún número de la serie o habrá errores.
Hay que controlar el número de imágenes para pasárselos a la función rand correctamente.

ver demo

Recorrer un array

Se puede crear una lista de imágenes y mostrar una de ellas aleatoriamente.

Definimos las url de las imágenes en un array con PHP.

//array de imagenes
$img[1]='https://josetxu.com/demos/img/bg_colores.jpg';
$img[2]='https://josetxu.com/demos/img/bg_cuadrados.jpg';
$img[3]='https://josetxu.com/demos/img/bg_circulos.jpg';
$img[4]='https://josetxu.com/demos/img/bg_curvas.jpg';
$img[5]='https://josetxu.com/demos/img/bg_circuitos.jpg';

//array de imagenes

$img[1]='https://josetxu.com/demos/img/bg_colores.jpg';

$img[2]='https://josetxu.com/demos/img/bg_cuadrados.jpg';

$img[3]='https://josetxu.com/demos/img/bg_circulos.jpg';

$img[4]='https://josetxu.com/demos/img/bg_curvas.jpg';

$img[5]='https://josetxu.com/demos/img/bg_circuitos.jpg';

Con la función rand almacenamos en la variable $i un número aleatorio entre 1 y 5 (el número total de imágenes), el mismo truco de antes.

$i=rand(1,5);

1	$i=rand(1,5);

A continuación pintamos la imagen en HTML. Esta vez usaremos la imagen como fondo de un div mediante el atributo style. Ponemos la url de una imagen cualquiera del array en la propiedad background y añadimos algunos estilos CSS más para que la imagen se muestre correctamente dependiendo de las medidas de la imagen.

<div style="background: url(https://josetxu.com/demos/img/bg_colores.jpg) no-repeat scroll center center transparent; min-height:240px; float:left; width:100%;" alt="imagen aleatoria"/></div>

1	<div style="background: url(https://josetxu.com/demos/img/bg_colores.jpg) no-repeat scroll center center transparent; min-height:240px; float:left; width:100%;" alt="imagen aleatoria"/></div>

Remplazamos con PHP la url de la imagen por la variable $img con el índice [$i] (que será un número aleatorio entre 1 y 5).

<div style="background: url(<?php echo $img[$i]; ?>) no-repeat scroll center center transparent; min-height:240px; float:left; width:100%;" alt="imagen aleatoria"/></div>

1	<div style="background: url(<?php echo $img[$i]; ?>) no-repeat scroll center center transparent; min-height:240px; float:left; width:100%;" alt="imagen aleatoria"/></div>

El archivo completo sería algo así: recorrer-array.php

<?php // FONDO ALEATORIO - creamos un array con las imagenes 
$img[1]='https://josetxu.com/demos/img/bg_colores.jpg';
$img[2]='https://josetxu.com/demos/img/bg_cuadrados.jpg';
$img[3]='https://josetxu.com/demos/img/bg_circulos.jpg';
$img[4]='https://josetxu.com/demos/img/bg_curvas.jpg';
$img[5]='https://josetxu.com/demos/img/bg_circuitos.jpg';
$i=rand(1,5);// almacenamos un numero aleatorio entre 1 y 5 
?>
<div style="background: url(<? echo $img[$i];/*remplazamos la url*/?>) no-repeat scroll center center transparent; min-height:240px; float:left; width:100%;" alt="imagen aleatoria"/></div>

<?php // FONDO ALEATORIO - creamos un array con las imagenes

$img[1]='https://josetxu.com/demos/img/bg_colores.jpg';

$img[2]='https://josetxu.com/demos/img/bg_cuadrados.jpg';

$img[3]='https://josetxu.com/demos/img/bg_circulos.jpg';

$img[4]='https://josetxu.com/demos/img/bg_curvas.jpg';

$img[5]='https://josetxu.com/demos/img/bg_circuitos.jpg';

$i=rand(1,5);// almacenamos un numero aleatorio entre 1 y 5

<div style="background: url(<? echo $img[$i];/*remplazamos la url*/?>) no-repeat scroll center center transparent; min-height:240px; float:left; width:100%;" alt="imagen aleatoria"/></div>

Detalles

Se pueden usar imágenes con cualquier extensión.
Imágenes desde cualquier directorio o dirección web.
Hay que controlar el número de imágenes para pasárselos a la función rand correctamente.

ver demo

Buscar en carpeta

También podemos mostrar imágenes con extensiones de archivo específicas desde una carpeta elegida.

Definimos variables para las $extensiones de archivo, la $carpeta de imágenes, la $ruta al directorio y la $url al directorio.

// extensiones de archivo
$extensiones = array('jpg','jpeg','gif','png','bmp');
// carpeta de imagenes
$carpeta = "/demos/img/";
// ruta del directorio
$ruta = $_SERVER['DOCUMENT_ROOT'].$carpeta;
// url del directorio
$url = 'https://'.$_SERVER["SERVER_NAME"].$carpeta;

// extensiones de archivo

$extensiones = array('jpg','jpeg','gif','png','bmp');

// carpeta de imagenes

$carpeta = "/demos/img/";

// ruta del directorio

$ruta = $_SERVER['DOCUMENT_ROOT'].$carpeta;

// url del directorio

$url = 'https://'.$_SERVER["SERVER_NAME"].$carpeta;

Creamos un array para las imágenes.

// array de imagenes
$imagenes = array();

1 2	// array de imagenes $imagenes = array();

Abrimos el directorio y mostramos las imágenes.
Obtenemos la extension del archivo y lo almacenamos en el array.
Antes de continuar cerramos el directorio.

// abrimos el directorio y mostramos las imagenes
if ($handle = opendir($ruta)) {
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {
          // obtenemos la extension del archivo
          $ext = strtolower(substr(strrchr($file, "."), 1));
          // almacenamos en el array
          if(in_array($ext, $extensiones)){
            $imagenes[] = $url.$file;
          }
        }
    }
    closedir($handle);
}

// abrimos el directorio y mostramos las imagenes

if ($handle = opendir($ruta)) {

while (false !== ($file = readdir($handle))) {

if ($file != "." && $file != "..") {

// obtenemos la extension del archivo

$ext = strtolower(substr(strrchr($file, "."), 1));

// almacenamos en el array

if(in_array($ext, $extensiones)){

$imagenes[] = $url.$file;

}

closedir($handle);

}

Seleccionamos 1 valor aleatorio del array $imagenes con la función array_rand y lo almacenamos en la variable $rand_key .

// creamos un índice aleatorio
$rand_key = array_rand($imagenes, 1);

1 2	// creamos un índice aleatorio $rand_key = array_rand($imagenes, 1);

Almacenamos la url definitiva de la imagen en la variable $src. La sacamos del array $imagenes con su índice aleatorio $rand_key.

// almacenamos la url en la variable $src
$src = $imagenes[$rand_key];

1 2	// almacenamos la url en la variable $src $src = $imagenes[$rand_key];

En HTML pintamos la imagen con la ruta a un archivo cualquiera.

<img src="/demos/img/bg_colores.jpg" alt="imagen aleatoria" />

1	<img src="/demos/img/bg_colores.jpg" alt="imagen aleatoria" />

Con PHP y un echo remplazamos la ruta del archivo (con extensión incluida) por la url almacenada en la variable $src.

<img src="<? echo $src; ?>" alt="imagen aleatoria" />

1	<img src="<? echo $src; ?>" alt="imagen aleatoria" />

Y así quedaría el archivo completo en PHP: buscar-en-carpeta.php

<?php //IMAGEN ALEATORIA CON PHP
// extensiones de archivo
$extensiones = array('jpg','jpeg','gif','png','bmp');
// carpeta de imagenes
$carpeta = "/demos/img/";
// ruta del directorio
$ruta = $_SERVER['DOCUMENT_ROOT'].$carpeta;
// url del directorio
$url = 'https://'.$_SERVER["SERVER_NAME"].$carpeta;
// array de imagenes
$imagenes = array();
// abrimos el directorio y mostramos las imagenes
if ($handle = opendir($ruta)) {
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {
          // obtenemos la extension del archivo
          $ext = strtolower(substr(strrchr($file, "."), 1));
          // almacenamos en el array
          if(in_array($ext, $extensiones)){
            $imagenes[] = $url.$file;
          }
        }
    }
    closedir($handle);
}
// creamos un índice aleatorio
$rand_key = array_rand($imagenes, 1);
// almacenamos la url en la variable $src
$src = $imagenes[$rand_key];
?>
<div>
    <img src="<?php echo $src; /*pintamos la variable $src*/?>" alt="imagen aleatoria" />
</div>

<?php //IMAGEN ALEATORIA CON PHP

// extensiones de archivo

$extensiones = array('jpg','jpeg','gif','png','bmp');

// carpeta de imagenes

$carpeta = "/demos/img/";

// ruta del directorio

$ruta = $_SERVER['DOCUMENT_ROOT'].$carpeta;

// url del directorio

$url = 'https://'.$_SERVER["SERVER_NAME"].$carpeta;

// array de imagenes

$imagenes = array();

// abrimos el directorio y mostramos las imagenes

if ($handle = opendir($ruta)) {

while (false !== ($file = readdir($handle))) {

if ($file != "." && $file != "..") {

// obtenemos la extension del archivo

$ext = strtolower(substr(strrchr($file, "."), 1));

// almacenamos en el array

if(in_array($ext, $extensiones)){

$imagenes[] = $url.$file;

}

closedir($handle);

}

// creamos un índice aleatorio

$rand_key = array_rand($imagenes, 1);

// almacenamos la url en la variable $src

$src = $imagenes[$rand_key];

<div>

<img src="<?php echo $src; /*pintamos la variable $src*/?>" alt="imagen aleatoria" />

</div>

Detalles

Opción muy versatil que dá mucho juego.
Se pueden seleccionar extensiones de archivo específicas.
También se puede usar la imagen como fondo (igual que en el ejemplo anterior).
No hay que controlar el número de imágenes, es automaticamente infinito… mientras existan imágenes en la carpeta elegida.

ver demo

Número aleatorio

Detalles

Recorrer un array

Detalles

Buscar en carpeta

Detalles

Artículos Relacionados