first gallery version

app/controllers/pictures_controller.rb

@@ -0,0 +1,55 @@
+class PicturesController < ApplicationController
+  before_action :set_picture, only: %i[ show edit update destroy ]
+
+  def index
+    @q = Picture.ransack(params[:q])
+    @q.sorts = 'created_at desc' if @q.sorts.empty?
+    @pictures = @q.result(distinct: true).page( params[:page])
+  end
+
+  def show
+  end
+
+  def new
+    @picture = Picture.new
+  end
+
+  def edit
+    authorize @picture
+  end
+
+  def create
+    @picture = Picture.new(picture_params)
+    @picture.member = current_member
+
+    if @picture.save
+      redirect_to @picture, notice: "Picture was successfully created."
+    else
+      render :new, status: :unprocessable_entity
+    end
+  end
+
+  def update
+    authorize @picture
+    if @picture.update(picture_params)
+      redirect_to @picture, notice: "Picture was successfully updated."
+    else
+      render :edit, status: :unprocessable_entity
+    end
+  end
+
+  def destroy
+    authorize @picture
+    @picture.destroy
+    redirect_to pictures_url, notice: "Picture was successfully destroyed."
+  end
+
+  private
+    def set_picture
+      @picture = Picture.find(params[:id])
+    end
+
+    def picture_params
+      params.require(:picture).permit(:picture,:picture_cache ,:text, :member_id)
+    end
+end

app/controllers/stories_controller.rb

@@ -45,13 +45,11 @@ class StoriesController < ApplicationController
   end
 
   private
-    # Use callbacks to share common setup or constraints between actions.
     def set_story
       @story = Story.find(params[:id])
     end
 
-    # Only allow a list of trusted parameters through.
     def story_params
-      params.require(:story).permit(:picture, :header, :text, :happened)
+      params.require(:story).permit(:picture,:picture_cache, :header, :text, :happened)
     end
 end

app/helpers/members_helper.rb

@@ -6,7 +6,12 @@ module MembersHelper
     else
       image = someone.picture.url
     end
-    image_tag(image , alt: someone.name , class: classes )
+    if someone.respond_to? :name
+      alt = someone.name
+    else
+      alt = ""
+    end
+    image_tag(image , alt: alt , class: classes )
   end
 
   def stayed(member)

app/helpers/pictures_helper.rb

@@ -0,0 +1,2 @@
+module PicturesHelper
+end

app/models/member.rb

@@ -6,7 +6,9 @@ class Member < ApplicationRecord
 
   mount_uploader :picture, PictureUploader
   has_many :stories
-
+  has_many :stories
+  has_many :pictures
+  
   validates :bio, length: { maximum: 1000 }
   validates :name , length: { minimum: 3 }
 

app/models/picture.rb

@@ -0,0 +1,9 @@
+class Picture < ApplicationRecord
+  belongs_to :member
+
+  mount_uploader :picture, PictureUploader
+
+  validates :text, length: { maximum: 80 }
+
+
+end

app/policies/picture_policy.rb

@@ -0,0 +1,3 @@
+class PicturePolicy < EditOwnPolicy
+
+end

app/policies/story_policy.rb

@@ -1,9 +1,3 @@
 class StoryPolicy < EditOwnPolicy
 
-  def edit?
-    (member == record.member) or member.admin?
-  end
-  alias :update? :edit?
-  alias :destroy? :edit?
-
 end

app/views/pictures/_form.haml

@@ -0,0 +1,18 @@
+%div
+  Pictures may have a small text, that will be diplayed on top of the
+  picure.
+  = simple_form_for @picture do |f|
+    = f.error_notification
+    .flex.h-16.mt-2
+      = image_tag(@picture.picture_url , class: "align-middle mr-2") if @picture.picture?
+      = f.input :picture , as: :file , input_html: {wrapper_class: "w-full"},
+      label: (@picture.picture.blank? ? "Add picture" : "Change picture")
+      = f.hidden_field :picture_cache
+    = f.input :text , as: :text , input_html: { rows: 2 }
+    = f.input :happened , wrapper_class: "flex mt-4 align-center"
+    .flex.justify-between.mt-6
+      %button.bg-cyan-200.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+        = f.submit 'Save'
+      = link_to member_path(current_member) do
+        %button.ml-20.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+          Back

app/views/pictures/_picture.haml

@@ -0,0 +1,11 @@
+.group.h-96.items-end.relative.overflow-hidden
+  = image_for( picture , "inset-0 h-full w-full object-fit hover:scale-110 ease-in duration-700")
+  -unless picture.text.blank?
+    .absolute.mb-10.p-2.tracking-widest.text-left.text-black{class: "max-w-2/3"}
+      %div.transition-colors.group-hover:bg-black.group-hover:text-white.text-left.bg-gray-100
+        .m-1.p-1.text-xs
+          = picture.text
+          = picture.text
+  %div.bg-cyan-200
+    %div Torsten
+    %div some date

app/views/pictures/edit.html.haml

@@ -0,0 +1,7 @@
+%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
+%script{:src => "https://cdn.jsdelivr.net/npm/marked/marked.min.js"}
+.flex.justify-center
+  .column{class: "w-10/12 md:w-8/12 lg:w-7/12 xl:w-6/12"}
+    .text-2xl.font-bold.my-4
+      Edit Picture
+    = render 'form'

app/views/pictures/index.html.haml

@@ -0,0 +1,17 @@
+= paginate @pictures
+
+.flex.justify-end
+  = sort_link(@q, :happened ,class: 'flex flex-nowrap text-md')
+  .border-r-4.mx-4
+  = sort_link(@q, :created_at , class: 'flex flex-nowrap text-md')
+
+.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-8.md:gap-12.lg:gap-16
+  - @pictures.each do |picture|
+    = render picture , picture: picture
+
+%br
+
+.flex.ml-20
+  = link_to new_picture_path do
+    %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+      New Picture

app/views/pictures/new.html.haml

@@ -0,0 +1,7 @@
+%script{:src => "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"}
+%script{:src => "https://cdn.jsdelivr.net/npm/marked/marked.min.js"}
+.flex.justify-center
+  .column{class: "w-10/12 md:w-8/12 lg:w-7/12 xl:w-6/12"}
+    .text-2xl.font-bold.my-4
+      New Picture
+    = render 'form'

app/views/pictures/show.html.haml

@@ -0,0 +1,11 @@
+.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-8.md:gap-12.lg:gap-16
+  %div
+  = render @picture , picture: @picture
+
+.mx-20.flex.justify-between
+  = link_to edit_picture_path(@picture) do
+    %button.mt-6.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+      Edit
+  = link_to pictures_path do
+    %button.mt-6.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+      Back