feat: mostrar los posts relacionados como tarjetas

(cherry picked from commit ba9c0ad953)

app/views/bootstrap/_card.haml

@@ -0,0 +1,9 @@
+.card{ **local_assigns.except(:image, :description) }
+  - if local_assigns[:image]
+    = render 'bootstrap/responsive' do
+      = image_tag url_for(local_assigns[:image]), alt: local_assigns[:description], class: 'img-fluid'
+
+  .card-body
+    .card-title= title
+
+    = yield

app/views/bootstrap/_responsive.haml

@@ -0,0 +1,4 @@
+- local_assigns[:ratio] ||= '1by1'
+
+.embed-responsive{ class: "embed-responsive-#{local_assigns[:ratio]}" }
+  .embed-responsive-item= yield

app/views/posts/_new_related_post.haml

@@ -1,2 +1,14 @@
-.col
+:ruby
-  %p= link_to post.title, post.path
+  image = nil
+  description = nil
+
+  if post.post.attribute?(:image) && (image = post.post.image.static_file)
+    description = post.post.image.value['description']
+  end
+
+.col.mb-3
+  = render('bootstrap/card', image: image, description: description, title: post.title, class: 'h-100') do
+    - if post.post.attribute?(:description)
+      %p.card-text= post.post.description.value
+
+    = link_to 'Editar', post.path, class: 'btn btn-secondary'

app/views/posts/attributes/_new_has_many.haml

@@ -33,7 +33,7 @@
 
       Para poder cancelar, mantenemos el estado original y desactivamos
       o activamos los ítemes según estén incluidos en esa lista o no.
-    .row.row-cols-1.row-cols-md-2{ data: { target: 'array.current' } }
+    .row.row-cols-3.row-cols-md-4{ data: { target: 'array.current' } }
       - metadata.values.slice(*metadata.value).each do |value|
         = render 'posts/new_array_value', value: value