Optimizando la Biblioteca de Contenidos: Mejoras en el Banco de Imágenes de Breniapp

En Breniapp, hemos realizado mejoras significativas en nuestro gestor de activos dentro de la Biblioteca de contenido. El objetivo principal ha sido transformar nuestro banco de imágenes en una herramienta mucho más intuitiva, organizada y eficiente para nuestros usuarios.

Organización y Filtrado por Formato

Uno de los cambios más notables ha sido la transición de una grilla de estilo "puzzle" (masonry) a una grilla uniforme de miniaturas cuadradas. Esta estandarización permite una visualización más limpia y predecible.

Para lograr esto, implementamos una lógica de detección de dimensiones en el backend mediante PHP, que clasifica automáticamente cada archivo al momento de su carga o durante la visualización de la miniatura:

public function getOrientationAttribute($image): string
{
    [$width, $height] = getimagesize($image->getPath());
    
    if ($width === $height) return 'cuadrada';
    return ($width > $height) ? 'horizontal' : 'vertical';
}

Con esta clasificación, hemos añadido badges visuales en cada imagen y un sistema de filtrado que permite a los usuarios navegar rápidamente entre formatos, mejorando significativamente la experiencia en la gestión de activos multimedia.

Implementación del Lightbox con Alpine.js

Para solucionar el problema de la previsualización, integramos un componente de lightbox utilizando Alpine.js. Este componente permite abrir imágenes en su resolución original con un solo clic, permitiendo una inspección detallada sin abandonar el contexto de la grilla:

<div x-data="{ open: false, image: null }">
    <!-- Grilla de imágenes -->
    <div @click="open = true; image = 'url_de_la_imagen'">
        <!-- Contenido de la miniatura -->
    </div>

    <!-- Lightbox -->
    <div x-show="open" @click.away="open = false" @keydown.escape.window="open = false">
        <img :src="image" alt="Previsualización">
        <button @click="open = false">✕</button>
    </div>
</div>

Esta implementación asegura que el estado de la aplicación, como la posición del scroll y los filtros aplicados, se mantenga intacto al cerrar la previsualización, ofreciendo una experiencia de usuario fluida y sin interrupciones.

Consistencia en la Plataforma

Además del banco de imágenes, hemos extendido la lógica de filtrado a la sección de "Contenido generado", añadiendo la opción de filtrar por tipo de contenido, incluyendo "Carrusel". Esto asegura una experiencia coherente en todo el ecosistema de la Biblioteca, permitiendo a los usuarios gestionar borradores y activos finales con mayor agilidad.