Creando instagram (versión web) con laravel #8: Visualizar fotos subidas en el perfil.
En esta ocasión lo único que haremos será mostrar las fotos subidas en el perfil de usuario.
La vista
En el layout app.blade.php incluimos las siguientes bibliotecas javascript:
Luego dentro del <body> debemos tener un <div> con id “app” que contenga todo lo que esta dentro del body del layout excepto por las bibliotecas recién agregadas. Esto lo usaremos mas adelante con vuejs, jquery y bootstrap es para mostrar un modal cuando el usuario haga clic en alguna de las fotos del perfil. la directiva @yield es para agregar código javascript solo en las vistas que uno necesite, o sea si incluimos esta sección en el profile.blade.php ese javascript solo se cargará en esa vista.
Luego en la vista profile.blade.php en la parte del html:
En el @foreach donde se muestran las fotos los atributos importantes son:
- v-on:click: Cuando se haga clic sobre una foto se vue llamará al método
openModal()que lo utilizaremos para mostrar el modal como tal. - photo y description: Los valores de estos atributos los utilizaremos dentro del método
openModalpara que al mostrar un modal este contenga los datos correspondientes a la imagen cliqueada.
En el titulo del modal mostramos el nombre del usuario con Auth::user()->name , luego para mostrar la foto tenemos v-bind:src="photo", este atributo conecta el elemento photo que esta en el objeto “data” de vuejs. Luego mostramos el nombre al costado de la foto con nuevamente con Auth::user()->name y la descripción con @{{ description }} (usamos @ porque en este caso es vue quien muestra la descripción no blade.) al costado de la foto.
A continuación la parte de vue que debe ir después de @section content:
Primero creamos el objeto Vue y le pasamos lo siguiente:
- el: Referencia el id del elemento que contiene todo el cuerpo para todas las vistas, este elemento esta en el layout
app.blade.php. - data: Este es el objeto que contiene la url de la foto y la descripción de cada post.
- methods: Aquí esta el método que vimos anteriormente que se llamara cuando hagamos clic sobre alguna imagen en el perfil. Lo único que hacemos es asignar a las llaves
photoydescriptiondel objeto data a los valores de los atributos de cada imagen “cliqueada”.
En resumen:
* El usuario hace clic en una imagen
* Se llama al métodoopenModal
* El método obtiene los valores de cada atributo de la imagen (<img photo=”…” description=”…”>) “cliqueada”.
* Esos valores se asignan aphotoydescriptiondentro del objeto data de vue.
* Llamamos al modal con$('#post_modal').modal().
Eso es!, en la siguiente publicación se habilitará la funcionalidad de ingresar al perfil pero no con /profile sino con su id ejemplo: imagegram.test/profile/1 donde 1 es el id del usuario. esto nos permitirá visitar otros perfiles y ver sus fotos, ya que hasta ahora no podemos visitar el perfil de otro usuario solo el nuestro.
El repositorio para seguir el código esta en: https://github.com/Brandonxy/imagegram.
Si no se entendió puedes ver el código completo en github ;)
