Ulzurrun de Asanza i Sàez

Mostrar una imagen aleatoria

Una imagen y un enlace aleatorio
Una imagen y un enlace aleatorio

El año pasado expliqué como mostrar una par de imágenes al azar mediante PHP. Hoy explicaré como mostrar un enlace aleatorio con una imagen aleatoria mediante un array y PHP.

La matriz tendrá un índice numérico que contendrá una nueva matriz, esta vez con dos índices: URL e IMG_URL, que indicarán la URL del enlace y la URL de la imagen, respectivamente. Mediante la función rand obtendremos un número aleatorio entre el primer índice de la matriz (0) y el último (determinado por el puntero de la matriz). Después moveremos el puntero interno de la matriz al último elemento y a continuación crearemos una nueva variable que almacene la matriz que contiene el índice N (donde N es el número aleatorio obtenido previamente) de la primera matriz.

El código de la matriz de mi ejemplo será el siguiente (que debe colocarse el principio del archivo, así se puede mostrar la imagen en cualquier otro lugar del archivo):

[php]
<?php

// Primer elemento de la matriz
$array[] = array(
‘URL’ => ‘http://sumolari.com’,
‘IMG_URL’ => ‘http://sumolari.com/demos/imagen-aleatoria/img/sumolari.png’
);

// Segundo elemento de la matriz
$array[] = array(
‘URL’ => ‘http://sumolari.com/mostrar-una-imagen-aleatoria/’,
‘IMG_URL’ => ‘http://sumolari.com/demos/imagen-aleatoria/img/tutorial.png’
);

// Tercer elemento de la matriz
$array[] = array(
‘URL’ => ‘http://google.com’,
‘IMG_URL’ => ‘http://sumolari.com/demos/imagen-aleatoria/img/google.png’
);

// Movemos el puntero al último element
end($array);

// Calculamos el último índice
$last_key = key($array);

// Calculamos un número al azar entre 0 y el último índice
$key = rand(0, $last_key);

// Almacenamos los datos de la imagen que vamos a mostrar
$item = $array[$key];

?>
[/php]

Y a continuación sólo tendremos que mostrar el enlace, usando un código como el siguiente:

[php]
<a href="<?php echo $item[‘URL’]; ?>"><img src="<?php echo $item[‘IMG_URL’]; ?>" /></a>
[/php]

La ventaja de este script comparado con el anterior es que en éste podemos mostrar un enlace y podemos definir la URL a la imagen, lo cual lo hace más flexible. Además podemos añadir tantas imágenes como queramos a la matriz sin preocuparnos por adaptar el script, ya que el último índice se calcula de forma dinámica.

Podéis ver un ejemplo del funcionamiento en esta página. Si tenéis cualquier duda con el tutorial, no dudéis en preguntarla en los comentarios.


5 replies on “Mostrar una imagen aleatoria

  1. ¡Buen tutorial! Pero tengo una dudilla. Yo por ejemplo me gustaría hacer que la imagen sea aleatoria en la sidebar de un theme en WordPress, entonces, ¿dónde coloco el código PHP? Porque WordPress sólo permite código HTML arbitrario en los widgets. :-)

  2. Es que el código tienes que añadirlo al archivo sidebar.php de tu theme (o donde quieras ponerlo). Si te fijas, lo he puesto en el tutorial un par de veces).

    Aunque de todos modos dentro de un rato (lo que tarde en escribirlo) escribiré un artículo explicando cómo añadir imágenes aleatorias a un plugin de WordPress usando sólo HTML arbitrario, algo como:

    <code>
    [RANDOM_IMG]
    URL||IMG_URL[]
    URL2||IMG_URL2[]
    [[SHOW_IMG]]
    [/RANDOM_IMG]
    </code>

  3. Hola tengo una pregunta algo compleja. Este código es para imágenes aleatorias en un solo lugar, mi pregunta es. Cómo sería uno que haga que se carguen por ejemplo 2 imágenes a la vez en dos partes diferentes de la web. Es decir que sigan siendo random pero que cada vez que cargues la web salga un grupo de imágenes como 1,2,3,4 en distintas areas y luego que al recargar salgan 5,6,7,8. Como las imágenes están en distintas areas creo que tendría que el sitio tener un código en cada area independiente que responda a un código que llame a cada imagen para que sea la que se vea

    1. No termino de entender tu pregunta.

      Si quieres mostrar dos imágenes aleatorias (cada una de un grupo diferente) en una misma página, puedes duplicar el código del artículo pero cambiando el nombre de las variables `$array` y `$item` por otros distintos.

      Si lo que quieres es que la primera vez que cargue la página se muestre una imagen aleatoria de un grupo y la siguiente vez una aleatoria de otro grupo entonces tendrás que guardar en algún sitio la información que te indica que este visitante concreto ha visitado la página antes o no.

      Para esto tienes varias opciones: puedes guardar la IP del usuario en una base de datos o en un archivo en tu servidor. Ten en cuenta que haciendo esto si el mismo usuario entra con otro navegador (u otra persona entra desde otro ordenador con la misma IP pública), se tratará como si ya hubiese entrado antes.

      Si no quieres que esto pase tendrás que guardar esa información en el propio navegador del usuario y que sea éste quien decida qué grupo de imágenes usar, pero eso ya no puedes hacerlo únicamente con PHP.

Leave a Reply to Alberto Guerra Cancel reply

Your email address will not be published.

Required fields are marked *

Your avatar