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"=>"http://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"=>"http:...testimg.jpg", "title"=>"test slide 1", "descr"=>"descr slide 1"}]}, {"test-slider"=>[{"image"=>"http:.._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