add image tags and search by them

app/controllers/merged/images_controller.rb

@@ -7,6 +7,7 @@ module Merged
       @image_data = @images.collect{|i|
         data = i.attributes.dup
         data[:url] = view_context.asset_path(i.asset_name)
+        data[:link] = view_context.image_url(i.id)
         data[:created_at] = i.created_at.to_date
         data[:created] = i.created_at.to_i
         data[:aspect_ratio] = i.aspect_ratio.join("/")

app/models/merged/image.rb

@@ -5,7 +5,7 @@ module Merged
 
     set_root_path Rails.root
 
-    fields  :name , :type , :size , :created_at , :height , :width
+    fields  :name , :tags , :type , :size , :created_at , :height , :width
 
     def initialize(filename)
       if filename.is_a? Hash
@@ -84,10 +84,15 @@ module Merged
 
     def self.transform
       Image.all.each do |image|
-        image.name = image.name.gsub("_" , " ")
-        image.name = image.name.capitalize
+        last = image.name.split.last
+        image.tags = ""
+        ["wide", "small" , "big" , "room"].each do |tag|
+          if(last == tag)
+            image.name = image.name.gsub(last,"").strip
+            image.tags = last
+          end
+        end
         image.save
-#        image.created_at = image.created_at.to_date
       end
     end
 

app/views/merged/images/index.haml

@@ -13,6 +13,7 @@
     %label.block
       .mt-1.text-lg.font-bold Search:
     %input.border.rounded{:category => "query", placeholder:"by name", "v-model" => "search_name" }
+    %input.border.rounded{:category => "query", placeholder:"by tag", "v-model" => "search_tag" }
 
     - ["name" , "created" , "size" , "ratio"].each do |ruby_sort_key|
       .rounded{":class" => "{'border': sort_by == '#{ruby_sort_key}'}"}
@@ -33,7 +34,7 @@
           {{image.name}}
         %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium
           {{image.aspect_ratio}}
-      .w-full.object-contain.h-72
+      %a.w-full.object-contain.h-72{":href" => "image.link" }
         %img{ ":src": "image.url" , ":alt": "image.name" }
       .flex.justify-between.mb-8
         %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
@@ -41,7 +42,7 @@
         %strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
           {{image.created_at}}
         %strong.rounded.h-10.bg-orange-50.px-5.py-2.font-medium
-          {{image.type}}
+          {{image.tags}}
 
 %script{:src => "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"}
 
@@ -51,17 +52,22 @@
     def initialize
       @image_data = #{@image_data.to_json.html_safe}
       @search_name = ""
-      @sort_by = "name"
-      @sort_dir = 1 # up -1 down
+      @search_tag = ""
+      @sort_by = "created"
+      @sort_dir = -1 # 1 up
     end
     def filter_and_sort
-      puts "sorting " + @sort_by + " : " + @sort_dir
       dat = @image_data
-      if @search_name.length > 0
+      if(@search_name.length > 0)
         dat = dat.filter do |item|
           return item["name"].toLowerCase().indexOf(@search_name) > -1
         end
       end
+      if(@search_tag.length > 0)
+        dat = dat.filter do |item|
+          return (item.tags.toLowerCase().indexOf(@search_tag) > -1)
+        end
+      end
       dat = dat.slice().sort do |a, b| #a, b image data hashes
         aa = a[@sort_by]
         bb = b[@sort_by]

test/dummy/merged/images.yml

@@ -6,6 +6,7 @@
   :created_at: 2022-12-11 16:44:40.753136245 +02:00
   :size: 21
   :id: 4
+  :tags: ''
 - :name: Conferences
   :type: webp
   :width: 1740
@@ -13,6 +14,7 @@
   :created_at: 2022-12-11 16:44:40.754136236 +02:00
   :size: 125
   :id: 7
+  :tags: ''
 - :name: Coworking office
   :type: webp
   :width: 1740
@@ -20,6 +22,7 @@
   :created_at: 2022-12-11 16:44:40.755136227 +02:00
   :size: 135
   :id: 8
+  :tags: ''
 - :name: En suite studio
   :type: webp
   :width: 560
@@ -27,6 +30,7 @@
   :created_at: 2022-12-11 16:44:40.756136218 +02:00
   :size: 13
   :id: 12
+  :tags: ''
 - :name: House
   :type: jpg
   :width: 1314
@@ -34,6 +38,7 @@
   :created_at: 2022-12-11 16:44:40.759136191 +02:00
   :size: 260
   :id: 16
+  :tags: ''
 - :name: Large
   :type: webp
   :width: 1730
@@ -41,6 +46,7 @@
   :created_at: 2022-12-07 16:04:22.141547518 +02:00
   :size: 211
   :id: 17
+  :tags: ''
 - :name: Makerspace
   :type: webp
   :width: 1059
@@ -48,13 +54,15 @@
   :created_at: 2022-12-11 16:44:40.760136182 +02:00
   :size: 98
   :id: 20
-- :name: Non standard room
+  :tags: ''
+- :name: Non standard
   :type: webp
   :width: 865
   :height: 501
   :created_at: 2022-12-11 16:44:40.766136129 +02:00
   :size: 40
   :id: 25
+  :tags: room
 - :name: Residency accomodation
   :type: webp
   :width: 1740
@@ -62,6 +70,7 @@
   :created_at: 2022-12-11 16:44:40.767136120 +02:00
   :size: 129
   :id: 26
+  :tags: ''
 - :name: Retreats
   :type: jpg
   :width: 1044
@@ -69,6 +78,7 @@
   :created_at: 2022-12-11 16:44:40.767136120 +02:00
   :size: 245
   :id: 27
+  :tags: ''
 - :name: Service boutique
   :type: webp
   :width: 1000
@@ -76,6 +86,7 @@
   :created_at: 2022-12-11 16:44:40.769136102 +02:00
   :size: 137
   :id: 28
+  :tags: ''
 - :name: Service cafe
   :type: webp
   :width: 1120
@@ -83,6 +94,7 @@
   :created_at: 2022-12-11 16:44:40.769136102 +02:00
   :size: 81
   :id: 29
+  :tags: ''
 - :name: Service treatments
   :type: webp
   :width: 592
@@ -90,6 +102,7 @@
   :created_at: 2022-12-11 16:44:40.769136102 +02:00
   :size: 31
   :id: 30
+  :tags: ''
 - :name: Standard
   :type: webp
   :width: 1730
@@ -97,6 +110,7 @@
   :created_at: 2022-12-07 16:04:22.142547509 +02:00
   :size: 136
   :id: 35
+  :tags: ''
 - :name: Studio kitchen
   :type: webp
   :width: 560
@@ -104,6 +118,7 @@
   :created_at: 2022-12-11 16:44:40.771136085 +02:00
   :size: 19
   :id: 36
+  :tags: ''
 - :name: Studios
   :type: jpg
   :width: 1740
@@ -111,10 +126,12 @@
   :created_at: 2022-12-11 16:44:40.771136085 +02:00
   :size: 372
   :id: 37
-- :name: Wet space room
+  :tags: ''
+- :name: Wet space
   :type: webp
   :width: 865
   :height: 501
   :created_at: 2022-12-11 16:44:40.773136067 +02:00
   :size: 29
   :id: 40
+  :tags: room