new section with two third image. margin option

app/helpers/merged/options_helper.rb

@@ -11,12 +11,13 @@ module Merged
       all
     end
 
-    def order_option(section)
-      return {} unless section.has_option?("order")
-      option = section.option('order')
-      puts "Order #{option}"
-      return {} if option == "left"
-      {class: "order-last"}
+    def order_option(section , clazz = "")
+      if section.has_option?("order")
+        option = section.option('order')
+        puts "Order #{option}"
+        clazz += " order-last" if option == "right"
+      end
+      {class: clazz}
     end
 
     def align_option(section)
@@ -36,6 +37,13 @@ module Merged
       {class: background}
     end
 
+    def margin_option(section)
+      return {} unless section.has_option?("margin")
+      option = section.option('margin')
+      puts "Margin #{option}"
+      {class: margin_for(option)}
+    end
+
     def color_option(section)
       return {} unless section.has_option?("color")
       option = section.option('color')
@@ -71,7 +79,7 @@ module Merged
       { "white" =>  "bg-white" ,
         "none" =>  "" ,
         "light_blue" => "bg-cyan-100" ,
-        "light_grey" => "bg-grey-100" ,
+        "light_gray" => "bg-gray-100" ,
         "light_orange" => "bg-orange-50" ,
         "solid_blue" => "bg-cyan-700" ,
         "solid_red" => "bg-orange-800" ,
@@ -81,6 +89,13 @@ module Merged
         "solid_black" => "bg-slate-900" ,
       }[option] || ""
     end
+    # need full margin names for tailwind to pick it up
+    def margin_for( option )
+      { "0" =>  "m-0" ,
+        "none" =>  "" ,
+        "20" => "m-20" ,
+      }[option] || ""
+    end
     # need full color names for tailwind to pick it up
     def color_for( option )
       { "white" => "text-white",

app/helpers/merged/view_helper.rb

@@ -7,16 +7,17 @@ module Merged
     end
 
     # background image as inline style
-    def bg(section)
-      return {class: ""} if section.image.blank?
+    def bg(section , clazz = "")
+      attributes = {class: clazz}
+      return attributes if section.image.blank?
       #puts "--#{Image.image_root}/#{section.image}--"
       img = asset_url( "#{Image.image_root}/#{section.image}" )
-      style = {"style" => "background-image: url('#{img}');" }
+      attributes["style"] = "background-image: url('#{img}');"
       if(section.option("fixed") == "on")
-        style[:class] = "bg-fixed"
+        attributes[:class] = attributes[:class] + " bg-fixed"
         puts "Adding fixed"
       end
-      style
+      attributes
     end
 
     # works for with sections and cards that respond to .image