Add dynamic image addition.

app/assets/javascripts/refinery/portfolio/admin/portfolio.js.coffee

@@ -2,19 +2,22 @@
 $ = jQuery
 
 window.portfolio =
-  append_image: (image) ->
-    image_id = $(image).attr('id').replace 'image', ''
-    new_image = $('#page_images li.image_field:first-child').clone() # Clone li
-
-    # new_item.find('input').next().val image_id # Set input image_id value = image_id
-
-    # Update thumbnail
-    new_image.find('.thumb img').attr('src', $(image).attr('data-grid'))
-    # Update id
-    new_image.attr('id', "image_#{image_id}")
-
-    # Append to list
-    new_image.appendTo '#page_images'
+  append_image: (images) ->
+    $.each images, (index, image) ->
+      image_id = $(image).attr('id').replace 'image_', ''
+      image_src = $(image).attr('data-grid')
+      new_image = $('li.image_field.blank:first').clone() # Clone li
+
+      new_image.find('.attributes input.image_id').val image_id # Set input image_id value = image_id
+
+      # Create thumbnail
+      $('<img/>', {src: image_src}).appendTo(new_image.find('.thumb'))
+
+      new_image
+        .attr('id', "image_#{image_id}") # Update id
+        .appendTo('#page_images') # Append to list
+        .removeClass('blank')
+
 
 $ ->
   page_options.init(false, '', '')
@@ -23,7 +26,7 @@ $ ->
   # Edit image association?
 
   # Remove image association
-  $('.delete_image').on 'click', -> 
+  $(document).on 'click', '#page_images li .delete_image', -> 
     if confirm("Are you sure you want to delete this image?")
       $(this).parents('li').remove()
     else

app/assets/stylesheets/refinery/portfolio/admin/galleries.css.scss.erb

@@ -12,41 +12,54 @@ a#add_image_link {
   display: inline;
 }
 
-#page_images {
-  li.image_field {
+li.image_field {
+  text-align: center;
+  position: relative;
+  margin: 5px;
+  width: <%= thumb_width %>px;
+  float: left;
+
+  .thumb {
+    height: 350px;
+    max-height: 300px;
+    img {
+      max-width: 300px;
+    }
+  }
+  .attributes {
+    display: none;
+  }
+
+  &:hover div.image_actions {
+    display: block;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    height: 1px;
+    overflow: visible;
     text-align: center;
-    position: relative;
-    margin: 5px;
-    width: <%= thumb_width %>px;
-    float: left;
-
-    &:hover div.image_actions {
-      display: block;
-      width: 100%;
+
+    div.floater {
       position: absolute;
-      top: 50%;
-      height: 1px;
-      overflow: visible;
+      left: 50%;
+      margin-left: -20px;
+      margin-top: -8px;
+      width: 50px;
       text-align: center;
+      height: 22px;
 
-      div.floater {
-        position: absolute;
-        left: 50%;
-        margin-left: -20px;
-        margin-top: -8px;
-        width: 50px;
-        text-align: center;
-        height: 22px;
-
-        img {
-          cursor: pointer;
-        }
+      img {
+        cursor: pointer;
       }
     }
+  }
 
-    div.image_actions {
-      display: none;
-    }
+  div.image_actions {
+    display: none;
+  }
+
+  &.blank {
+    display: none;
   }
 }
 

app/models/refinery/portfolio/gallery.rb

@@ -8,19 +8,55 @@ class Gallery < Refinery::Core::BaseModel
       friendly_id :title, :use => [:slugged]
       translates :title, :body
 
-      has_many    :items
+      has_many    :items, :dependent => :destroy
 
       attr_accessible   :title, :body, :lft, :rgt,
                         :position, :gallery_type, :depth,
-                        :parent_id
+                        :parent_id, :images
 
       alias_attribute :description, :body
 
       validates :title, :presence => true
 
+      after_save :bulk_update_associated_items
+
       def cover_image
         items.sort_by(&:position).first if items.present?
       end
+
+      def images
+      end
+
+      def images=(ids = [])
+        @image_ids = ids.reject(&:empty?).map(&:to_i).uniq
+      end
+
+
+      def bulk_update_associated_items
+        existing_images = ::Refinery::Portfolio::Item.select('id').where(:gallery_id => id)
+        existing_ids = existing_images.collect(&:id)
+        @image_ids.each_with_index do |image_id, position|
+          # If image_id is in existing_ids, don't add a new one, but update its position.
+          if existing_ids.include? image_id
+            existing_images.find{|i| i.id == image_id }.update_attribute(:position, position)
+          # If image_id is not in existing_ids, create a new one
+          else
+            ::Refinery::Portfolio::Item.create({
+              :title => "#{title} #{position}",
+              :position => position,
+              :gallery_id => id,
+              :image_id => image_id
+            })
+          end
+        end
+        # Once done, compare ids to existing_ids. For any missing entries in ids, delete it.
+        # [1 2 3 4 5] = [ 1 2 4 5 6] = [3]
+        removed_ids = existing_ids - @image_ids
+        removed_ids.each do |trashed_id|
+          ::Refinery::Portfolio::Item.delete(trashed_id)
+        end
+
+      end
     end
   end
 end

app/models/refinery/portfolio/item.rb

@@ -8,7 +8,7 @@ class Item < ActiveRecord::Base
       validates :gallery_id, :numericality => {:allow_nil => true}
       validates :image_id, :presence => true, :numericality => true
 
-      belongs_to :image, :class_name => 'Refinery::Image'
+      belongs_to :image, :class_name => 'Refinery::Image', :dependent => :destroy
       belongs_to :gallery, :class_name => 'Refinery::Portfolio::Gallery'
 
       class << self

app/views/refinery/portfolio/admin/galleries/_form.html.erb

@@ -33,7 +33,7 @@
           </div>
         <% end %>
         <div class='page_part' id='images'>
-          <%= render :partial => 'images', :locals => {:f => f} %>
+          <%= render :partial => 'image_fields', :locals => {:f => f} %>
         </div>
       </div>
     </div>

app/views/refinery/portfolio/admin/galleries/_image.html.erb

@@ -1,15 +1,15 @@
-<div class='wym_box field item_group'>
-  <ul id='page_images' class='clearfix'>
-    <% f.object.items.order("position").each_with_index do |item, i| %>
-      <li id='<%= dom_id(item) %>' class='image_field'>
-        <div class='thumb'><%= image_fu item.image, ::Refinery::Portfolio.cover_image_thumb_size %></div>
-        <div class='image_actions'>
-          <div class='floater'>
-            <%= image_tag('refinery/icons/edit.png', {:width => 22, :height => 22, :class => 'edit_image', :alt => 'edit', :'data-item-id' => item.id }) %>
-            <%= image_tag('refinery/icons/delete.png', {:width => 22, :height => 22, :class => 'delete_image', :alt => 'delete', :'data-item-id' => item.id }) %>
-          </div>
-        </div>
-      </li>
-    <% end %>
-  </ul>
-</div>
+<% css_classes = ['image_field'] %>
+<% css_classes << 'blank' if image.new_record? %>
+
+<li id='<%= "image_#{image.id || 'new'}" %>' class='<%= css_classes.join(' ') %>'>
+  <div class='thumb'><% unless image.new_record? %><%= image_tag image.url %><% end %></div>
+  <div class='image_actions'>
+    <div class='floater'>
+      <%#= image_tag('refinery/icons/edit.png', {:width => 22, :height => 22, :class => 'edit_image', :alt => 'edit'}) %>
+      <%= image_tag('refinery/icons/delete.png', {:width => 22, :height => 22, :class => 'delete_image', :alt => 'delete' }) %>
+    </div>
+  </div>
+  <div class='attributes'>
+    <%= f.hidden_field :images, :name => "gallery[images][]", :id => nil, :class => 'image_id', :value => image.id %>
+  </div>
+</li>

app/views/refinery/portfolio/admin/galleries/_image_fields.html.erb

@@ -0,0 +1,14 @@
+<div class='wym_skin_refinery' id='images_picker'>
+  <%= render :partial => "images", :locals => {:f => f} %>
+
+  <span class='clearfix label_inline_with_link'>
+    <%= link_to t('.add_new_image'), refinery.insert_admin_images_url({
+                  :dialog => true,
+                  :width => 950,
+                  :height => 510,
+                  :callback => "portfolio.append_image",
+                  :multiple => true
+        }),
+        :id => "add_image_link" %>
+  </span>
+</div>

app/views/refinery/portfolio/admin/galleries/_images.html.erb

@@ -1,13 +1,11 @@
-<div class='wym_skin_refinery' id='images_picker'>
-  <%= render :partial => "image", :locals => {:f => f} %>
+<div class='wym_box field item_group'>
+  <ul id='page_images' class='clearfix'>
+    <% f.object.items.order("position").each_with_index do |item, i| %>
+      <%= render :partial => 'image', :locals => {:f => f, :image => item.image} %>
+    <% end %>
+
+  </ul>
+
+  <%= render :partial => 'image', :locals => {:f => f, :image => ::Refinery::Image.new } %> 
 
-  <span class='clearfix label_inline_with_link'>
-    <%= link_to t('.add_new_image'), refinery.insert_admin_images_url({
-                  :dialog => true,
-                  :width => 950,
-                  :height => 510,
-                  :callback => "portfolio.append_image"
-        }),
-        :id => "add_image_link" %>
-  </span>
 </div>

config/locales/en.yml

@@ -48,7 +48,7 @@ en:
             cover_image: Cover Image
             cover_image_help: The image that is used as the cover of this gallery.
             images: Images
-          items:
+          image_fields:
             add_new_image: Add an image
       galleries:
         show: