images get ratios

app/helpers/merged/image_helper.rb

@@ -1,6 +1,7 @@
 module Merged
 
   module ImageHelper
+
   end
 
 end

app/helpers/merged/merged_helper.rb

@@ -14,6 +14,15 @@ module Merged
       @@renderer = Redcarpet::Markdown.new(html, options)
     end
 
+    def aspect_ratio image
+      x , y = image.aspect_ratio
+      "#{x} / #{y}"
+    end
+
+    def image_root
+      Image.image_root
+    end
+
     def markdown(text)
       text = text.text unless text.is_a?(String)
       return "" if text.blank?
@@ -40,7 +49,7 @@ module Merged
       clazz = "bg-blue-500 " #full names, no tricks for tailwind
       clazz = "bg-red-500 " if danger
       clazz += button_classes
-      content_tag(:button , class: clazz , type: :submit) do
+      content_tag(:button , class: clazz  , type: :submit) do
         text
       end
     end

app/helpers/merged/sections_helper.rb

@@ -1,7 +1,7 @@
 module Merged
   module SectionsHelper
     include ViewHelper #for previews
-    
+
     def section_form(options)
       url = section_url( @section.id)
       form_tag( url , {method: :patch}) do
@@ -9,10 +9,6 @@ module Merged
       end
     end
 
-    def image_root
-      Image.image_root
-    end
-
     #image tag for the preview, passing options through
     def section_preview(section , options)
       image_tag("merged/section_preview/#{section.template}" , options)

app/models/merged/image.rb

@@ -1,3 +1,5 @@
+require "mini_magick"
+
 module Merged
   class Image
     include ActiveModel::API
@@ -15,18 +17,27 @@ module Merged
       end
     end
 
-
-    attr_reader :name , :type , :size , :created_at , :updated_at
+    attr_reader :name , :type , :size , :created_at , :height , :width
 
     def initialize(filename)
       @name , @type = filename.split(".")
-      file = File.new(Rails.root.join(Image.asset_root,filename))
+      fullname = Rails.root.join(Image.asset_root,filename)
+      file = File.new(fullname)
+      image = MiniMagick::Image.new(fullname)
+      @width = image.width
+      @height = image.height
       @created_at = file.birthtime
-      @updated_at = file.ctime
       @size = (file.size/1024).to_i
       @@all[@name] = self
     end
 
+    def aspect_ratio
+      ratio = @width.to_f / @height
+      ratios = (1..9).collect{ |i|  ((ratio * i) - (ratio * i).round(0)).abs }
+      min , min_index = ratios.each_with_index.min
+      [(ratio *  (min_index + 1) ).to_i , (min_index + 1) ]
+    end
+
     #save an io with given name (without ending, that is taken from io)
     def self.create_new(filename , io)
       original , ending = io.original_filename.split("/").last.split(".")

app/views/merged/cards/select_image.haml

@@ -1,18 +1,17 @@
 = render "layouts/merged_header"
 
 .grid.grid-cols-6.gap-2.m-8
-  .relative.block.border.border-gray-100
-    %h3.mt-4.text-lg.font-bold Add new image or select (click)
-    = form_tag(merged.images_path, multipart: true) do
-      = text_field_tag 'filename'
-      %h5.mt-4.text-lg.font-bold Name is optional
-      %p will be taken from uploaded file
-      = hidden_field_tag :redirect , card_set_image_url(@card.id,image: "NEW")
-      = file_field_tag 'image_file'
-      = submit_button 'Submit'
+  - content_for :hidden do
+    = hidden_field_tag :redirect , card_set_image_url(@card.id,image: "NEW")
+  = form_tag(merged.images_path, multipart: true) do
+    = render "merged/images/new_image"
 
   -@images.each do |name , image|
-    .relative.block.border.border-gray-100
-      = link_to( card_set_image_path( image: name)) do
-        =image_tag("#{image_root}/#{name}" , class: "h-56 w-full object-contain lg:h-72")
-        = image.name
+    .flex.flex-col.justify-start.border.rounded.border-gray-100.drop-shadow-lg
+      .flex.justify-between
+        .text-xl.m-2= image.name
+        %strong.inline-block.rounded.bg-yellow-50.px-2.py-3.text-md.font-medium
+          = aspect_ratio(image)
+      .p-2.object-contain
+        = link_to( card_set_image_path( image: name)) do
+          =image_tag("#{image_root}/#{name}" )

app/views/merged/images/_new_image.haml

@@ -0,0 +1,7 @@
+.flex.flex-col.border.border-gray-100.rounded.p-4
+  %h3.my-4.text-xl.font-bold Add new image
+  = text_field_tag 'filename' ,nil, placeholder: "Optiona name", class: "rounded"
+  %p.my-4 Name will be taken from uploaded file
+  = yield :hidden
+  = file_field_tag 'image_file' , class: "mb-8 w-full px-2 text-xl bg-clip-padding border border-solid border-gray-300  rounded"
+  = submit_button 'Submit'

app/views/merged/images/index.haml

@@ -5,25 +5,21 @@
 = render "layouts/merged_header"
 
 .grid.grid-cols-6.gap-4.m-8
-  .relative.block.border.border-gray-100
-    %h3.mt-4.text-lg.font-bold Add new image
-    = form_tag({action: :create}, multipart: true) do
-      = text_field_tag 'filename'
-      %h5.mt-4.text-lg.font-bold Name is optional
-      %p will be taken from uploaded file
-      = file_field_tag 'image_file'
-      = submit_button 'Submit'
+  = form_tag({action: :create}, multipart: true) do
+    = render "new_image"
   -@images.each do |name , image|
-    .relative.block.border.border-gray-100
-      =image_tag("cms/#{name}" , class: "h-56 w-full object-contain lg:h-72")
-      .p-3
-      %strong.inline-block.bg-yellow-400.px-3.py-1.text-md.font-medium
-        = "#{image.size}k"
-      %strong.inline-block.bg-yellow-400.px-3.py-1.text-md.font-medium
-        = image.created_at.to_date
-      %h3.mt-4.text-lg.font-bold
-        = image.name
-        %strong.inline-block.bg-yellow-400.px-3.py-1.text-xs.font-medium
+    .flex.flex-col.border.border-gray-100.rounded
+      .flex.align-center.justify-between.mb-4
+        .text-lg.font-bold.mt-2.mx-2
+          = image.name
+        %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium
+          = aspect_ratio(image)
+      .w-full.object-contain.h-72
+        =image_tag("cms/#{name}")
+      .flex.justify-between.mb-8
+        %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
+          = "#{image.size}k"
+        %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
+          = image.created_at.to_date
+        %strong.rounded.h-10.bg-orange-50.px-5.py-2.font-medium
           =image.type
-
-        %p.mt-2.text-sm.text-gray-700

app/views/merged/sections/select_image.haml

@@ -1,17 +1,17 @@
 = render "layouts/merged_header"
 
 .grid.grid-cols-6.gap-2.m-8
-  .relative.block.border.border-gray-100
-    %h3.mt-4.text-lg.font-bold Add new image or select (click)
-    = form_tag(merged.images_path, multipart: true) do
-      = text_field_tag 'filename'
-      %h5.mt-4.text-lg.font-bold Name is optional
-      %p will be taken from uploaded file
-      = hidden_field_tag :redirect , section_set_image_url(@section.id,image: "NEW")
-      = file_field_tag 'image_file'
-      = submit_button 'Submit'
+  - content_for :hidden do
+    = hidden_field_tag :redirect , section_set_image_url(@section.id,image: "NEW")
+  = form_tag(merged.images_path, multipart: true) do
+    = render "merged/images/new_image"
+
   -@images.each do |name , image|
-    .relative.block.border.border-gray-100
-      = link_to( section_set_image_path( image: name)) do
-        =image_tag("#{image_root}/#{name}" , class: "h-56 w-full object-contain lg:h-72")
-        = image.name
+    .flex.flex-col.justify-start.border.rounded.border-gray-100.drop-shadow-lg
+      .flex.justify-between
+        .text-xl.m-2= image.name
+        %strong.inline-block.rounded.bg-yellow-50.px-2.py-3.text-md.font-medium
+          = aspect_ratio(image)
+      .p-2.object-contain
+        = link_to( section_set_image_path( image: name)) do
+          =image_tag("#{image_root}/#{name}" )