Create Advanced Custom Field

#/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 = 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/config.json
{
...
...
"hooks": {
"extra_custom_fields": ["eshop_extra_custom_fields"]
}
}

# /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

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"}]