Camaleon CMS Create Own Custom Fields (Complex)

_myslider.html.erb

#/themes/e_shop/views/custom_field/_my_slider.html.erb
<div class="group-input-fields-content" data-callback-render="render_my_custom_slider">
    <div class="form-group">
        <label>Image:</label>
        <div class="input-group">
            <input data-dimension="<%= field.options[:dimension] %>" data-versions="<%= field.options[:versions] %>" data-thumb_size="<%= field.options[:thumb_size] %>" type="url" name="<%= field_name %>[<%= field.slug %>][values][][image]" class="data-error-place-parent image_field form-control <%= "required" if field.options[:required].to_s.to_bool %>"/>
            <span class="input-group-addon btn_upload" onclick="load_upload_image_field($(this).prev());"><i class="fa fa-upload"></i> <%= t('camaleon_cms.admin.button.upload_image')%> <%= "(#{field.get_option('dimension')})" if field.get_option('dimension').present? %></span>
        </div>
    </div>
    <div class="clearfix">
        <div class="form-group">
            <label>Title: </label>
            <input placeholder="Title" type="text" name="<%= field_name %>[<%= field.slug %>][values][][title]" class="title_field translatable form-control required"/>
        </div>
        <div class="form-group">
            <label>Description: </label>
            <textarea placeholder="Description" name="<%= field_name %>[<%= field.slug %>][values][][descr]" class="descr_field form-control translatable required"></textarea>
        </div>
    </div>
</div>
<script>
    function render_my_custom_slider(panel, values){
        values = values && typeof values == 'object' ? values : $.parseJSON(values || '{}');
        panel.find('.descr_field').val(values['descr']);
        panel.find('.title_field').val(values['title']);
        panel.find('.image_field').val(values['image']);
        panel.find('.translatable').Translatable(ADMIN_TRANSLATIONS);
    }
</script>

config.json

// config/config.json
{
  ...
  ...
  "hooks": {
    "extra_custom_fields": ["eshop_extra_custom_fields"]
  }
}

main_helper.rb

# /themes/e_shop/main_helper.rb
module Themes::EShop::MainHelper
  def eshop_extra_custom_fields(args)
      args[:fields][:my_slider] = {
          key: 'my_slider',
          label: 'My Slider',
          render: theme_view('custom_field/my_slider.html.erb'),
          options: {
              required: true,
              multiple: true,
          },
          extra_fields:[
              {
                  type: 'text_box',
                  key: 'dimension',
                  label: 'Dimensions',
                  description: 'Crop images with dimension (widthxheight), sample:<br>400x300 | 400x | x300 | ?400x?500 | ?1400x (? => maximum, empty => auto)'
              }
          ]
      }
    end
  end

Result:

To use in your code:

myobject.the_attribute_fields('home_slider2') # will return array of values like [{"image"=>"http://localhost:3000/media/1/rackmultipart20160503-5691-im1dw9.png", "title"=>"ddfdfg", "descr"=>"dfgdfgdfg"}]