1

So I'm building an app where users are filling out a form. I would like one of answers to a form question to be a gallery of images that the user can select to answer that particular question. Something like the Image Picker gem.

<select class="image-picker show-labels show-html">
    <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
    <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
    <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
    <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>

I have two problems with this potential solution.

  1. I'd like to show the name of the image on the Show and Index pages, not the integer value. Is there a way to pass the description instead of the integer in this case? I can build a model and use collection_select and then call the name method, but then how do I enter the image url into a model so it gets called and displayed properly like in the HTML above?

  2. I have something like 200 images I want to do this with. Is there an easier way to make this happen or do I need to manually enter each entry into a model from the console?

Thanks!

JohnOHFS
  • 174
  • 14

2 Answers2

1

I'd like to show the name of the image on the Show and Index pages, not the integer value

This depends on how you're loading the image, and indeed the entirety of the data in which your images will be loaded.

You already seem to know the virtues and pitfalls of using something like Paperclip or even just having a model with the data kept inside.

--

I would personally populate a model with a simple reference to the URL:

#app/models/image.rb
class Image < ActiveRecord::Base
   #columns id | name | url | description | created_at | updated_at
end

You'd be able to call the following:

f.select :image_id, options_for_select(@images.map{ |i| [i.name, i.id, {'data-img-src'=>c.url}] })

options_for_select supports custom data attributes to your options; collection_select doesn't seem to support it at present.

Beyond this, I'm not sure of the functionality you're trying to achieve.

manually enter each entry into a model from the console?

You'll probably be looking for the seeds functionality of Rails:

#db/seed.rb
images = [
 {url: "url1", name: "name", description: "kitty"},
 {url: "url2", name: "name", description: "kitty"}
 # this has to be manual unless you pull it from a CSV or something
]

images.each do |img|
   Image.find_or_create_by(url: img.url, name: img.name, description: img.description)
end

You can then fire this off using:

$ rake db:seed

This will populate your database with whatever you've put into the seed.rb file. Should save you a lot of time!

Community
  • 1
  • 1
Richard Peck
  • 76,116
  • 9
  • 93
  • 147
0

Rich's solution worked, but you also need to add this javascript to make it function:

$(document).ready(function(){ 
$("select").imagepicker({
  hide_select:  true, 
  show_label:   true,
  clicked:function(){

    console.log($(this).find("option[value='" + $(this).val() + "']").data('img-src'));

      }
    });
 });
JohnOHFS
  • 174
  • 14