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.
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:
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
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.
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.
1 2 3 4 5 6 |
//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.
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.
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).
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
1 2 3 4 5 6 7 8 9 |
<?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.
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.
1 2 3 4 5 6 7 8 |
// 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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 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
.
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
.
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.
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
.
1 |
<img src="<? echo $src; ?>" alt="imagen aleatoria" /> |
Y así quedaría el archivo completo en PHP: buscar-en-carpeta.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?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.