32 Como poner iconos de cada archivos en las carpetas del curso de LARAVEL (PHP y MySql) FullStack

Duración: 12 min
Módulo: 📄 Listado y Visualización de Archivos Lección 3 de 7

Descripción

🖼️ Lección 32: Cómo Poner Iconos en Cada Archivo

Este capítulo se dedica a mejorar la experiencia visual del usuario implementando iconos dinámicos en la lista de archivos, de manera similar a cómo operan gestores como Google Drive. Para lograr esto, el video se enfoca en cómo identificar la extensión de cada archivo y, basándose en ella, mostrar el icono correspondiente.

⚙️ Obtención Dinámica de la Extensión

La clave para mostrar el icono correcto es extraer la extensión de la cadena de texto del nombre del archivo almacenado en la base de datos:

  1. Función de PHP: Se utiliza la función nativa de PHP pathinfo() [01:00].
  2. Uso de Constante: Para obtener solo la extensión, se pasa el nombre del archivo y la constante PATHINFO_EXTENSION a la función pathinfo() [01:59].
  3. Resultado: Esta lógica retorna la extensión del archivo (ej. jpg, pdf, docx), la cual se almacena en una variable $extension para ser utilizada en la lógica condicional [02:29].

🎨 Implementación de Iconografía Condicional

Una vez que se tiene la extensión, se utiliza una estructura condicional (if / elseif) para mostrar el tag <img> correspondiente a cada tipo de archivo:

  • Ruta de Iconos: Se crea una carpeta icons dentro de la ruta pública (public/images/icons) para almacenar los archivos de imagen de los iconos [03:41].
  • Lógica Condicional: Dentro del bucle @foreach de la vista, se implementa la lógica que pregunta [03:18]:
    • Si la extensión es jpg (o png, etc.), se muestra el icono de imagen [06:29].
    • Si la extensión es pdf, se muestra el icono de PDF [07:22].
    • Si la extensión es docx, se muestra el icono de Word [11:11].
  • Estilo del Icono: Los iconos se insertan utilizando el helper de ruta de Laravel (URL()) y se les da un tamaño pequeño (ej. 25 píxeles) para que se integren bien con el texto [06:17].

El video concluye con el resultado visualmente mejorado, donde los archivos ahora se identifican de manera intuitiva mediante su icono, haciendo la interfaz más amigable y funcional. Se sugiere al usuario replicar esta lógica para otras extensiones comunes como videos, archivos comprimidos (zip, rar), Excel, PowerPoint, etc. [11:54].