images get ratios

Gemfile.lock

@@ -5,6 +5,7 @@ PATH
       active_hash
       git
       haml-rails
+      mini_magick
       rails (>= 7.0.4)
       redcarpet
 
@@ -142,6 +143,7 @@ GEM
     marcel (1.0.2)
     matrix (0.4.2)
     method_source (1.0.0)
+    mini_magick (4.12.0)
     mini_mime (1.1.2)
     minitest (5.16.3)
     nenv (0.3.0)

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

@@ -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}" )

merged.gemspec

@@ -23,4 +23,5 @@ Gem::Specification.new do |spec|
   spec.add_dependency "git"
   spec.add_dependency "redcarpet"
   spec.add_dependency "active_hash"
+  spec.add_dependency "mini_magick"
 end

spec/models/merged/image_spec.rb

@@ -4,14 +4,22 @@ module Merged
   RSpec.describe Image, type: :model do
     let(:first) {Image.all.values.first}
 
-    it "has Pages.all" do
+    it "has Image.all" do
       expect(Image.all.class).to be Hash
     end
     it "has image" do
       expect(first.class).to be Image
     end
-    it "image has name" do
+    it "has name" do
       expect(first.name).to eq "3dprinter_wide"
     end
+    it "has height and width" do
+      expect(first.height).to eq 457
+      expect(first.width).to eq 1279
+    end
+    it "has height and width" do
+      expect(first.aspect_ratio).to eq [13,5]
+    end
+
   end
 end