La galería de imágenes más simple del mundo, en PHP.

Galeria de imágenes simple con PHP

Hoy te mostraré cómo realizar, para nuestra propia web o página de WordPress, una galería de imágenes que puedes alimentar y editar desde tu movil y en cualquier momento.

Este código te puede servir tanto para hacerte tu pequeña galería de fotos sin tener que pasar por utilizar otras aplicaciones tipo Twitter o Facebook, que puede que se hagan con la propiedad de tus imágenes, o como parte de una aplicación más grande a la que quieras añadirle esa funcionalidad.

Tú mismo sabrás lo que necesitas. Yo, simplemente te ofrezco estas lineas para que tú las uses como mejor necesites.

Qué necesito?

Muy sencillo. Necesitarás

  • Una carpeta “/images/” para guardar los archivos ,
  • 2 archivos PHP. Uno para tu propio acceso con el que podrás borrar las imágenes y otro para mostrar la galería en tu web.

Realmente, el segundo archivo será una modificación del primero en el que hemos eliminado unas lineas.

Vamos a ello.

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 
        <meta charset="UTF-8">
    </head>
    <body>
        
       <h1>Galería de imágenes</h1>
     <?php
     $borrar= filter_input(INPUT_GET, 'borrar');
     if(!empty($borrar)){
         unlink("images/".$borrar);
     }
     if (isset($_FILES['imagen'])) {
         if (explode("/", $_FILES['imagen']['type'])[0] == 'image') {
             move_uploaded_file($_FILES['imagen']['tmp_name'], "images/" . $_FILES['imagen']['name']);
             ?>
             <div class="alert alert-success alert-dismissible">
                 <button type="button" class="close" data-dismiss="alert">&times;</button>
                 <strong>Ok</strong> El archivo se ha subido con éxito.
             </div>
             <?php
         } else {
             ?>
             <div class="alert alert-danger alert-dismissible">
                 <button type="button" class="close" data-dismiss="alert">&times;</button>
                 <strong>Error</strong> El archivo subido no es de tipo imagen.
             </div>
             <?php
         }
     }
     ?>
       <form action='galeria_imagenes.php' method="post" enctype="multipart/form-data">
         <input type="file" name="imagen"  >
         <input type="submit" class="btn btn-success" value="Enviar imagen">
     </form>
     <hr/>
     <div style='display:flex;flex-wrap: wrap;'>
         <?php
         $imagenes = scandir("./images"); //asegurate de añadir la ruta correcta a tu carpeta de imágenes
         for ($i = 2; $i < count($imagenes); $i++) {
             ?>
             <div class="card" style="width:200px" >
                 <img class="card-img-top" src="images/<?= $imagenes[$i] ?>" alt="Card image">
                 <div class="card-body">
                     <h4 class="card-title"><?= $imagenes[$i] ?></h4>
                     <a href="?borrar=<?= $imagenes[$i] ?>" class="btn btn-danger">Borrar imagen</a>
                 </div>
             </div>
             <?php
         }
         ?>
     </div>     
    </body>
</html>

Como podrás ver, he añadido un poco de estilos de BOOTSTRAP para mostrar tablas y botones de una forma agradable a la vista. Puedes hacer tus propias modificaciones para adaptarlo a tu gusto.

Este código te muestra la galería asi:

administracion galeria de imagenes

Verás que en la cabecera se encuentra el formulario para buscar tus nuevas imágenes en tu dispositivo y poder subirlas directamente a la carpeta de tu servidor.

Automáticamente, si pasan el control que detecta si el archivo que has seleccionado se trata o no de una imagen, se añadirán a tu tabla de las imágenes.

También se muestra, al pie de cada foto, un botón para que puedas borrarlas con un sólo click. Más fácil imposible.

Y ahora, para que puedas simplemente mostrar la galería en el lugar que desees, modificamos el código anterior eliminando el formulario de subida de archivos y los botones de borrado.

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 
        <meta charset="UTF-8">
    </head>
    <body>

        <h1>Galería de imágenes</h1>
        <hr/>
        <div style='display:flex;flex-wrap: wrap;'>
            <?php
            $imagenes = scandir("./images");
            for ($i = 2; $i < count($imagenes); $i++) {
                ?>
                <div class="card" style="width:200px" >
                    <img class="card-img-top" src="images/<?= $imagenes[$i] ?>" alt="Card image">
                    <div class="card-body">
                        <h4 class="card-title"><?= $imagenes[$i] ?></h4>

                    </div>
                </div>
                <?php
            }
            ?>
        </div>

    </body>
</html>

Y en este caso, el resultado para el público de tu web sería el siguiente:

galeria de imagenes

Ahora ya sólo te queda modificar los estilos para adaptar esta galería a tu gusto. Pero eso lo dejo en tus manos.

En unos días escribiré una entrada para explicar cómo añadir estos códigos a una entrada o página de WordPress mediante el uso de “SHORTCODES”.

Tambíen es super sencillo y nos brinda un abanico infinito de posibilidades para nuestras webs.

Mientras tanto, no os olvideis de suscribiros para estar al dia. Hasta Pronto!

Compartir esta entrada.

2 thoughts on “La galería de imágenes más simple del mundo, en PHP.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

CAPTCHA ImageChange Image