Imagenes proporcionales

common/Service/MediaLoader.php

@@ -274,6 +274,7 @@ class MediaLoader {
       ])
     ]);
 
+    $video = $this->ffmpeg->open($filename);
     $video
       ->filters()
       ->resize(new FFMpeg\Coordinate\Dimension(320, 240))

public/assets/scripts/home.js

@@ -75,7 +75,28 @@ let eventos = {
     $(".servicio[data-filter='" + filter + "']").addClass('active')
     eventos.current_tab = filter
   },
+  resizeThumbs: () => {
+    let thumbs = $('#eventos_cards .image img')
+    thumbs.each((i, el) => {
+      let src = $(el).attr('src')
+      if (src == '#') {
+        return
+      }
+      let w = el.width
+      let h = el.height
+      let parent = $(el).parent()
+      let r = w / h
+      if (r > 1) {
+        $(el).height(parent.height())
+        $(el).width(parent.height() * r)
+      } else {
+        $(el).width(parent.width())
+        $(el).height(parent.width() / r)
+      }
+    })
+  },
   setup: () => {
+    eventos.resizeThumbs()
     $('.servicio').click(function(e) {
       e.preventDefault()
       let filter = $(this).attr('data-filter')

public/assets/styles/evento.css

@@ -3,6 +3,11 @@
   padding-top: 3.5rem;
   padding-bottom: 3.5rem;
 }
-.image {
+#thumbs .image {
   width: 100% !important;
+  height: 7rem;
+  overflow: hidden;
+}
+#thumbs .image img {
+  max-width: none !important;
 }

public/assets/styles/home.css

@@ -90,10 +90,10 @@
 }
 #eventos .segment .image {
   height: 14rem;
+  width: 100%;
   overflow: hidden;
 }
 #eventos .segment .image img {
-  height: 100%;
   max-width: none !important;
 }
 #eventos .segment .header {

resources/views/admin/eventos/show.blade.php

@@ -115,6 +115,6 @@
   ]
   imagenes.url = '{{$urls->admin}}'
   imagenes.evento = '{{$evento->id}}'
-  $('#servicio').dropdown()
   imagenes.setup()
+  $('#servicio').dropdown()
 @endpush

resources/views/evento.blade.php

@@ -28,7 +28,7 @@
           <p>
             {{$evento->descripcion}}
           </p>
-          <div class="ui four column grid">
+          <div class="ui four column grid" id="thumbs">
             @if ($imagenes !== false)
               @foreach (array_values($imagenes) as $i => $imagen)
                 <div class="column">
@@ -59,6 +59,24 @@
       '{!!$media->media->html!!}',
     @endforeach
   ]
+  let thumbs = $('#thumbs .image img')
+  thumbs.each((i, el) => {
+    let src = $(el).attr('src')
+    if (src == '#') {
+      return
+    }
+    let w = el.width
+    let h = el.height
+    let parent = $(el).parent()
+    let r = w / h
+    if (r > 1) {
+      $(el).height(parent.height())
+      $(el).width(parent.height() * r)
+    } else {
+      $(el).width(parent.width())
+      $(el).height(parent.width() / r)
+    }
+  })
   $('.imagen').css('cursor', 'pointer').click(function() {
     var id = $(this).attr('data-id')
     var src = media[id]