Tony Serkis

<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {'data-turbo' => "false"}) do |f| %>

You don't have to change the link_to. In devise.rb you change

config.sign_out_via = :delete

to

config.sign_out_via = :get

then in your link_to

<%= link_to destroy_user_session_path, method: :delete %>

I had to just disable turbo on the Devise forms as well. I was getting errors and the time spent on figuring those out was too much.

Thanks for another great video. It's no wonder why I sometimes feel lost in the Rails ecosystem. I learned Rails using the asset pipeline, then it switched to using Webpacker which I never fully understood. Now it changes again, this time using these new tools. I thinks this is for the better though and it seems more "Rails", which attracted me to the framework in the first place.

I second that Chris' answer should suffice. To answer Stephane, I usually have my model with a second column with the source, like YouTube or Vimeo. I create some logic that I can reuse on the view end where it reads which video source to use, then includes the appropriate code to load the video.

I was wondering, and this may have been covered previously, but I'll ask anyway. What are the must know things a rails dev should be familiar with, new techniques, etc. Sites like this are fantastic but with so much content, it's hard to know what to take in my limited time and how to build my "learning" list. Any thoughts would be greatly appreciated.

Look up jQuery sortable and make sure you have it installed. I do NOT use webpack. It's too complicated IMO for simple things.

Make sure you have jQuery sortable enabled / installed in your code.

Check it out again Scott.

Took me a minute to figure out the syntax of the code block.

<% if product.persisted? %>
      <% if product.images.present? %>
        <div class="row mb-3">
          <div class="col-md-12">
            <div class="sort-me mt-3" data-url="<%= sort_attachments_admin_products_path %>">
              <% product.images.order(:position).each do |attachment| %>
                <div id="<%= dom_id(attachment) %>" class="ui-state-default image-box float-left">
                  <%= image_tag attachment.variant(combine_options: {auto_orient: true, thumbnail: '150x150^', gravity: 'center', extent: '150x150' }), class: "image-fluid img-thumbnail" %>
                  <%= link_to delete_image_admin_products_path(product.id, attachment.id), method: :delete, class: "btn btn-xs btn-danger text-white", data: {confirm: "Are you sure?"} do %>
                    <i class="czi-trash"></i>
                  <% end %>
                </div>
              <% end %>
            </div>
          </div>
        </div>
      <% end %>
    <% end %>

If I'm understanding you correctly, I added the images at the bottom of my form edit in my admin. The path is referenced right in the loop of Product images.

I created a separate JS file called sorting.js and added in the jQuery code there.

I do not have any references to acts_as_list in any model. Works without it.

To sort you have to have the position field added via the migration. Haha. It would help if I added the controller method.

def sort_attachments
params[:attachment].each_with_index do |id, index|
ActiveStorage::Attachment.where(id: id).update_all(position: index + 1)
end

head :ok
end

def delete_image
ActiveStorage::Attachment.where(id: params[:image_id])[0].purge
redirect_to edit_admin_product_path(params[:id]), notice: 'Image was successfully deleted.'
end

Also, make sure you PERMIT images: [] in your params. In this case I added to product_params in the controller.

In my sample Product model, you need to add this: has_many_attached :images

It took me a MONTH to figure this out. Sizing images, storage at AWS, sorting, etc. There was zero documentation. I'm pretty sure I was the first person to figure it out but it was only for me and my projects. I use this all the time in every project now. How far have you progressed?

Here's my really quick directions. Hope this helps.

Make sure you have jQuery installed.

You first have to get Active Storage installed.

rails active_storage:install
rails db:migrate

Add this for image processing and to use AWS.

gem 'image_processing', '~> 1.2'
gem 'aws-sdk-s3'

You need to add the position field to the model.

Here is the migration:

add_column :active_storage_attachments, :position, :integer
rails db:migrate

Add Acts as List gem.

gem 'acts_as_list'

Make sure you run: bundle install

I use this code to update the position of the images.

jQuery(document).ready(function($) {

$(".sort-me").sortable({
update: function(e, ui){
ui.placeholder.height(ui.item.height());
$.ajax({
url: $(this).data("url"),
type: "PATCH",
data: $(this).sortable('serialize')
});
}
})

});

These are my routes to sort and delete images. Example is a Product model.

resources :products, only: [:sort_attachments, :delete_image] do
collection do
patch '/sort/:id', action: :sort_attachments, as: 'sort_attachments'
delete '/:id/images/:image_id', action: 'delete_image', as: 'delete_image'
end
end

Lastly, the view. This is where Acts as List comes in. The code loops through the images for this Product and orders them by the Active Storage position field you added.

<% if product.persisted? %>
<% if product.images.present? %>

You'll probably have to add some CSS to make everything look nice. You can see the classes I used on the images.

I never had anyone help me (self-taught dev, still learning) and had to figure this out on my own. I'm glad to help as I wish I had someone to point me in the right direction a few year back.

Let me know how you make out.

Sorry to everyone else on this thread who I didn't reply to. This is the first notification I received since I posted this way back.

Sorry everyone. I didn't see your replies. IF you're still interested I can probably put something together.

I figured out how to do it. Thanks anyway.

I'm experimenting with Active Storage to manage images. I got the multiple uploads working, but I want to use acts_as_list position with jQuery sortable to manage their order using ajax, like in the video on this site. In a normal model, I would run a migration to add position to the model. But it looks like I have no access to the Blob or Attachement models. How would I tackle this? Or do I have to go back to using Carrierwave? Any help would be appreciated.