Adding generation of custom 'class'-tags in div and img

image-picker/example.css

@@ -0,0 +1,18 @@
+/* Assuming you added a tag 'data-img-class="custom-class"' to the <option> elements, */
+/* a) change the <div> appearence: */
+ul.thumbnails.image_picker_selector li .thumbnail.custom-class {
+    height: 120px;
+}
+ul.thumbnails.image_picker_selector li .thumbnail.custom-class.selected {
+    background: green;
+}
+/* b) change the <img> appearence: */
+ul.thumbnails.image_picker_selector li .thumbnail img.custom-class {
+    width: 75px;
+}
+/* c) change the <p> appearence: */
+ul.thumbnails.image_picker_selector li .thumbnail img.custom-class + p {
+    font-size: 75%;
+    width: 75px;
+    line-height: initial;
+}

image-picker/image-picker.css

@@ -1,29 +1,36 @@
 ul.thumbnails.image_picker_selector {
-  overflow: auto;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  padding: 0px;
-  margin: 0px; }
-  ul.thumbnails.image_picker_selector ul {
     overflow: auto;
     list-style-image: none;
     list-style-position: outside;
     list-style-type: none;
     padding: 0px;
-    margin: 0px; }
-  ul.thumbnails.image_picker_selector li.group_title {
-    float: none; }
-  ul.thumbnails.image_picker_selector li {
+    margin: 0px;
+}
+ul.thumbnails.image_picker_selector ul {
+    overflow: auto;
+    list-style-image: none;
+    list-style-position: outside;
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+}
+ul.thumbnails.image_picker_selector li.group_title {
+    float: none;
+}
+ul.thumbnails.image_picker_selector li {
     margin: 0px 12px 12px 0px;
-    float: left; }
-    ul.thumbnails.image_picker_selector li .thumbnail {
-      padding: 6px;
-      border: 1px solid #dddddd;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none; }
-      ul.thumbnails.image_picker_selector li .thumbnail img {
-        -webkit-user-drag: none; }
-    ul.thumbnails.image_picker_selector li .thumbnail.selected {
-      background: #0088cc; }
+    float: left;
+}
+ul.thumbnails.image_picker_selector li .thumbnail {
+    padding: 6px;
+    border: 1px solid #dddddd;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+ul.thumbnails.image_picker_selector li .thumbnail img {
+    -webkit-user-drag: none;
+}
+ul.thumbnails.image_picker_selector li .thumbnail.selected {
+    background: #0088cc;
+}

image-picker/image-picker.js

@@ -1,10 +1,10 @@
 // Image Picker
 // by Rodrigo Vera
 //
-// Version 0.2.4
+// Version 0.2.5
 // Full source at https://github.com/rvera/image-picker
 // MIT License, https://github.com/rvera/image-picker/blob/master/LICENSE
-// Generated by CoffeeScript 1.4.0
+// Generated by CoffeeScript 1.7.1
 (function() {
   var ImagePicker, ImagePickerOption, both_array_are_equal, sanitized_options,
     __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
@@ -49,11 +49,9 @@
   };
 
   ImagePicker = (function() {
-
     function ImagePicker(select_element, opts) {
       this.opts = opts != null ? opts : {};
       this.sync_picker_with_select = __bind(this.sync_picker_with_select, this);
-
       this.select = jQuery(select_element);
       this.multiple = this.select.attr("multiple") === "multiple";
       if (this.select.data("limit") != null) {
@@ -76,13 +74,14 @@
     };
 
     ImagePicker.prototype.build_and_append_picker = function() {
-      var _this = this;
       if (this.opts.hide_select) {
         this.select.hide();
       }
-      this.select.change(function() {
-        return _this.sync_picker_with_select();
-      });
+      this.select.change((function(_this) {
+        return function() {
+          return _this.sync_picker_with_select();
+        };
+      })(this));
       if (this.picker != null) {
         this.picker.remove();
       }
@@ -209,12 +208,10 @@
   })();
 
   ImagePickerOption = (function() {
-
     function ImagePickerOption(option_element, picker, opts) {
       this.picker = picker;
       this.opts = opts != null ? opts : {};
       this.clicked = __bind(this.clicked, this);
-
       this.option = jQuery(option_element);
       this.create_node();
     }
@@ -227,6 +224,10 @@
       return this.option.data("img-src") != null;
     };
 
+    ImagePickerOption.prototype.has_class = function() {
+      return this.option.data("img-class") != null;
+    };
+
     ImagePickerOption.prototype.is_blank = function() {
       return !((this.value() != null) && this.value() !== "");
     };
@@ -277,6 +278,10 @@
       image = jQuery("<img class='image_picker_image'/>");
       image.attr("src", this.option.data("img-src"));
       thumbnail = jQuery("<div class='thumbnail'>");
+      if (this.has_class()) {
+        image.addClass(this.option.data("img-class"));
+        thumbnail.addClass(this.option.data("img-class"));
+      }
       thumbnail.click({
         option: this
       }, function(event) {

source/coffee/image-picker.coffee

@@ -123,6 +123,9 @@ class ImagePickerOption
   has_image: () ->
     @option.data("img-src")?
 
+  has_class: () ->
+    @option.data("img-class")?
+
   is_blank: () ->
     !(@value()? && @value() != "")
 
@@ -158,6 +161,9 @@ class ImagePickerOption
     image = jQuery("<img class='image_picker_image'/>")
     image.attr("src", @option.data("img-src"))
     thumbnail = jQuery("<div class='thumbnail'>")
+    if @has_class()
+      image.addClass(@option.data("img-class"))
+      thumbnail.addClass(@option.data("img-class"))
     thumbnail.click {option: this}, (event) ->
       event.data.option.clicked()
     thumbnail.append(image)