Mostrar una imagen aleatoria en tu blog

sisi escribió esto a las 11:42

Lo que voy a contar aquí es el código de un script muy sencillo que muestra dos fotos , elegidas aleatoriamente, de mi galería de fotos y cuyo resultado podéis apreciar a la derecha, debajo de los comentarios.

Este es el código completo:
<div class="rdimage">
<?php
$elementos1 =array();
$elementos2 =array();
$n1 = 0;
$n2 = 0;
$r1 = 0;
$r2 = 0;
$directorio1 = opendir ('./lomografia/_mg/thumbs/');
while ($elemento = readdir ($directorio1)){
if (($elemento != '.') && ($elemento != '..')){
$elementos1[$n1] = $elemento;
$n1++;
}
}
$directorio2 = opendir ('./mGallery/_mg/thumbs/');
while ($elemento = readdir ($directorio2)){
if (($elemento != '.') && ($elemento != '..')){
$elementos2[$n2] = $elemento;
$n2++;
}
}
$r1 = rand(0,$n1-1);
$r2 = rand(0,$n2-1);
echo '<a href ="/lomografia/index.php" title="lomografias "><img src="/lomografia/_mg/thumbs/'. $elementos1[$r1] . '" alt ="una foto" /></a>';
echo '<a href ="/mGallery/index.php" title="fotos"><img src="/mGallery/_mg/thumbs/'. $elementos2[$r2] . '" alt ="una foto" /></a>';
closedir ($directorio1);
closedir ($directorio2);
?>
</div> <!-- cierra rdimage -->

Lo explicamos paso por paso:

La idea es abrir dos directorios de imágenes (lo que digo aquí se adapta fácilmente a cualquier otro número), explorar su contenido, almacenar las rutas de las imágenes y luego elegir una imagen de cada directorio al azar .

Declaramos las variables que vamos a utilizar:

$elementos1 =array();
$elementos2 =array();
$n1 = 0;
$n2 = 0;
$r1 = 0;
$r2 = 0;

Donde:

  • $elementos[i] es la matriz donde se almacenan las rutas de nuestras imágenes.
  • $ni es el número de elementos del directorio i.
  • $ri es un número aleatorio (random) elegido del 0 a $ni.

Abrimos el directorio 1. En este caso, elijo el directorio de thumbnails que ha generado mi galería de fotos gestionada con minimal Galllery:

$directorio1 = opendir ('./lomografia/_mg/thumbs/');

Leemos el contenido del directorio y almacenamos las rutas de sus elementos en la matriz $elementos1 siempre y cuando no sean los directorios . y .. (en Unix, los directorios padre y raíz , respectivamente y asumimos que nuestro servidor corre en Unix).

while ($elemento = readdir ($directorio1)){
if (($elemento != '.') && ($elemento != '..')){
$elementos1[$n1] = $elemento;
$n1++;
}
}

Hacemos lo mismo con el directorio 2:

$directorio2 = opendir ('./mGallery/_mg/thumbs/');
while ($elemento = readdir ($directorio2)){
if (($elemento != '.') && ($elemento != '..')){
$elementos2[$n2] = $elemento;
$n2++;
}
}

Elegimos dos números aleatorios, uno para cada directorio, y mostramos los elementos correspondientes:
$r1 = rand(0,$n1-1);
$r2 = rand(0,$n2-1);
echo '<a href ="/lomografia/index.php" title="lomografias "><img src="/lomografia/_mg/thumbs/'. $elementos1[$r1] . '" alt ="una foto" /></a>';
echo '<a href ="/mGallery/index.php" title="fotos"><img src="/mGallery/_mg/thumbs/'. $elementos2[$r2] . '" alt ="una foto" /></a>';

Cerramos los directorios (esto es importante para liberar recursos del sistema y para evitar que el navegador se quede continuamente cargando nuestra página )

closedir ($directorio1);
closedir ($directorio2);

Por último, le damos estilo a nuestras imágenes. En mi caso, he creado una clase en mi CSS llamada rdimage:
#sidebar .rdimage {
margin-left:30px;
margin-top:0px;
width:75px;
background-color:#000;
border: 4px solid #000;
border-bottom: 15px solid #000;
}
#sidebar .rdimage img{
width:75px;
height:75px;
}

Y ya está … ;-)

Comparte este artículo:
  • Meneame
  • del.icio.us
  • Digg
  • Facebook
  • TwitThis
  • Google
  • Live
  • E-mail this story to a friend!
  • Print this article!

6 comentarios en “Mostrar una imagen aleatoria en tu blog”


  1. Alfonso dice:

    Los geeks sois todos un encanto y un pozo de sabiduría.
    :o la:

    Dijkstra estaría orgulloso de ti. ;)

    Saludos


  2. Kruzul dice:

    Y te queda muy chulo.


  3. merak dice:

    no entendí nada!! pero no por ti, sino por mi que soy un ceporro… a ver si tengo tres minutos y lo leo más tranquilo.
    ps.- esa gatita de las fotos es lindísima


  4. sisifodichoso dice:

    ¿Tú crees que Dijkstra se fijaría en mí, Al?
    Tú sí que eres un encanto :jiji:

    Gracias Kru :girlblum:

    En cuanto eches un vistazo más despacio, seguro que te queda más claro merak … :dance2:


  5. Ana dice:

    Eres muyyyy guay :girlblum:

    Tengo pendientes un montón de cosas que has aportado y que tengo que implementar. Esto de las fotos me encanta, y además necesitaba algo así.

    Ya te contaré, pero :gracias:
    :clap: :clap: :clap: :clap:


  6. sisifodichoso dice:

    Gracias a ti, Ana … tú sí que eres guay :girlblum: