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.

Demo del Portal de Imágenes Gratuitas en PHP

https://appscweb.com/portal-imagenes/index.php

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

__construct()

stackAPI

apiKey

$apiKey

Método get_stack

public function get_stack($type = "curated", $qry = []): Este es un método público que se puede llamar desde fuera de la clase. Tiene dos parámetros:
- $type: Especifica el tipo de solicitud que se va a realizar a la API. Por defecto, es "curated", lo que indica que se solicitará una selección curada de imágenes. Otro valor común para este parámetro es "search", utilizado para buscar imágenes basadas en palabras clave.
- $qry: Un arreglo asociativo que contiene los parámetros de la consulta para la solicitud a la API. Por ejemplo, puede incluir palabras clave para la búsqueda, el número de resultados por página, y el número de la página a solicitar.
Construcción de la URL de la Solicitud:
- La URL base para realizar solicitudes a la API de Pexels se construye utilizando el tipo de solicitud ($type), resultando en https://api.pexels.com/v1/{$type}.
- Si el arreglo $qry no está vacío, se añaden los parámetros de la consulta a la URL utilizando la función http_build_query, que convierte el arreglo en una cadena de consulta URL codificada.

Inicialización y Configuración de cURL

Se inicializa una sesión cURL utilizando curl_init().
Se configura la URL de la solicitud con curl_setopt($curl, CURLOPT_URL, "{$url}{$http_build}").
Se configura cURL para que retorne el resultado de la solicitud en vez de mostrarlo directamente utilizando curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1).
Se añade un encabezado HTTP para la autenticación, proporcionando la clave de API con curl_setopt($curl, CURLOPT_HTTPHEADER, ["Authorization: {$this->apiKey}"]).

Ejecución de la Solicitud y Manejo de la Respuesta

Se ejecuta la solicitud con curl_exec($curl), y el resultado se almacena en $result.
Se obtiene el código de estado HTTP de la respuesta con curl_getinfo($curl, CURLINFO_HTTP_CODE).
Se cierra la sesión cURL con curl_close($curl).

Retorno de la Respuesta

Se verifica el código de estado HTTP. Si es 200, significa que la solicitud fue exitosa, y el estado se establece como "success". De lo contrario, se establece como "error".
Se devuelve un arreglo asociativo que incluye el estado de la solicitud ("status"), el código de estado HTTP ("status_code"), y el resultado de la solicitud, el cual se decodifica de JSON a un arreglo PHP con json_decode($result, true).

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

Inclusión de la clase stackAPI: Primero, se incluye el archivo stackAPI.class.php que contiene la clase necesaria para interactuar con la API de Pexels.
Creación de instancia de stackAPI: Se crea una instancia de la clase stackAPI para poder utilizar sus métodos.
Recogida de parámetros GET: Se recogen los parámetros search y page de la URL. Si no se proporcionan, search se establece como una cadena vacía y page como 1.
Búsqueda o selección curada: Dependiendo de si el parámetro search está vacío o no, se llama al método get_stack con el tipo search o curated. Esto determina si se realiza una búsqueda basada en palabras clave o si se muestra una selección curada de imágenes. Se pasan parámetros adicionales como el número de resultados por página (per_page) y el número de página (page).

Estructura HTML

Doctype y lenguaje: Se especifica el doctype HTML5 y el lenguaje de la página como español (lang="es").
Meta tags y título: Se incluyen meta tags para la codificación de caracteres y la compatibilidad con dispositivos móviles, así como el título de la página.
Estilos CSS: Se enlaza un archivo CSS de PicoCSS para el diseño y se incluyen estilos adicionales para el layout específico de la página, como la presentación de imágenes y el modal.
Navegación: Se incluye una barra de navegación con enlaces a YouTube, GitHub y el sitio web ConfiguroWeb.

Contenido Principal

Formulario de búsqueda: Un formulario permite al usuario ingresar palabras clave para la búsqueda de imágenes. Utiliza el método GET para enviar la búsqueda.
Visualización de imágenes: Se muestra una cuadrícula de imágenes. Si la respuesta de la API es exitosa y contiene imágenes, se iteran y muestran en la página.
Paginación: Se incluyen enlaces para navegar entre las páginas de resultados. Se calcula el total de páginas basado en el número total de resultados y el número de resultados por página.

Modal para Imágenes

Estructura del modal

Script JavaScript

Interactividad del modal

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://www.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

Esta función asincrónica se encarga de descargar imágenes.
Acepta dos parámetros: $url (la URL de la imagen a descargar) y $fname (el nombre de archivo deseado para la descarga, que es opcional).
Utiliza fetch para obtener la imagen desde la URL proporcionada, luego convierte la respuesta en un blob.
Crea un enlace temporal (<a> tag) con un href que apunta a una URL creada a partir del blob, y simula un clic en este enlace para iniciar la descarga.

Bloque $(document).ready

Este bloque se ejecuta una vez que el DOM está completamente cargado.
Establece un controlador de eventos para cuando se hace clic en elementos con la clase .media-item.
- Al hacer clic, se muestra un modal con la imagen seleccionada en tamaño grande, el nombre del fotógrafo y enlaces de descarga para diferentes tamaños de la imagen.
- Los enlaces de descarga invocan la función download_img al ser clickeados, evitando el comportamiento predeterminado y descargando la imagen en el tamaño seleccionado.

Evento 'keypress' en el campo de búsqueda

Se añade un controlador para el evento keypress en el elemento de búsqueda.
Si se presiona la tecla Enter mientras se está en el campo de búsqueda, se actualiza la URL de la página con el valor de búsqueda introducido, permitiendo así filtrar las imágenes mostradas según el término de búsqueda.

Evento 'DOMContentLoaded'

Este bloque agrega controladores de eventos a todas las imágenes dentro de elementos con la clase .media-item una vez que el contenido del DOM ha sido cargado.
Al hacer clic en una de estas imágenes, se muestra un modal con la imagen en tamaño completo, y se proporciona un botón que permite descargar la imagen haciendo uso de la función download_img.
También se incluye un controlador para el botón de cerrar el modal, que oculta el modal cuando se hace clic en él.

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

La aplicación se carga en el navegador del usuario.
Se incluye el archivo stackAPI.class.php que contiene la lógica para comunicarse con la API de Pexels.
Se crea una instancia de la clase stackAPI.

2. Recepción de Entrada del Usuario

El usuario puede introducir una palabra clave en el campo de búsqueda y enviarla (o simplemente navegar por la página para ver una selección curada de imágenes si no se introduce ninguna búsqueda).
Se recogen los parámetros search (búsqueda) y page (página) de la URL, usando valores predeterminados si no se proporcionan.

3. Búsqueda o Selección Curada

Basado en la presencia de una palabra clave de búsqueda, la aplicación decide si realizar una búsqueda de imágenes relacionadas con esa palabra clave o mostrar una selección curada de imágenes.
Se llama al método get_stack de la instancia de stackAPI, pasando el tipo de solicitud (search para búsqueda o curated para selección curada) y los parámetros necesarios como el número de resultados por página y el número de página actual.

4. Presentación de Resultados

La API de Pexels devuelve un conjunto de imágenes basado en la solicitud.
El HTML generado dinámicamente muestra estas imágenes en la página, utilizando un diseño de cuadrícula o similar.
La paginación se maneja mediante enlaces o botones que permiten al usuario navegar por diferentes páginas de resultados.

5. Interacción con las Imágenes

Cuando un usuario hace clic en una imagen, se puede mostrar un modal o una vista más detallada de esa imagen, posiblemente con opciones para descargar la imagen en diferentes tamaños.
Este comportamiento se gestiona mediante JavaScript, que escucha los eventos de clic en las imágenes y muestra el modal correspondiente.

6. Descarga de Imágenes

Dentro del modal o la vista detallada, los usuarios pueden elegir descargar la imagen. Al seleccionar un tamaño y hacer clic en el enlace de descarga, se invoca una función de JavaScript que maneja la descarga de la imagen directamente al dispositivo del usuario.

7. Búsqueda Directa

El usuario puede realizar búsquedas directas mediante el campo de búsqueda. Al presionar Enter o hacer clic en un botón de búsqueda, la página se actualiza para mostrar las imágenes que coinciden con los términos de búsqueda introducidos.

8. CSS para Estilo Visual

style.css

9. Flujo Continuo

Los usuarios pueden continuar navegando por diferentes páginas de resultados, realizar nuevas búsquedas, ver detalles de imágenes específicas y descargar imágenes según sea necesario.

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:

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:

https://configuroweb.com/WhatsappMessenger

Revista Blog