Obtener imágenes de una carpeta dinamicamente por PHP

Publicado en Tutoriales | Etiquetado | por

Este tutorial explica cómo obtener dinámicamente imágenes de una carpeta por PHP. Una ventaja de usar está técnica es que con solo cambiar las imágenes de la carpeta por ftp, se actualiza automáticamente nuestra galería de imágenes. Sólo toma 11 lineas de código PHP para obtener una cantidad ilimitada de imágenes. Pueden ver el ejemplo en vivo acá y descargar los archivos del tutorial acá.

  1. Poner todas las imágenes en una carpeta, en este caso las pondremos en la carpeta img.
  2. Creamos un archivo .php en blanco llamado galeria.php, y lo guardamos en el mismo directorio de la carpeta img.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!DOCTYPE>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Imágenes dinámicas de una carpeta en php</title>
    </head>

    <body>
    </body>
    </html>
  3. Dentro de la etiqueta body insertamos el código php.
    1
    2
    3
    4
    5
    <body>
    <?php

    ?>
    </body>
  4. Definimos una variable con la dirección de la carpeta de imágenes.
    1
    2
    3
    <?php
        $directory="img";
    ?>
  5. Definimos una variable $dirint y la igualamos a la función dir() de PHP, la cual leerá la carpeta de imágenes y nos retornará un Array de la clase Directory de PHP.
    1
    2
    3
    4
    <?php
        $directory="img";
        $dirint = dir($directory);
    ?>
  6. Creamos un ciclo while que procese el Array $dirint, la variable $archivo tendrá la información de cada archivo de la carpeta. Después imprimimos en el html cada variable, por el método echo para comprobar que la lectura es correcta, al final cerramos el directorio $dirint->close().
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <?php
        $directory="img";
        $dirint = dir($directory);
        while (($archivo = $dirint->read()) !== false)
        {
            echo $archivo;
        }
        $dirint->close();
    ?>

    El resultado del ejemplo sería algo similar a:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <body>
    .
    ..
    imagenes (01).jpg
    imagenes (02).jpg
    imagenes (03).jpg
    imagenes (04).jpg
    imagenes (05).jpg
    imagenes (06).jpg
    imagenes (07).jpg
    imagenes (08).jpg
    imagenes (09).jpg
    imagenes (10).jpg
    imagenes (11).jpg
    imagenes (12).jpg
    imagenes (13).jpg
    imagenes (14).jpg
    </body>
  7. Creamos un condicional if para que solo sean procesados los archivos png, gif y jpg. Imprimimos también la variable $directory para obtener la url completa de cada imagen.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?php
        $directory="img";
        $dirint = dir($directory);
        while (($archivo = $dirint->read()) !== false)
        {
            if (eregi("gif", $archivo) || eregi("jpg", $archivo) || eregi("png", $archivo)){
                echo $directory."/".$archivo;
            }
        }
        $dirint->close();
    ?>

    El resultado del ejemplo sería algo similar a:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <body>
    img/imagenes (01).jpg
    img/imagenes (02).jpg
    img/imagenes (03).jpg
    img/imagenes (04).jpg
    img/imagenes (05).jpg
    img/imagenes (06).jpg
    img/imagenes (07).jpg
    img/imagenes (08).jpg
    img/imagenes (09).jpg
    img/imagenes (10).jpg
    img/imagenes (11).jpg
    img/imagenes (12).jpg
    img/imagenes (13).jpg
    img/imagenes (14).jpg
    </body>
  8. Por último imprimimos las imágenes en el formato html.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?php
        $directory="img";
        $dirint = dir($directory);
        while (($archivo = $dirint->read()) !== false)
        {
            if (eregi("gif", $archivo) || eregi("jpg", $archivo) || eregi("png", $archivo)){
                echo '<img src="'.$directory."/".$archivo.'">'."\n";
            }
        }
        $dirint->close();
    ?>

    El resultado del ejemplo sería algo similar a:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <body>
    <img src="img/imagenes (01).jpg">
    <img src="img/imagenes (02).jpg">
    <img src="img/imagenes (03).jpg">
    <img src="img/imagenes (04).jpg">
    <img src="img/imagenes (05).jpg">
    <img src="img/imagenes (06).jpg">
    <img src="img/imagenes (07).jpg">
    <img src="img/imagenes (08).jpg">
    <img src="img/imagenes (09).jpg">
    <img src="img/imagenes (10).jpg">
    <img src="img/imagenes (11).jpg">
    <img src="img/imagenes (12).jpg">
    <img src="img/imagenes (13).jpg">
    <img src="img/imagenes (14).jpg">
    </body>
  9. El resultado final del archivo galeria.php debe ser:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Imágenes dinámicas de una carpeta en php</title>
    </head>

    <body>
    <?php
        $directory="img";
        $dirint = dir($directory);
        while (($archivo = $dirint->read()) !== false)
        {
            if (eregi("gif", $archivo) || eregi("jpg", $archivo) || eregi("png", $archivo)){
                echo '<img src="'.$directory."/".$archivo.'">'."\n";
            }
        }
        $dirint->close();
    ?>
    </body>
    </html>

Hemos utilizado está técnica en distintos de los portales web que hemos desarrollado.
Un ejemplo con la galería nivo slider lo pueden ver acá, y con la galería shadowbox lo pueden ver acá.

66 comentarios en “Obtener imágenes de una carpeta dinamicamente por PHP”

  7. Como se ve hay un reloj de lujo para cada género de hombre y necesidad, conque si te gusta resaltar aquí hay múltiples
    marcas de relojes de lujo que se seguro atraerán miradas haciéndolo el centro
    de atención. y Rolex Industrie Aunque firmas como Tag Heuer han sabido plantar cara a la sombra con Tag Heuer Connected, nacido de la coalición entre la manufactura suiza
    y las tecnologías de Silicon Valley Intel Inside y Android Wear, y no solo sacarán un nuevo modelo, sino quizá un ‘smartwatch’ propio (conforme con unas declaraciones
    del CEO de TAG Heuer y Hublot, Jean-Claude Biver, a Bloomberg),
    al tiempo los ‘smartwatches’ están asemejándose cada vez más a los relojes de lujo.
    and Rolex Industrie Además los relojes son un buen productos
    para obsequiar cuando queres hacer un presente;
    vas a localizar relojes deportivos, para los amantes de los deportes; relojes de
    tendencia, los que los usuarios más compran; relojes casuales para usar en todo momento y relojes de mucho lujo para ocasiones especiales; tanto para mujeres para hombres.
    es una compañía suiza de relojes de pulsera y accesorios, creada tras la fusión en dos mil
    cuatro, de Montres Rolex Bulgari es una marca italiana de joyas y artículos
    de gran lujo, brotó en 1884, en Roma – Italia.
    ,

    Responder ↓

  10. hola tu ejemplo funcionó bien pero mis conocimientos de php son minimos. quisiera saber si puedo insertar la url del directorio desde mysql…. me podrian ayudar…

    read()) !== false)
    {
    if (preg_match(“gif”, $archivo) || preg_match(“jpg”, $archivo) || preg_match(“png”, $archivo)){
    echo ”.”\n”;
    }
    }
    $dirint->close();
    ?>

    Responder ↓

  14. Sistema

    .caja{
    width: 250px;
    height: 150px;
    background-color: darkcyan;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    margin: auto;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    margin-top: 80px;
    margin-bottom: 100px;
    }

    Buscar usuarios en el sistema.

     

    <?php
    $busca="";
    $busca=$_POST['busca'];
    $cont = 1;
    mysql_connect("localhost","root","macedo15");
    mysql_select_db("prueba");
    if ($busca!="") {
    $busqueda=mysql_query("SELECT * FROM usuarios WHERE usuario LIKE '%".$busca."%'");
    while ($res=mysql_fetch_array($busqueda)) {
    echo "respuesta numero: ".$cont++."datos encontrados ".$res['usuario']."tambien".$res['profesion']."”;
    }
    }else{
    echo “Lo sentimos no hay nigun dato con este nombre.”;
    }
    ?>

    Responder ↓

  15. Youre so cool! I dont suppose Ive read anything like this before. So nice to seek out somebody with some original ideas on this subject. realy thanks for starting this up. this web site is something that’s needed on the web, somebody with just a little originality. helpful job for bringing something new to the internet!

    Responder ↓

  17. hola, para los que quieren de orden alfabetico aquí les dejo como lo he logrado. aun falta perfeccionar el php para los archivos de sistema windows.

    <?php
    $dir="iM/imagens/"; //ruta de imagenes
    $directorio = opendir($dir);
    while ($archivo = readdir($directorio)) {
    if ($archivo=="." || $archivo=="..") { echo " "; } else {
    $archivos[$archivo] = $archivo;
    }
    }

    ksort ($archivos);
    foreach ($archivos as $archivo) {
    //echo "$archivo”;
    echo ”.”\n”;
    }

    ?>

    Responder ↓

  18. Y hay alguna forma de usar este código para que te muestre una selección de imágenes según un criterio específico?, por ejemplo según una condición señalada en un formulario.

    Saludos cordiales y disculpen por levantar este post después de tanto tiempo.

    Responder ↓

  19. un ejemplo a el codigo citado de “jorge”
    agregue el la seleccion de fotos “jpeg”
    mi folder de fotos de llama “fotos”

    Imágenes dinámicas de una carpeta en php

    #size {
    height: auto ;
    width:600px;
    }

    read()) !== false)
    {
    if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“jpeg”, $archivo) || eregi(“png”, $archivo)){
    echo ”.”\n”;
    }
    }
    $dirint->close();
    ?>

    Responder ↓

    • Ok Marci aqui tengo un ejemplo de lo que requieres….

      read()) !== false) {
      if (eregi(“gif”, $archivo)||eregi(“jpg”, $archivo)||eregi(“png”, $archivo)) {
      $miarray[]=”;
      }
      }
      $dirint->close;
      shuffle($miarray);
      foreach ($miarray as $key => $value) {
      echo $key.$value;
      }
      ?>

      Responder ↓

    • por alguna razon el ejemplo no se copio correctamente;
      aqui va otra vez;

      “read()) !== false) {”
      ” if (eregi(“gif”, $archivo)||eregi(“jpg”, $archivo)||eregi(“png”, $archivo)) {”
      ” $miarray[]=”;”
      ” }”
      “}”
      “$dirint->close;”
      “shuffle($miarray);”
      “foreach ($miarray as $key => $value) {”
      ” echo $key.$value;”
      “}”
      “?>”
      intenté poniendole comillas si no lo ves bien mandame un correo que con gusto te lo envio

      Responder ↓

  21. Aquí os dejo mi código para ese ejemplo.
    Tambien se encuentran las respuestas a
    la 2º pregunta de Isaac, como crear un enlace a al archivo .zip
    la pregunta de Mauricio Montes sobre como ordenar los archivos por nombre

    Imágenes dinámicas de una carpeta en php

    .marco{
    background-color:rgba(0,0,0,0.25);
    /*
    width=$maxAncho
    height=$maxAlto
    */
    width:100px; height:100px;
    margin:5px; padding:5px;
    border:black solid 1px;
    border-radius:10px;
    float:left;
    }

    file($archivo)); // Obtenemos el TIPO del archivo http://php.net/manual/es/function.finfo-file.php
    if ( $tipo[0]==”image” ) // Si el archivo es una imagen, sea cual sea la extensión
    {
    $tam=thum( $archivo, 100, 100 ); // Creamos la imagen en miniatura
    list($carpeta,$file) = explode (‘/’, $archivo); // Obtenemos la carpeta y el nombre completo del archivo.
    list($nombre,$extension) = explode (‘.’, $file); // Obtenemos el nombre y la extensión de la imagen.

    $imagen=”;
    $enlace=’‘.$imagen.’‘; // Creamos el enlace correspondiente para descargar el archivo .zip

    echo ”.$enlace.”; // Mostramos la miniatura en pantalla
    }
    }

    // Solo funciona correctamente si $maxAncho=$maxAlto
    function thum( $imagen, $maxAncho=100, $maxAlto=100 )
    {
    list($ancho,$alto)=getimagesize ($imagen); // Obtenemos el tamaño de la imagen http://php.net/manual/es/function.getimagesize.php
    if( $alto>$ancho) // Si la imagen es más alta que ancha
    {
    $escala=$alto/$ancho; // Calculamos la escala
    $tam=’height=”‘.$maxAlto.’px”‘; // Ajustamos la altura al máximo para la miniatura
    $pos=’ style=”margin-left:’. (($maxAncho/2) – ( $maxAlto/$escala )/2 ) . ‘px”‘; // Calculamos el desplazamiento de la imagen, para centrarla horizontalmente
    }
    else
    {
    $escala=$ancho/$alto; // Calculamos la escala
    $tam=’width=”‘.$maxAncho.’px”‘; // Ajustamos la anchura al máximo para la miniatura
    $pos=’ style=”margin-top:’. (($maxAlto/2) – ( $maxAncho/$escala )/2 ) . ‘px”‘; // Calculamos el desplazamiento de la imagen, para centrarla vertical
    }

    return $tam.’ ‘.$pos;
    }
    ?>

    Responder ↓

  22. Hola amigos excelente me funciona perfectamente la primera galeria del post, alguno de ustedes me podria arreglar el codigo para:

    1) redireccionar la carpeta IMG a otra en otro Host (para que mis imagenes esten en otro hosting el cual no admite php)

    2) Hacer que las imagenes sean la referencia a un archivo del mismo nombre pero .ZIP por ejemplo, se pueda pulsar en cada imagen para descargar dicho archivo tambien situado en la misma carpeta, con el mismo nombre pero formato .ZIP espero me puedan ayudar con eso

    les dejo mi correo isc_chille@yahoo.es gracias!

    Responder ↓

  23. Todo lo que mencionan lo hago con una consulta en mysql e imprimes las imagenes en el orden que quieras que en mi caso son promociones. El dueño de la pagina solo agrega o borra las promociones y automaticamente se actualizan en la pagina.

    Yo guardo el nombre del archivo en mi base de datos y lo que estoy buscando es si existe algun codigo simple pero funcional para extraer mis imagenes desde la base de datos y que se visualicen las fotos como una presentacion en flash

    Responder ↓

  25. Lo implementé en una galería de imágenes al estilo Itunes, y la verdad me quedó muy bien. Les copio el código por si alguien quiere replicarlo. La galeria implementada es ImageFlow.js (bájenlo completo del sitio).
    Sólo les copio como me quedó el Index.HTML que levanta las imágenes de una carpeta. Muy bueno y muy eficiente!
    (Debe ser mi segunda página WEB que voy armando!)
    Gracias por compartir!!

    ———–INDEX.HTML—————–

    ImageFlow

    ImageFlow

    read()) !== false)
    {
    if(eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){
    echo ”.”\n”;
    }
    }
    $dirint->close();
    ?>
    <!– Aquí comentado el formato para implementarlo de manera estático con las imágenes, pero mejor dinámico

    –>

    Responder ↓

  29. Hola amigo, yo estoy subiendo archivos automaticamente desde filezilla de mi webcam, de lo q sucede en mi cyber, el detalle q es una carpeta por dia…
    ejemplo:
    $directory=”Imagenes/2013-07-24″;
    Esto para el dia 24 de Julio, algun consejo de tener todo mas practico y no hacer esto dia a dia

    Responder ↓

    • Tienes varias carpetas con varias imágenes? En este caso yo leería todas las carpetas y subcarpetas y buscaría todas la extensiones jpg

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      function listFolderFiles($dir){
          $ffs = scandir($dir);
          echo '<ol>';
          foreach($ffs as $ff){
              if($ff != '.' && $ff != '..'){
                  echo '<li>'.$ff;
                  if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff);
                  echo '</li>';
              }
          }
          echo '</ol>';
      }

      listFolderFiles('Main Dir');

      Este es un ejemplo que lee todos los archivos y subcarpetas se puede aprovechar para hacer un filtro para imágenes con extensiones de imágenes

      Responder ↓

      • En donde puedo poner eso? me puedes mandar un ejemplo completo? esto es lo q yo utilizó:
        <?php
        //busca el numero de imagenes en la carpeta
        $dir = "2013-07-25";

        $dh = opendir($dir);
        while (false !== ($nombre_archivo = readdir($dh))) {
        $archivos[] = $nombre_archivo;
        }

        $total_archivos = count($archivos);
        $total = $total_archivos-2;
        // fin

        $num_colum = 5; // el numero de columnas a mostrar
        $carpeta="2013-07-25"; // la carpeta de las imagenes

        echo '’;
        $d = dir(“$carpeta”);
        $temcount = 1;
        while (false !== ($entry = $d->read())) {
        if( preg_match(‘/(\.gif$|\.png$|\.jpg)$/is’, $entry) ) {
        if( $entry != ‘.’ && $entry != ‘..’ ) {
        $patterns[0] = “/\.gif/”;
        $patterns[1] = “/\.png/”;
        $patterns[2] = “/\.jpg/”;
        $replacements[2] = “”;
        $replacements[1] = “”;
        $replacements[0] = “”;
        ksort($patterns);
        ksort($replacements);
        $entryname = preg_replace($patterns, $replacements, $entry);
        $a=1;
        if($carpeta!=”"){
        $entrya = “$carpeta/$entry”;
        }else{
        $entrya = $entry;
        }
        echo ‘‘
        .’        ‘;
        }
        }
        if ($temcount == $num_colum) {
        echo ”;
        $temcount=0;
        }
        $temcount++;
        }
        echo ”;

        ?>

        Podrias decirme como integrarlo aqui
        GRACIAS!!!

        Responder ↓

  30. Por otro lado tengo el siguiente problema, el contador de imagenes o la lectura que hace, me la esta haciendo mal, alguien pudo correjir o le paso este error?

    dejo el codigo: read()) !== false)
    {
    if (!preg_match(‘/gif/i’, $archivo) || !preg_match(‘/jpg/i’, $archivo) || !preg_match(‘/png/i’, $archivo)){
    echo ”.”\n”;
    }
    }
    $dirint->close();
    ?>

    Responder ↓

  31. Amigos, tuve un problema aqui, el famoso eregi() hay que remplazarlo por preg_match
    Dejo el codigo para lo que les pasa lo mismo.

    if (!preg_match(‘/gif/i’, $archivo) || !preg_match(‘/jpg/i’, $archivo) || !preg_match(‘/png/i’, $archivo)){

    Responder ↓

  32. HOLA AMIGOS, ME HA SERVIDO ESTE TUTO MUCHISIMO PARA PONER LAS IMAGENES EN MI SITIO WEB, PERO TENGO EL PROBLEMA DE QUE ME PONE LAS IMAGENES EN EL ORDEN QUE SE LE ANTOJA, SIN IMPORTAR SI LOS NOMBRES DE ARCHVOS ESTAN CON NUMBEROS, LETRAS O LO QUE SEA AL INICIO. SABEN QUE PUEDO HACER? GRACIAS!

    Responder ↓

  34. Hola, ¿como hago para que sólo muestre las 5 primeras imágenes?
    Gracias, sé que esto está tiempo sin preguntas ni respuestas pero me viene bien para una galería que ya tengo mostrada de esta forma.

    Un saludo.

    Responder ↓

  35. hola buen dia, muchas gracias por el aporte, muy util para sitios que cambian constantemente las images, yo lo use para una galeria y me marco un error de codigo obsoleto, ya lo modifique y le agregue algo mas de codigo ppara poder utilizarlo con como galerias, ya que la mayoria de los plugins de galerias se requiere poner las imagenes dentro de listas o algo parecido, les paso el codigo ya funcionando:

    read()) !== false){
    if (preg_match(“/.gif/”, $archivo) || preg_match(“/.jpg/”, $archivo) || preg_match(“/.png/”, $archivo)){
    echo ”.”\n”;
    }
    }
    $dirint->close();
    ?>

    Responder ↓

  36. Hola disculpa como hago para que le pueda dar un tamaño a todas la imagenes. .por ejemplo si suben muchas imagenes que todas tengan los mismos pixeles en la p agina donde se muestra aunque los suban de diferentes pixeles

    Responder ↓

    • eso seria con css
      podrias poner
      figure{width:20%}
      figure img{width:100%}

      esto seria para que todas las imagenes tengan el mismo ancho de figure, o simplemente lo pones a la etiqueta un width predeterminado

      saludos

      Responder ↓

  38. buen ejemplo!! gracias
    quisiera poder saber como hacer que solamente cargue una imagen determinada, algo asi como cargar una imagen a facebook, aparece para seleccionar una imagen, seleccionarlo y subirlo, guardando dicha imagen en una ubicación en el servidor. Puedes ayudarme o guiarme con esto
    muchas gracias

    Responder ↓

  40. en la actualidad (octubre de 2012) me funciona de esta manera:
    cambiando = “eregi(“gif”, $archivo)” por “preg_match(‘/’.”gif”.’/', $archivo)” , motivos de actualizacion
    “read()) !==false)
    {
    if (preg_match(‘/’.”gif”.’/', $archivo) || preg_match(‘/’.”jpg”.’/', $archivo) || preg_match(‘/’.”png”.’/', $archivo)){
    echo ”.”\n”;
    }
    }
    $dirint->close();

    ?>”

    Responder ↓

  41. Hola Mauricio, muy bueno el código la verdad que me solucionó el problema que tenía, ahora otra consulta, en estos momentos no utilizo un directorio fijo, sino uno variable, en vez de $directory=”img”; es $directory=”$dir_variable”; , por lo que quería preguntar si existe alguna forma de cambiar el directorio de raíz donde esta mi página sin tener que dejar usar la variable para encontrar el directorio, algo así como dejar otra ruta fija + una variable, en otras palabras buscar siempre en el mismo directorio, pero que dentro de ese directorio la búsqueda de la carpeta dependa de la una variable.

    Desde ya gracias

    Responder ↓

  42. graxias por el tuto de ante mano
    mi consulta: es a q te refieres con “aqui va el contenido” apliq tal como dice el tuto
    1.hice el html
    2.en la misma raiz e creado la carpeta “img”(obio q de las imagenes q quiero mostrar)
    3.pero de todas formas me sale
    “read()) !== false) { if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){ echo ”; } } $dirint->close(); ?>”
    y otra pregunta !
    las imagenes tienen q tener un nombre en comun? como img1-jpg, img2.jpg …. o cualquier nombre?

    Responder ↓

  43. no logro se ejecute me muestra esto

    read()) !== false) { if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){ echo ”; } } $dirint->close(); ?>

    Responder ↓

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

* *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>