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 = values || {};
        values = typeof(values) == 'string' ? $.parseJSON(values) : 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 to render your slider code:

# for single group
myobject.the_attribute_fields('home_slider2') 
# will return array of values like [{"image"=>"https://localhost:30...9.png", "title"=>"ddfdfg", "descr"=>"dfgdfgdfg"}]

# For multiple groups, you can use this: 
myobject.the_fields_grouped(['test-slider'], true) 
# will return like: [{"test-slider"=>[{"image"=>"https:...testimg.jpg", "title"=>"test slide 1", "descr"=>"descr slide 1"}]}, {"test-slider"=>[{"image"=>"https:.._ban.jpg", "title"=>"test slide 2", "descr"=>"sadasda2"}]}]

Sample to use as shortcode:

1. Create front template (attrs received: {object, field, field_key, attibutes})
   

   <!--my_theme/views/custom_fields/my_slider.html.erb-->
   <% slides = object.the_field_grouped(field_key, true) %>
   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <% slides.each_with_index do |i, index| %>
           <li data-target="#carousel-example-generic" data-slide-to="<%= index + 1 %>" class="><%= 'active' if index == 0 %>"></li>
       <% end %>
     </ol>
   
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
       <% slides.each_with_index do |item, index| %>
           <div class="item <%= 'active' if index == 0 %>">
             <img src="<%= item[:image] %>" alt="...">
             <div class="carousel-caption">
               <%= item[:title] %>
             </div>
           </div>
       <% end %>
     </div>
   
     <!-- Controls -->
     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
     </a>
     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
   </div>

2. Edit your content and add like this:
   

   This is a sample for shortcode in content editor: ]data field='test-slider' render_field='true']. Note: 'test-slider' is the key of the custom field assigned

3. Go to view your page and you will see rendered shorcode
   
   Sample source code: https://github.com/camaleon-cms/sample-custom-fields