last story and last picture section style

app/helpers/members_helper.rb

@@ -1,6 +1,6 @@
 module MembersHelper
 
-  def image_for(someone , classes = "")
+  def picture_for(someone , classes = "")
     if someone.picture.blank?
       image = asset_url("no_image.png")
     else

app/views/members/index.html.haml

@@ -5,7 +5,7 @@
     .overflow-hidden.border.border-gray-100.shadow-sm
       .h-0.overflow-hidden.relative{class: "pt-[125%]"}
         =link_to member , class: "absolute h-60 top-0 left-0 w-full h-full" do
-          = image_for( member ,  class: "object-cover")
+          = picture_for( member ,  class: "object-cover")
       %h3.pt-5.text-2xl.bg-gray-100.text-black.font-bold.text-center
         = member.name
       .p-2.text-xs.bg-gray-50.text-black.font-bold.text-center

app/views/merged/view/_section_pictures.haml

@@ -0,0 +1,3 @@
+.mx-20.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.2xl:grid-cols-4.gap-8.md:gap-12.lg:gap-16
+  - Picture.all.limit(4).each do |picture|
+    = render "pictures/picture" , picture: picture

app/views/merged/view/_section_story.haml

@@ -0,0 +1,2 @@
+-  story = Story.last
+= render_story story

app/views/pictures/_picture.haml

@@ -1,11 +1,11 @@
 .group.relative.overflow-hidden
   .flex.justify-between
-    .ml-2= link_to picture.member.name , member_path(picture.member) , class: :underline
+    .ml-2= link_to picture.member.name , main_app.member_path(picture.member) , class: :underline
     .mr-2
       = distance_of_time_in_words_to_now picture.happened
       ago
   .h-0.overflow-hidden.relative{class: "pt-[75%]"}
-    = image_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
+    = picture_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
   -unless picture.text.blank?
     .absolute.bottom-0.left-0.right-0.px-4.pb-1.bg-gray-800.opacity-70.transition-colors.group-hover:bg-black.group-hover:opacity-100
       .text-center.mt-2.text-white= picture.text

app/views/stories/_half.haml

@@ -1,6 +1,6 @@
 %section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2
   %div
-    = image_for( story , "h-56 w-full object-cover sm:h-full")
+    = picture_for( story , "h-56 w-full object-cover sm:h-full")
   .p-8.md:p-12.lg:px-16.lg:py-24
     .mx-auto.max-w-xl.text-center
       %h2.text-2xl.font-bold.md:text-4xl

app/views/stories/_pic.haml

@@ -1,6 +1,6 @@
 %section.flex.justify-center.p-8.flex-col.md:flex-row.m-20
   .flex.items-center.h-40.md:h-60.lg:h-96.w-full.overflow-hidden{class: "lg:w-2/3"}
-    = image_for(story ,"object-cover")
+    = picture_for(story ,"object-cover")
   .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}
     .flex-1
       .text-center

app/views/stories/_text.haml

@@ -7,5 +7,5 @@
         = distance_of_time_in_words_to_now story.happened
         ago
   .max-w-full.mt-4.gap-16.columns-1.md:columns-2.lg:columns-3.xl:columns-4{ prose_classes  }
-    = image_for( story , "h-56 w-full object-cover sm:h-full")
+    = picture_for( story , "h-56 w-full object-cover sm:h-full")
     = markdown(story.text)

merged/section_styles.yml

@@ -1 +1,23 @@
---- []
+---
+- template: section_story
+  header: Showing latest story
+  text: Always the latest available story
+  fields:
+    - header
+    - text
+  options:
+    - background
+    - text_color
+    - text_align
+    - item_align
+- template: section_pictures
+  header: Showing latest four pictures
+  text: Always the latest available pictures
+  fields:
+    - header
+    - text
+  options:
+    - background
+    - text_color
+    - text_align
+    - item_align

merged/sections.yml

@@ -33,7 +33,7 @@
   :options:
     background: light_orange
     text_color: solid_blue
-    margin: 'none'
+    margin: none
     subheader: ''
     button_link: ''
     button_text: ''
@@ -93,7 +93,7 @@
   :id: 46
   :options:
     subheader: ''
-    margin: 'large'
+    margin: large
     order: left
     text_color: solid_black
     background: none
@@ -114,7 +114,7 @@
   :options:
     background: white
     text_color: none
-    margin: 'none'
+    margin: none
     subheader: ''
     text_align: center
     item_align: center
@@ -151,7 +151,7 @@
   :id: 53
   :options:
     subheader: ''
-    margin: 'none'
+    margin: none
     order: left
     text_color: none
     background: none
@@ -210,7 +210,7 @@
     columns: '4'
     background: white
     color: none
-    margin: 'none'
+    margin: none
     subheader: ''
     button_link: ''
     button_text: ''
@@ -356,7 +356,7 @@
   :options:
     background: white
     text_color: none
-    margin: 'none'
+    margin: none
     subheader: ''
     text_align: left
     item_align: center
@@ -529,16 +529,23 @@
   :image_id: 139
   :header: Winter Wonderland
   :text: ''
-- :template: section_full_up
+- :template: section_story
   :index: 2
   :page_id: 6
-  :updated_at: 2023-01-26 10:00:11.813208761 +02:00
+  :updated_at: 2023-01-28 15:05:55.208568115 +02:00
   :updated_by: torsten@villataika.fi
   :id: 78
   :card_template: ''
   :options: {}
-  :header: Volunteers
-  :text: "Hub Feenix welcomes volunteers and usually hosts between five to ten. See
-    more in the [Volunteering](/volunteering) section.\r\n\r\nThis has information,
-    but is also a platform for volunteers to share some of their experiences, in form
-    of short [stories](/stories) and [pictures](/pictures)"
+  :header: Latest Story
+  :text: ''
+- :template: section_pictures
+  :index: 3
+  :page_id: 6
+  :updated_at: 2023-01-28 15:05:45.843146663 +02:00
+  :updated_by: torsten@villataika.fi
+  :id: 79
+  :card_template: ''
+  :options: {}
+  :header: Latest Pictures
+  :text: ''