• Josetxu.com
  • Perfil
  • Portafolio
  • Iconos
  • Demos
  • Blog
Blog · Josetxu.com

Imagen aleatoria con PHP

Publicada en 28 abr 2015 de Josetxu

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.

XHTML
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:

PHP
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

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.

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.

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.

PHP
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.

XHTML
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).

PHP
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
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.

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.

PHP
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.

PHP
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.

PHP
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 .

PHP
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.

PHP
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.

XHTML
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.

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

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

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.

ver demo

Publicado en: PHP | Etiquetas: Funciones, Imagen |
« Comentar código
» Método [getElementById] de Javascript

Artículos Relacionados

  • Captcha en PHPCaptcha en PHP
  • Funciones básicas en PHP: [echo] y [print]Funciones básicas en PHP: [echo] y [print]
  • Efecto “Before / After” Responsive Efecto “Before / After” Responsive
  • Convertir duración de video de la API v3 de Youtube en PHPConvertir duración de video de la API v3 de Youtube en PHP
  • Funciones básicas en PHP: [include()] y [require()]Funciones básicas en PHP: [include()] y [require()]
josetxu Josetxu López

Diseñador y programador web multidisciplinar y autodidacta.
Investigo las posibilidades que nos ofrece la tecnología aprendiendo algo nuevo cada día. La curiosidad y la paciencia me han enseñado casi todo lo que sé...

Buscar

Categorías

  • CSS (7)
  • CSS3 (7)
  • HTML (4)
  • HTML5 (3)
  • Javascript (8)
  • JQuery (1)
  • PHP (6)

Etiquetas

Animación Audio Básico Captcha Clases Constructores Formularios Funciones Iconos Imagen JSON Métodos Responsive

Recientes

Crear pestañas de contenido o 'tabs' fácilmente con javascript
Crear pestañas de contenido o 'tabs' fácilmente con javascript
Funciones básicas en PHP: [include()] y [require()]
Funciones básicas en PHP: [include()] y [require()]
Iconos con CSS
Iconos con CSS
Aplicar estilos CSS a campos [radio] y [checkbox]
Aplicar estilos CSS a campos [radio] y [checkbox]

Utilidades

Color Picker w3c Selector de color Google Fonts google Fuentes de Google Can I use @Fyrd Soporte por navegadores Gimp gimp Manipulación de imágenes Notepad++ notepad++ Editor de código W3C Validator w3c Validador de código Highcharts highchartsGráficas en Javascript

Aviso

La información contenida en este blog es solo orientativa . No soy profesor, solo un tio curioso que quiere compartir lo aprendido durante estos años.

CyberChimps WordPress Themes

josetxu.comJosetxu.com Perfil | Portafolio | Iconos | Demos | Blog 2000 - 2020 © josetxu.com
▲