Portal de Imágenes Gratuitas en PHP

Portal de Imágenes Gratuitas en PHP

Este Portal de Imágenes Gratuitas en PHP se conecta a la API de Pexels y genera automáticamente todas las imágenes que Pexels tiene en su portal, con esto es posible la carga de sus imágenes desde páginas externas, como este software.

Video Explicativo

Portal Imágenes Gratuitas

Esta aplicación es plenamente gratuita y la puedes descargar y reutilizar libremente como las aplicaciones de mi apartado Gratis donde tengo más de 80 aplicaciones que te podrían servir.

Este software de Imágenes Gratuitas en PHP consta principalmente de 3 archivos que son los que hacen posible su funcionamiento, los archivos son stackAPI.class.php, index.php y script.js, en adición tengo un archivo style.css pero sabemos que este último se encarga de la apariencia de la funcionalidad.

Para comunicarte con el API de Pexels debes inicialmente acceder, darte de alta y generar un token en el siguiente enlace:

https://www.pexels.com/es-es/api/

El sistema te mostrará una pantalla como la siguiente:

Explicación de Archivos del Portal de Imágenes Gratuitas en PHP

Explicación del Archivo stackAPI.class.php

El archivo stackAPI.class.php define una clase en PHP llamada stackAPI, la cual está diseñada para interactuar con la API de Pexels, un servicio de imágenes de stock. La clase permite realizar solicitudes a la API para obtener imágenes, ya sea a través de una selección curada o mediante búsqueda con palabras clave. A continuación, se explica el código paso a paso:

Constructor de la Clase

Método get_stack

Inicialización y Configuración de cURL

Ejecución de la Solicitud y Manejo de la Respuesta

Retorno de la Respuesta

Este diseño permite integrar fácilmente la funcionalidad de la API de Pexels en aplicaciones PHP, facilitando la obtención de imágenes tanto curadas como basadas en búsquedas específicas.

Archivo stackAPI.class.php

El siguiente es el código del archivo stackAPI.class.php

<?php

// Definición de la clase stackAPI para interactuar con la API de Pexels
class stackAPI
{
    // Propiedad privada para almacenar la clave de API de Pexels
    private $apiKey;

    // Constructor de la clase: se ejecuta automáticamente al instanciar la clase
    function __construct()
    {
        // Asignación de la clave de API a la propiedad privada $apiKey
        // La clave de API se necesita para autenticar las solicitudes a la API de Pexels
        $this->apiKey = "vUlc94hTnRbdYlEN5davrQZTHNlPdAX6S1ARyXlUjZKHKCxyIBwPgIFE";
    }

    // Método público para obtener imágenes de Pexels, ya sea a través de una selección curada o mediante búsqueda con palabras clave
    public function get_stack($type = "curated", $qry = [])
    {
        // Construcción de la URL base para la solicitud a la API, utilizando el tipo de solicitud especificado
        $url = "https://api.pexels.com/v1/{$type}";

        // Inicialización de la variable que almacenará los parámetros de la consulta
        $http_build = "";
        // Si el arreglo $qry no está vacío, se convierte en una cadena de consulta URL codificada
        if (!empty($qry))
            $http_build = "?" . http_build_query($qry);

        // Inicialización de una sesión cURL
        $curl = curl_init();
        // Configuración de la URL completa (incluyendo parámetros de consulta) para la solicitud cURL
        curl_setopt($curl, CURLOPT_URL, "{$url}{$http_build}");
        // Configuración de cURL para que retorne el resultado de la solicitud, en lugar de mostrarlo directamente
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        // Añadiendo el encabezado HTTP necesario para la autenticación, utilizando la clave de API
        curl_setopt($curl, CURLOPT_HTTPHEADER, [
            "Authorization: {$this->apiKey}"
        ]);

        // Ejecución de la solicitud cURL y almacenamiento del resultado
        $result = curl_exec($curl);
        // Obtención del código de estado HTTP de la respuesta
        $httpCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);

        // Cierre de la sesión cURL
        curl_close($curl);

        // Verificación del código de estado HTTP para determinar el estado de la solicitud
        $status = ($httpCode == 200) ? "success" : "error";

        // Retorno de un arreglo asociativo con el estado de la solicitud, el código de estado HTTP y el resultado de la solicitud
        // El resultado se decodifica de JSON a un arreglo PHP
        return [
            "status" => $status,
            "status_code" => $httpCode,
            "result" => json_decode($result, true)
        ];
    }
}

Explicación del Archivo index.php

El archivo index.php es la interfaz principal de tu aplicación web que utiliza la API de Pexels para buscar y mostrar imágenes basadas en palabras clave o mostrar una selección curada de imágenes. Aquí está la explicación detallada de cada sección de tu código:

Inicio del Script PHP

Estructura HTML

Contenido Principal

Modal para Imágenes

Script JavaScript

Este script PHP proporciona una interfaz de usuario para buscar y visualizar imágenes de la API de Pexels, con funciones adicionales como paginación y visualización de imágenes en un modal, todo presentado en un diseño responsive y amigable para el usuario.

Archivo index.php

El siguiente es el código del archivo index.php

<?php
// Incluir la clase stackAPI para interactuar con la API de Pexels.
require_once("./stackAPI.class.php");
// Crear una instancia de la clase stackAPI.
$stacks = new stackAPI();
// Obtener el término de búsqueda desde la URL, si existe, o dejarlo en blanco si no.
$search = $_GET['search'] ?? "";
// Obtener el número de página desde la URL, o usar 1 como predeterminado.
$page = $_GET['page'] ?? 1;

// Si se ha proporcionado un término de búsqueda, buscar imágenes relacionadas.
// De lo contrario, obtener una selección curada de imágenes.
if (!empty($search))
    $get_image = $stacks->get_stack('search', ['per_page' => 40, "query" => $search, "page" => $page]);
else
    $get_image = $stacks->get_stack('curated', ['per_page' => 40, "page" => $page]);

// Calcular el número total de páginas basado en el total de resultados y el número de resultados por página.
$pages = ceil(($get_image['result']['total_results'] ?? 1) / 40);
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portal de Imágenes</title>
    <link rel="shortcut icon" href="./faviconconfiguroweb.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <style>
        /* Estilos personalizados para la cuadrícula de imágenes y el modal */
        .media-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }

        .media-item img {
            width: 100%;
            height: auto;
            display: block;
        }

        .modal {
            position: fixed;
            z-index: 2;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            position: relative;
            margin: 10% auto;
            padding: 20px;
            width: 80%;
            max-width: 700px;
            background-color: #fff;
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 25px;
            color: #000;
            font-size: 35px;
            font-weight: bold;
            cursor: pointer;
        }

        #downloadButton {
            display: block;
            margin: 20px auto;
            padding: 10px 20px;
            cursor: pointer;
        }

        #scriptMessage {
            margin-top: 20px;
            /* Espacio por encima del mensaje */
            padding: 10px;
            background-color: #ffdd57;
            /* Fondo amarillo para llamar la atención */
            color: #000;
            /* Texto oscuro para contraste */
            font-weight: bold;
            /* Hacer el texto más grueso */
            border-radius: 5px;
            /* Bordes redondeados para suavizar */
            text-align: center;
            /* Centrar el texto */
        }

        #scriptMessage a {
            color: #000;
            /* Color del enlace */
            text-decoration: underline;
            /* Subrayar para destacar que es un enlace */
        }
    </style>
</head>

<body>
    <!-- Navegación del sitio. -->
    <nav class="container-fluid">
        <ul>
            <li><strong>Portal de Imágenes de Pexels</strong></li>
        </ul>
        <ul>
            <li><a href="https://www.youtube.com/channel/UCVnrMbml3wUIuwz-oSaIUnA">Youtube</a></li>
            <li><a href="https://github.com/configuroweb">GitHub</a></li>
            <li><a href="https://configuroweb.com/" role="button">ConfiguroWeb</a></li>
        </ul>
    </nav>
    <main class="container">
        <div class="grid">
            <section>
                <hgroup>
                    <h2>Portal de Imágenes ConfiguroWeb</h2>
                    <h3>Colección de Imágenes Gratuitas</h3>
                </hgroup>
                <p>Las mejores fotos de stock gratis, imágenes libres de regalías y vídeos compartidos por creadores.</p>
                <div id="searchbox-container" class="py-4">
                    <form action="./" method="get">
                        <input type="search" name="search" id="search" placeholder="Introduce lo que estés buscando aquí" class="form-control" value="<?= htmlspecialchars($search) ?>">
                        <button type="submit">Buscar</button>
                    </form>
                </div>
                <div class="media-container">
                    <?php if ($get_image['status'] == 'success' && isset($get_image['result']['photos']) && !empty($get_image['result']['photos'])) : ?>
                        <?php foreach ($get_image['result']['photos'] as $photo) : ?>
                            <div class="media-item">
                                <img src="<?= $photo['src']['medium'] ?>" alt="<?= $photo['alt'] ?>" style="cursor: pointer;">
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
                <div class="pagination">
                    <?php if ($page != 1) : ?>
                        <a href="./?<?= http_build_query(['search' => $search, 'page' => $page - 1]) ?>">Anterior</a>
                    <?php endif; ?>
                    <span><?= "{$page}/{$pages}" ?></span>
                    <?php if ($page < $pages) : ?>
                        <a href="./?<?= http_build_query(['search' => $search, 'page' => $page + 1]) ?>">Siguiente</a>
                    <?php endif; ?>
                </div>
            </section>
        </div>
    </main>
    <div id="imageModal" class="modal" style="display:none;">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <img id="modalImage" src="" alt="Imagen en Tamaño Completo">
            <p id="imageInfo"><span id="imageAuthor"></span></p>
            <!-- Nuevo mensaje aquí -->
            <div id="scriptMessage">
                Este script es uno de los más de 150 códigos que tengo en mi página web <a href="https://configuroweb.com" target="_blank">configuroweb.com</a>
            </div>
            <button id="downloadButton">Descargar Imagen</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.media-item img').forEach(item => {
                item.addEventListener('click', function() {
                    const modal = document.getElementById('imageModal');
                    const modalImg = document.getElementById('modalImage');
                    const downloadBtn = document.getElementById('downloadButton');
                    modal.style.display = "block";
                    modalImg.src = this.src; // Establece la imagen seleccionada en el modal
                    downloadBtn.onclick = function() { // Función de descarga
                        const a = document.createElement('a');
                        a.href = modalImg.src;
                        a.download = 'Descarga.jpg'; // Nombre del archivo de descarga
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    };
                });
            });

            // Cerrar el modal
            document.querySelector('.close-button').addEventListener('click', function() {
                document.getElementById('imageModal').style.display = "none";
            });
        });
    </script>
</body>

</html>

Explicación del Archivo script.js

El código script.js proporciona funcionalidades interactivas para una página web que muestra imágenes. Se divide en varias partes, cada una con su propósito específico para mejorar la experiencia del usuario. Vamos a desglosarlo:

Función download_img

Bloque $(document).ready

Evento ‘keypress’ en el campo de búsqueda

Evento ‘DOMContentLoaded’

Resumen

Este script mejora la interactividad de la página web al permitir a los usuarios ver detalles de las imágenes, descargarlas en diferentes tamaños y buscar imágenes específicas. Utiliza técnicas de JavaScript modernas como funciones asincrónicas, manipulación del DOM, y controladores de eventos para crear una experiencia de usuario rica y dinámica.

Archivo script.js

El siguiente es el código del archivo script.js

// Función asincrónica para descargar imágenes.
async function download_img($url, $fname=""){
    // Obtener la imagen desde la URL proporcionada.
    const _image = await fetch($url);
    // Convertir la imagen a un blob.
    const blob = await _image.blob();
    // Crear una URL a partir del blob.
    const url = window.URL.createObjectURL(blob);
    // Crear un elemento <a> para descargar la imagen.
    const link = document.createElement("a");
    link.href = url;
    link.download = $fname; // Establecer el nombre de archivo para la descarga.
    link.click(); // Simular un clic para iniciar la descarga.
}

// Esperar a que el documento esté listo.
$(document).ready(function(){
    // Establecer un controlador de clic para los elementos con clase .media-item.
    $('.media-item').click(function(e){
        e.preventDefault(); // Prevenir el comportamiento predeterminado.

        // Referencia al modal de vista previa y extracción de datos necesarios del elemento clickeado.
        var prevModal = $('#media-preview');
        var key = $(this)[0].dataset.key;
        var fname = $(this)[0].dataset.filename;

        // Mostrar la imagen seleccionada en el modal.
        prevModal.find('#preview-media').html(`
            <img src="${__stacked[key]['src']['large']}" />
        `);

        // Mostrar el nombre del fotógrafo en el modal.
        prevModal.find('#phtotographer').text(`${__stacked[key]['photographer']}`);

        // Preparar contenedor para enlaces de descarga.
        var dlContainer = $('#downloads');
        dlContainer.html(''); // Limpiar contenedor previo.
        var sizes = {
            original: "Original",
            large2x: "2x Larger",
            large: "Large",
            medium: "Medium",
            small: "Small",
            portrait: "Portrait",
            landscape: "Landscape",
            tiny: "Tiny"
        };

        // Generar enlaces de descarga para cada tamaño disponible.
        Object.keys(__stacked[key]['src']).forEach(k=>{
            var _url = __stacked[key]['src'][k];
            var dlItem = $(`<a class="btn btn-sm btn-primary d-block rounded-pill mb-2 download-item" href="${_url}"><strong>${sizes[k]}</strong></a>`);
            dlContainer.append(dlItem);
            // Establecer evento de clic para descargar la imagen seleccionada.
            dlItem.click(function(e){
                e.preventDefault(); // Prevenir el comportamiento predeterminado del enlace.
                download_img(_url, fname); // Llamar a la función de descarga.
            });
        });

        // Mostrar el modal de vista previa.
        prevModal.modal('show');
    });

    // Controlador de eventos para la entrada de búsqueda.
    $('#search').on('keypress', function(e){
        if(e.which == 13 || e.keyCode == 13 || e.key == "Enter" ){
            var uri = new URL(location.href);
            var searchParams = uri.searchParams;
            // Eliminar el parámetro de búsqueda existente si lo hay.
            if(searchParams.has('search'))
                searchParams.delete('search');
            // Añadir el valor de búsqueda actual a los parámetros de la URL.
            searchParams.set('search', $(this).val());
            // Redirigir a la URL actualizada.
            location.href = uri.toString();
        }
    });
});

// Controlador de eventos para mostrar el modal al hacer clic en las imágenes.
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.media-item img').forEach(item => {
        item.addEventListener('click', function() {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImage');
            const downloadBtn = document.getElementById('downloadButton');
            modal.style.display = "block";
            modalImg.src = this.src; // Establecer la imagen en el modal.
            // Establecer el evento de clic para el botón de descarga.
            downloadBtn.onclick = function() {
                const a = document.createElement('a');
                a.href = modalImg.src;
                a.download = 'Descarga.jpg'; // Nombre del archivo de descarga.
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            };
        });
    });

    // Cerrar el modal al hacer clic en el botón de cierre.
    document.querySelector('.close-button').addEventListener('click', function() {
        document.getElementById('imageModal').style.display = "none";
    });
});

Flujo del funcionamiento del Portal de Imágenes Gratuitas en PHP

El flujo del funcionamiento del Portal de Imágenes Gratuitas en PHP, que utiliza la API de Pexels para buscar y mostrar imágenes basadas en palabras clave o mostrar una selección curada de imágenes, se puede describir en los siguientes pasos:

1. Inicialización

2. Recepción de Entrada del Usuario

3. Búsqueda o Selección Curada

4. Presentación de Resultados

5. Interacción con las Imágenes

6. Descarga de Imágenes

7. Búsqueda Directa

8. CSS para Estilo Visual

9. Flujo Continuo

Este flujo describe una aplicación web interactiva que no solo permite a los usuarios buscar y visualizar imágenes de alta calidad de manera eficiente sino también interactuar con estas imágenes de maneras útiles, como ver detalles adicionales y descargar imágenes directamente.

Repositorio del Portal de Imágenes Gratuitas

En el siguiente enlace puedes descargar el código y reutilizar la aplicación:


https://github.com/configuroweb/portal-imagenes
1 forks.
0 stars.
0 open issues.

Recent commits:

Portal de Imágenes Gratuitas

Como siempre te recomiento te pegues una pasada por el blog, te garantizo que te gustará y cualquier duda quedo al pendiente, me puedes contactar a mi Whatsapp en el siguiente enlace:

📱 Contáctanos por WhatsApp

🤖 Asistente Virtual
¡Hola! 👋

¿En qué te puedo ayudar hoy?