Contenido del curso
Integración de Imágenes y Contenido Multimedia en Proyectos Web
¿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; ?>
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>
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:
Verificación Enlinea:
¿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
Estudiante
Juan Carlos García Esquivel
Estudiante
Germán Alejandro Niño
Estudiante
Carlos Eduardo Gomez García
Profesor
Gabriel Rodriguez
Estudiante
Pedro Renatto Neciosup Liza
Estudiante
Italo Morales Fantone
Profesor
Pablo Emilio Escobar Ossa
Estudiante
José Reinaldo Duque Serna
Estudiante
Jorge Trad
Estudiante
Gustavo Jara
Estudiante
Willans Romero
Estudiante
Alexander Daniel Linares Ríos
Estudiante
Axel David Espinosa Meneses
Estudiante
Jose Barboza
Estudiante
Edgar Ramón González Contreras
EstudianteJose Barboza
Estudiante
Edwar Enrique Vilchez Serrano
Estudiantewalter uriel marin urbano
Estudiante
Juan Sebastian Monje Camacho
Estudiante
Jhonny Stiven Agudelo Tenorio
Estudiante
EDWIN DANIEL VALENCIA MARTÍNEZ
EstudianteEDWIN DANIEL VALENCIA MARTÍNEZ
Estudiante
Dany Pascual Gomez Sanchez
Estudiante
Manuel Ojeda
Estudiantekjohan
Estudiante
Jose Angel Dominguez Dominguez
Estudiante
Luis Angel Avila Torres
EstudianteJimmy Buriticá Londoño
EstudianteJuan Carlos García Esquivel
Estudiante
DEY WILLIAMS GORDILLO SALAZAR
EstudiantePara 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');
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'; }
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.
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
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.
Una mejor opcion de obtener la URL de la imagen: \Storage::disk("public")->url($this->image);
:) es válido
Hola, Les quiero compartir mi proyecto.
La sección administrativa de los articulos.
La vista principal de los articulos
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?
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?
Use este codigo en la view "post" para la image y el embedded code
<div class="card-body"> @if($post->image) <img src="{{ $post->get_image }}" class="card-img-top mb-4"> @endif <h5 class="card-title">{{ $post->title }}</h5> <p class="card-text"> {{ $post->body }} </p> <p class="text-muted mb-4"> <em> – {{ $post->user->name }} </em> {{ $post->created_at->format('d M Y') }} </p> @if($post->iframe) <div class="embed-responsive embed-responsive-16by9"> {!! $post->iframe !!} </div> @endif </div>
¿Cómo hago para que en la url en ves de pasar el id, pueda usar el slug del post?
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?
Hola bro Lo que yo hice fue modificar la ruta
Route::get('blog/{post}', 'PageController@post')->name('posts.single');
Y la cambie para que el parametro que recibiera fuera el slug
Route::get('blog/{slug}', 'PageController@post')->name('posts.single');
Ahora el controlador PageController en su metodo post hice una modificación:
public function post($slug) { $post = Post::where('slug', $slug)->get()->first(); return view('post', [ 'post' => $post ]); }
El método anterior era así:
public function post(Post $post) { return view('post', [ 'post' => $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:
<a href="{{ route('posts.single', ['slug' => $post->slug]) }}">Read more</a>
Y asi estaba antes de la modificación:
<a href="{{ route('posts.single', ['post' => $post]) }}">Read more</a>
Espero te sirva 😀
¿Cómo puedo subir múltiples de imágenes y obtener en el blog con laravel?
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
lo hice creando una tabla images relacionandolo con post_id por ejemplo.
mi repositorio https://github.com/edwarvilchez/Blog_Demo_BLMP
Reto cumplido!
@if ($post->image && $post->iframe ) <img src=" {{ $post->get_image }} " class="card-img-top" alt="imagenes"> <div class="embed-responsive embed-responsive-16by9"> {!! $post->iframe !!} </div> @elseif ($post->image) <img src=" {{ $post->get_image }} " class="card-img-top" alt="imagenes"> @elseif ($post->image) <div class="embed-responsive embed-responsive-16by9"> {!! $post->iframe !!} </div> @endif
Hi!, I have is solution:
{!! $post->image ? "<img src='{$post->get_image}' class='card-img-top mb-4 rounded-lg' alt='{$post->title}'>" : ($post->iframe ? "<div class='embed-responsive embed-responsive-16by9 mb-4 rounded-lg'>{$post->iframe}</div>" : '')!!}
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.
Regularmente el código que generamos con Laravel debe de bastar y funcionar, ¿el servidor te da un error en especifico?
buenas tardes, cuando utilizo un contenedor docker con nginx no se esta creando el link storage dentro del servidor, que hago en ese caso?
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
¿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.
También tengo el mismo interés.
Puedes usar Intenvertion
@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
