Display first of several images in the grid

[iainbeeston]

I have a resource that has a :files field, where the user can upload many (image) files. I would also like to display the resource in a grid, with the first image as the grid cover. However, I can't figure out how to do that.

My resource looks like this:

class FooResource < Avo::BaseResource
  self.title = :name
  self.default_view_type = :grid

  field :name, as: :text
  field :images, as: :files, is_image: true

  grid do
    cover :images, as: :file, link_to_resource: true do |foo|
      foo.images.first # this doesn't work and leads to a `undefined method `attached?' for #<ActiveStorage::Attachment ` error
    end
    title :name, as: :text
  end
end

Is there an easy way to pick just one of the files for a cover image?

[adrianthedev]

I managed to get it working. You need to make a few changes:

1. Change the field type to external_image
2. Change the computed property to the following main_app.url_for(model.images.first). We call url_for with the image, and we need to call it on the main_app because we're executing it inside a Rails engine.

  grid do
    cover :cover_photo, as: :external_image, is_image: true, link_to_resource: true do |model|
      if model.images.first.present?
        main_app.url_for(model.images.first)
      else
        ""
      end
    end
    # title
    # #body
  end

Please let me know if that fixed it 🤙

[iainbeeston]

Great, that worked for me, thanks. It would be good if there was a a more obvious way to do this with the “files” field type though