<commit_before>{#=== OPTIONS ========================================================================================================#}

{% set option = {
    class:       ('form-control ' ~ field.class)|trim,
    label:       field.label,
    extensions:  field.extensions|default([]),
    attrib:      (field.attrib is defined and field.attrib is iterable) ? field.attrib : [ field.attrib|default(null) ],
    upload:      field.upload|default(''),
    can_upload:  field.canUpload|default(false),
    info:        field.info|default('info.upload.image')
} %}

{#=== INIT ===========================================================================================================#}

{% set preview_w = 200 %}
{% set preview_h = 150 %}

{# Convert from old stored image format that is used until re-saved #}
{% set image = (context.content.get(contentkey) is iterable) ? context.content.get(contentkey) : {'file': context.content.get(contentkey)} %}

{% set attributes = {
    inp: {
        class:        option.class ~ ' imageinput wide',
        id:           'field-' ~ key,
        name:         name ~ '[file]',
        placeholder:  __('field.general.allowed-filetypes') ~ ' ' ~ option.extensions|join(', ') ~ ' …',
        type:         'text',
        value:        image.file|default(''),
    },

    upload: {
        accept:       option.extensions ? '.' ~ option.extensions|join(',.') : '',
        data_url:     url('upload', {'handler': option.upload}),
        id:           'fileupload-' ~ key,
        name:         'files[]',
        type:         'file',
    }
} %}


{#=== BLOCKS =========================================================================================================#}

{% import _self as block %}

{% macro imagepath(labelkey, option, image, attr_inp) %}
    {% import '@bolt/_macro/_macro.twig' as macro %}
    <label>{{ __('Path to image file') }}</label>
    <input{{ macro.attr(attr_inp) }}>
{% endmacro %}

{% macro attributes(key, option, image) %}
    {% if option.attrib %}
        {% for attrib in option.attrib %}
            {% if attrib|lower == 'title' %}
                <div class="form-group">
                    <div class="col-sm-2">
                        <label for="{{ key }}-title">{{ __('Title') }}</label>
                    </div>
                    <div class="col-sm-10">
                        <input type="text" name="{{ key }}[title]" id="{{ key }}-title" value="{{ image.title|default('') }}" class="form-control">
                    </div>
                </div>
            {% endif %}
            {% if attrib|lower in ['alt text', 'alt'] %}
                <div class="form-group">
                    <div class="col-sm-2">
                        <label for="{{ key }}-alt">{{ __('Alt') }}</label>
                    </div>
                    <div class="col-sm-10">
                        <input type="text" name="{{ key }}[alt]" id="{{ key }}-alt" value="{{ image.alt|default('') }}" class="form-control">
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}
{% endmacro %}

{# Modal "select from server" #}
{% macro serverselect(key) %}
    <div class="modal fade" id="selectModal-{{ key }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content"></div>
        </div>
    </div>
{% endmacro %}

{#=== FIELDSET =======================================================================================================#}

{% extends '@bolt/_base/_fieldset.twig' %}

{% set fieldset_conf = {
    height: preview_h,
    key: key,
    width: preview_w,
}%}

{% block fieldset_type 'image' %}

{% block fieldset_label_text  labelkey %}
{% block fieldset_label_info  option.info %}
{% block fieldset_label_class 'col-xs-12' %}

{% block fieldset_controls %}
    <div class="col-xs-12 dropzone" id="dropzone-{{ key }}">
        <div class="row">
            <div class="col-xs-8">
                {# Path #}
                <div class="form-group form-group-first">
                    <div class="col-sm-12">
                        {{ block.imagepath(labelkey, option, image, attributes.inp) }}
                    </div>
                </div>

                {# Attributes #}
                {{ block.attributes(key, option, image) }}

                {# Progressbar #}
                <div class="buic-progress"></div>

                {# Uploadbuttons #}
                {% set can_upload = context.can.upload and option.can_upload %}
                {{ macro.upload_buttons('image', key, attributes.upload, option.upload, can_upload) }}
                {{ block.serverselect(key, __('Cancel')) }}
            </div>

            <div class="col-xs-4">
                <div class="right-on-large">
                    <label>{{ __('Preview') }}</label>
                    <div class="content-preview imageholder">
                        {% if context.content.get(contentkey) != '' %}
                            {% set preview_path = image.file|thumbnail(preview_w, preview_h, 'c') %}
                        {% else %}
                            {% set preview_path = app.paths.app ~ 'view/img/default_empty_4x3.png' %}
                        {% endif %}
                        <img src="{{ preview_path }}" width="{{ preview_w }}" height="{{ preview_h }}" alt="Preview">
                    </div>
                </div>
            </div>
        </div><commit_msg>Refactor of image field<commit_after>{#=== OPTIONS ========================================================================================================#}

{% set option = {
    class:       ('form-control ' ~ field.class)|trim,
    label:       field.label,
    extensions:  field.extensions|default([]),
    attrib:      (field.attrib is defined and field.attrib is iterable) ? field.attrib : [ field.attrib|default(null) ],
    upload:      field.upload|default(''),
    can_upload:  field.canUpload|default(false),
    info:        field.info|default('info.upload.image')
} %}

{#=== INIT ===========================================================================================================#}

{% set preview_w = 200 %}
{% set preview_h = 150 %}

{# Convert from old stored image format that is used until re-saved #}
{% set image = (context.content.get(contentkey) is iterable)
           ? context.content.get(contentkey)
           : {'file': context.content.get(contentkey)}
%}

{% set hattr = {
    inp: {
        class:        option.class ~ ' imageinput wide',
        id:           'field-' ~ key,
        name:         name ~ '[file]',
        placeholder:  __('field.general.allowed-filetypes') ~ ' ' ~ option.extensions|join(', ') ~ ' …',
        type:         'text',
        value:        image.file|default(''),
    },

    upload: {
        accept:       option.extensions ? '.' ~ option.extensions|join(',.') : '',
        data_url:     url('upload', {'handler': option.upload}),
        id:           'fileupload-' ~ key,
        name:         'files[]',
        type:         'file',
    },

    preview: {
        alt:          'Preview',
        height:       preview_h,
        src:          context.content.get(contentkey) != ''
                          ? image.file|thumbnail(preview_w, preview_h, 'c')
                          : app.paths.app ~ 'view/img/default_empty_4x3.png',
        width:        preview_w,
    },
} %}

{% set attribute_fields = [] %}
{% for attrib in option.attrib|default([]) %}
    {% set aid = attrib|lower|replace({'alt text': 'alt'}) %}

    {% if aid in ['title', 'alt'] %}
        {% if aid == 'title' %}
            {% set atitle = __('Title') %}
        {% elseif aid == 'alt' %}
            {% set atitle = __('Alt') %}
        {% endif %}

        {% set uid = key ~ '-' ~ aid %}

        {% set attribute_fields = attribute_fields|merge([{
            title: atitle,
            label: {
                for:    uid
            },
            input: {
                class:  'form-control',
                id:     uid,
                name:   key ~ '[' ~ aid ~ ']',
                type:   'text',
                value:  image[aid]|default(''),
            }
        }]) %}
    {% endif %}
{% endfor %}

{#=== FIELDSET =======================================================================================================#}

{% extends '@bolt/_base/_fieldset.twig' %}

{% set fieldset_conf = {
    height: preview_h,
    key: key,
    width: preview_w,
}%}

{% block fieldset_type 'image' %}

{% block fieldset_label_text  labelkey %}
{% block fieldset_label_info  option.info %}
{% block fieldset_label_class 'col-xs-12' %}

{% block fieldset_controls %}
    <div class="col-xs-12 dropzone" id="dropzone-{{ key }}">
        <div class="row">
            <div class="col-xs-8">
                {# Path #}
                <div class="form-group form-group-first">
                    <div class="col-sm-12">
                        <label>{{ __('Path to image file') }}</label><input{{ hattr(hattr.inp) }}>
                    </div>
                </div>

                {# Attribute fields #}
                {% for afield in attribute_fields %}
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label{{ hattr(afield.label) }}>{{ afield.title }}</label>
                        </div>
                        <div class="col-sm-10">
                            <input{{ hattr(afield.input) }}>
                        </div>
                    </div>
                {% endfor %}

                {# Progressbar #}
                <div class="buic-progress"></div>

                {# Uploadbuttons #}
                {{ macro.upload_buttons('image', key, hattr.upload, option.upload, context.can.upload and option.can_upload) }}

                {# Modal "select from server" #}
                <div class="modal fade" id="selectModal-{{ key }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content"></div>
                    </div>
                </div>
            </div>

            {# Preview #}
            <div class="col-xs-4">
                <div class="right-on-large">
                    <label>{{ __('Preview') }}</label>
                    <div class="content-preview imageholder">
                        <img{{ hattr(hattr.preview) }}>
                    </div>
                </div>
            </div>
        </div>
{'fraction_non_alphanumeric': 0.22749037649047038, 'fraction_numerical': 0.004037179607548587, 'mean_word_length': 1.8105540897097625, 'pattern_counts': {'":': 0, '<': 88, '<?xml version=': 0, '>': 88, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4430822', 'n_tokens_mistral': 3159, 'n_tokens_neox': 2856, 'n_words': 593}