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
randcorrectamente.
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
randcorrectamente.
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.
![Funciones básicas en PHP: [echo] y [print]](https://josetxu.com/blog/wp-content/uploads/2014/09/fondos_php_echo_print-150x150.jpg)
![Funciones básicas en Javascript: [alert()] y [prompt()]](https://josetxu.com/blog/wp-content/uploads/2014/10/fondos_js_alert_prompt-150x150.jpg)
