Integración de Imágenes y Contenido Multimedia en Proyectos Web

Clase 26 de 37 • Curso de Introducción a Laravel 6

Resumen

¿Cómo integrar contenido multimedia en tu aplicación?

¡Vamos a guiarnos a través de la magia de incrustar imágenes y otros medios en tu proyecto! Incorporar contenido multimedia no solo mejora el atractivo visual de tu aplicación, sino que también enriquece la experiencia del usuario. Vamos a ver cómo se hace esto, paso a paso.

¿Cómo se añade una imagen?

Primero, asegúrate de que la imagen exista en tu base de datos de la aplicación. Una vez que esté almacenada, es hora de trabajar con la zona pública de tu aplicación, específicamente en el archivo de vistas donde se gestionarán tus posts.

Condicional para la imagen: Es fundamental trabajar con una condicional que verifique si tenemos una imagen.
```
<?php if ($post->image): ?>
    <img src="<?= $post->image_path ?>" alt="Post Image">
<?php endif; ?>
```
- Si se encuentra la imagen, esta será mostrada.
- Si no existe, puedes optar por mostrar contenido alternativo.
Ruta de la imagen: Anteriormente, las imágenes incluían rutas que podían no ser directas. Para tener acceso desde una carpeta pública, concedemos permiso usando un "enlace simbólico".

¿Cómo usar el contenido embebido?

Cuando hablamos de contenido embebido, nos referimos a multimedia que no es local, como videos de YouTube o podcasts.

Configuración embebida: Para manejar correctamente el contenido embebido, es necesario emplear las clases de UI como las de Bootstrap para asegurar una visualización adecuada.
```
<div class="embed-responsive embed-responsive-16by9">
    <?= $post->embedded_content ?>
</div>
```
- Utiliza las clases embed-responsive para garantizar una correcta proporción en la visualización.
Resultado de prueba: Confirma que el video o el podcast se integran correctamente verificando su funcionalidad tras la incorporación.

¿Cómo manejar medios desde la vista administrativa?

El panel de administración juega un papel crucial, permitiéndote incorporar y manejar tanto imágenes como contenido embebido.

Cargar un podcast o video:
- Selecciona la opción de compartir contenido embebido proporcionado por plataformas como YouTube.
- Copia y pega el código de incrustación directamente en el formulario de carga de tu plataforma.
Verificación Enlinea:
- Después de subir un nuevo contenido, verifica su integración y comprueba su funcionalidad en la plataforma.

¿Cómo replicar lógica para cada post?

Finalmente, la misma lógica que has implementado para manejar los condicionales y la presentación de imágenes o contenido embebido puede y debe replicarse para cada post en tu aplicación. Esto asegura una experiencia de usuario consistente y un look uniforme a través de tu sitio.

Con estas herramientas al alcance de tu mano, tienes el poder de llevar tu aplicación al siguiente nivel de profesionalismo ¡Atrévete a intentarlo y sorpréndenos con tus creaciones en la zona de comentarios!

Jimmy Buriticá Londoño

student•

Para que el Slug funcione, deben modificar la siguiente línea en el archivo web.php

Route::get('/blog/{post:slug}', 'PageController@post')->name('post');

Antes era:

Route::get('blog/{post}', 'PageController@post')->name('post');

Juan Carlos García Esquivel

student•

Hola Jimmy también tienes la opción de modificar la ruta para que siga funcionando el binding para que tome el slug y no el id, ya que si modificas el parámetro el binding automático de laravel en ocaciones no funciona como tu esperas, esta es una recomendación que puedo darte 😀.

Customizing The Route Key Name If you would like model binding to use a database column other than id when retrieving a given model class, you may override the getRouteKeyName method on the Eloquent model:

/**
 * Get the route key for the model.
 *
 * @return string
 */
public function getRouteKeyName()
{
    return 'slug';
}

Germán Alejandro Niño

student•

Hola, probe la solución de Jimmy y no me funciono pero no entiendo porque. La solución de jcmexdev si me funciono.

Para la primera opción, como puedo verificar las rutas de un post? Porque el <a> de las views seguian apuntando al link sin el slug e introduciendolo manualmente tampoco aparecian. Me aparecia el 404 not found.

Carlos Eduardo Gomez García

teacher•

Excelente proyecto, lo seguí todo al pie de la letra y logré hacer el blog con Laravel, sin duda aprendí cosas nuevas.

Les dejo un enlace a mi repositorio de GitHub el cual contiene el proyecto ya terminado y el reto resuelto en Laravel 8 por si gustan comparar sus códigos :D

https://github.com/RetaxMaster/proyecto-blog-laravel-platzi

Gabriel Rodriguez

student•

Les comparto el resultado de mi blog. Personalmente me gusta más el tema oscuro. Le añadí una sección de comentarios (todavía no lo conecté ya que tengo que desplegar mi app en un servidor). Planeo seguir y escalar este projecto, me gusta la idea de tener un blog y recibir algunos comentarios.

Pedro Renatto Neciosup Liza

student•

Una mejor opcion de obtener la URL de la imagen: \Storage::disk("public")->url($this->image);

Italo Morales Fantone

teacher•

:) es válido

Pablo Emilio Escobar Ossa

student•

Hola, Les quiero compartir mi proyecto.

La sección administrativa de los articulos.

La vista principal de los articulos

José Reinaldo Duque Serna

student•

Súper Pablo. Me parece más limpio este diseño. Cómo se hace para activar el menú de tres puntos en cada post?

Jorge Trad

student•

Apliqué lo que aprendí en esta clase en la vista de editar porque me pareció bien mostrarle al usuario todos los elementos que existen y puede modificar de la publicación... ¿Qué opinan?

Gustavo Jara

student•

Use este codigo en la view "post" para la image y el embedded code

&lt;div class=&quot;card-body&quot;&gt;
                    @if($post-&gt;image)
                        &lt;img src=&quot;{{ $post-&gt;get_image }}&quot; class=&quot;card-img-top mb-4&quot;&gt;
                    @endif
                    &lt;h5 class=&quot;card-title&quot;&gt;{{ $post-&gt;title }}&lt;/h5&gt;
                    &lt;p class=&quot;card-text&quot;&gt;
                        {{ $post-&gt;body }}
                    &lt;/p&gt;
                    &lt;p class=&quot;text-muted mb-4&quot;&gt;
                        &lt;em&gt;
                            &amp;ndash; {{ $post-&gt;user-&gt;name }}
                        &lt;/em&gt;
                        {{ $post-&gt;created_at-&gt;format('d M Y') }}
                    &lt;/p&gt;
                    @if($post-&gt;iframe)
                        &lt;div class=&quot;embed-responsive embed-responsive-16by9&quot;&gt;
                            {!! $post-&gt;iframe !!}
                        &lt;/div&gt;
                    @endif
                &lt;/div&gt;

Willans Romero

student•

¿Cómo hago para que en la url en ves de pasar el id, pueda usar el slug del post?

Alexander Daniel Linares Ríos

student•

también tengo el mismo problema, ¿como hago para que funcione de nuevo el slug, retrocedo al vídeo y tengo la misma configuración, pero ahora no esta funcionando?

Axel David Espinosa Meneses

student•

Hola bro Lo que yo hice fue modificar la ruta

Route::get('blog/{post}', 'PageController@post')-&gt;name('posts.single');

Y la cambie para que el parametro que recibiera fuera el slug

Route::get('blog/{slug}', 'PageController@post')-&gt;name('posts.single');

Ahora el controlador PageController en su metodo post hice una modificación:

Primero cambie el parámetro que recibía el metodo.
Hago una consula a la BD la cual debe de traerme el elemento que en el campo slug coincida con el que obtenemos por el parametro slug de nuestro metodo y le digo al final que solo me traiga la primer coincidencia con el metodo first().
Retorno el dato a la vista.

public function post($slug)
    {
        $post = Post::where('slug', $slug)-&gt;get()-&gt;first();
        return view('post', [
            'post' =&gt; $post
        ]);
    }

El método anterior era así:

public function post(Post $post)
    {
        return view('post', [
            'post' =&gt; $post
        ]);
    }

Por ultimo en la vista principal donde podemos ver el listado de todos nuestros posts, cambie el html, específicamente el enlace para que en vez de pasarle el post al controlador, le pasara el slug de nuestro registro de la bd:

&lt;a href=&quot;{{ route('posts.single', ['slug' =&gt; $post-&gt;slug]) }}&quot;&gt;Read
                                more&lt;/a&gt;

Y asi estaba antes de la modificación:

 &lt;a href=&quot;{{ route('posts.single', ['post' =&gt; $post]) }}&quot;&gt;Read more&lt;/a&gt;

Espero te sirva 😀

Jose Barboza

student•

¿Cómo puedo subir múltiples de imágenes y obtener en el blog con laravel?

Edgar Ramón González Contreras

student•

Puedes crear un arreglo de imágenes, las cuales debes ir iterando para guardar dirección en la db. Yo pude guardar hasta 4 (ya que es lo que necesitaba). Si deseas, te puedo echar una mano :D

Jose Barboza

student•

lo hice creando una tabla images relacionandolo con post_id por ejemplo.

edwar enrique vilchez serrano

student•

mi repositorio https://github.com/edwarvilchez/Blog_Demo_BLMP

walter uriel marin urbano

student•

Juan Sebastian Monje Camacho

student•

Reto cumplido!

Jhonny Stiven Agudelo Tenorio

student•

@if ($post-&gt;image &amp;&amp; $post-&gt;iframe )
                        &lt;img src=&quot; {{ $post-&gt;get_image }} &quot; class=&quot;card-img-top&quot; alt=&quot;imagenes&quot;&gt;
                        &lt;div class=&quot;embed-responsive embed-responsive-16by9&quot;&gt;
                            {!! $post-&gt;iframe !!}
                        &lt;/div&gt;
                    @elseif ($post-&gt;image)
                        &lt;img src=&quot; {{ $post-&gt;get_image }} &quot; class=&quot;card-img-top&quot; alt=&quot;imagenes&quot;&gt;
                    @elseif ($post-&gt;image)
                        &lt;div class=&quot;embed-responsive embed-responsive-16by9&quot;&gt;
                            {!! $post-&gt;iframe !!}
                        &lt;/div&gt;
                    @endif

Dany Pascual Gomez Sanchez

student•

Hola, cree el proyecto y dentro de mi plan de practica intente cargarlo a mi hosting, el problema es que hasta el momento no se como dar solución al tema de las rutas de las imágenes, esto dado a que localmente funciona el tema del link de /storage/app/public/posts aputnando a /public/storage/posts pero en el server no, alguien podría orientarme por favor.

Manuel Ojeda

student•

Regularmente el código que generamos con Laravel debe de bastar y funcionar, ¿el servidor te da un error en especifico?

kjohan

student•

buenas tardes, cuando utilizo un contenedor docker con nginx no se esta creando el link storage dentro del servidor, que hago en ese caso?

Jose Angel Dominguez Dominguez

student•

Hola, me pueden apoyar con lo siguiente? si me incrusta el video pero si me voy a inspeccionar me arroja los siguientes errores Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute

Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

Luis Angel Avila Torres

student•

¿Conocen alguna librería para redimensionar o cambiar el aspect ratio a las imágenes que nos cargan en los formularios?

Por ejemplo en caso de que carguen una imagen cuadrada o alargada, cómo puedo hacer para que el usuario elija cortarla y ver como se redimensiona, algo como lo que hace Whatsapp para cambiar la foto de perfil.

Jimmy Buriticá Londoño

student•

También tengo el mismo interés.

Juan Carlos García Esquivel

student•

Puedes usar Intenvertion

DEY WILLIAMS GORDILLO SALAZAR

student•

@if ($post->image) <img src="{{ $post->get_image }}" alt="" class="card-img-top"> @endif @if ($post->iframe) <div class="embed-responsive embed-responsive-16by9"> {!! $post->iframe !!} </div> @endif

DEY WILLIAMS GORDILLO SALAZAR

student•

Kenneth Angulo L

student•

En el metodo get_image(), agrege una validacion extra, para imprimir imagenes generadas por faker desde una url segura. (claro esto es para la clase, para probar, en produccion no permitiria estas imagenes desde urls). .