<?php
vc_map(array(
    "name"        => __("Image", "mk_framework"),
    "base"        => "mk_image",
    "category"    => __('General', 'mk_framework'),
    'description' => __('Adds Image element with many styles.', 'mk_framework'),
    'icon'        => 'icon-mk-image vc_mk_element-icon',
    "params"      => array(
        array(
            "type"        => "upload",
            "heading"     => __("Upload Your image", "mk_framework"),
            "param_name"  => "src",
            "value"       => "",
            "description" => __("", "mk_framework"),
        ),

        array(
            "type"        => "range",
            "heading"     => __("Image Width", "mk_framework"),
            "param_name"  => "image_width",
            "value"       => "500",
            "min"         => "10",
            "max"         => "2600",
            "step"        => "1",
            "unit"        => 'px',
            "description" => __("", "mk_framework"),
        ),
        array(
            "type"        => "range",
            "heading"     => __("Image Height", "mk_framework"),
            "param_name"  => "image_height",
            "value"       => "350",
            "min"         => "10",
            "max"         => "5000",
            "step"        => "1",
            "unit"        => 'px',
            "description" => __("", "mk_framework"),
        ),
        array(
            "type"        => "toggle",
            "heading"     => __("Image Cropping?", "mk_framework"),
            "param_name"  => "crop",
            "value"       => "true",
            "description" => __("If you dont want to crop your image based on the dimensions you defined above disable this option. Only wdith will be used to give the image container max-width property.", "mk_framework"),
        ),
        array(
            "type"        => "toggle",
            "heading"     => __("Image Hover?", "mk_framework"),
            "param_name"  => "hover",
            "value"       => "true",
            "description" => __("If you disable this option the image hover layer including the 'click to open in lightbox' and 'image title' will be removed from this image.", "mk_framework"),
        ),
        array(
            "type"        => "toggle",
            "heading"     => __("Image Circular?", "mk_framework"),
            "param_name"  => "circular",
            "value"       => "false",
            "description" => __("", "mk_framework"),
        ),
        array(
            "type"        => "dropdown",
            "heading"     => __("Hover Style", "mk_framework"),
            "param_name"  => "hover_style",
            "width"       => 150,
            "value"       => array(
                __('Style 1', "mk_framework") => "style1",
                __('Style 2', "mk_framework") => "style2",
            ),
            "description" => __("", "mk_framework"),
        ),
        array(
            "type"        => "textfield",
            "heading"     => __("Custom URL", "mk_framework"),
            "param_name"  => "custom_url",
            "value"       => "",
            "description" => __("use this option if you want to link to a webpage instead of 'click to open in lightbox'", "mk_framework"),
        ),
        array(
            "type"        => "textfield",
            "heading"     => __("Custom LightBox URL", "mk_framework"),
            "param_name"  => "custom_lightbox_url",
            "value"       => "",
            "description" => __("If you want to load custom image, video in lightbox then fill this form with the URL of the image or video(e.g. youtube, vimeo)'", "mk_framework"),
        ),
        array(
            "type"        => "toggle",
            "heading"     => __("Lightbox iFrame Mode", "mk_framework"),
            "param_name"  => "lightbox_ifarme",
            "value"       => "false",
            "description" => __("If you are using a custom ligthbox url and the content you would like to show is webpage, google maps or flash content, enable this option.", "mk_framework"),
        ),
        array(
            "type"        => "dropdown",
            "heading"     => __("Custom URL Target", "mk_framework"),
            "param_name"  => "target",
            "width"       => 200,
            "value"       => $target_arr,
            "description" => __("", "mk_framework"),
        ),
        array(
            "type"        => "dropdown",
            "heading"     => __("Align", "mk_framework"),
            "param_name"  => "align",
            "width"       => 150,
            "value"       => array(
                __('Left', "mk_framework")   => "left",
                __('Right', "mk_framework")  => "right",
                __('Center', "mk_framework") => "center",
            ),
            "description" => __("", "mk_framework"),
        ),
        array(
            "type"        => "textfield",
            "heading"     => __("Lightbox Group rel", "mk_framework"),
            "param_name"  => "group",
            "value"       => "",
            "description" => __("", "mk_framework"),
        ),
        array(
            "type"        => "range",
            "heading"     => __("Margin Bottom", "mk_framework"),
            "param_name"  => "margin_bottom",
            "value"       => "10",
            "min"         => "-50",
            "max"         => "300",
            "step"        => "1",
            "unit"        => 'px',
            "description" => __("", "mk_framework"),
        ),
        array(
            "type"        => "dropdown",
            "heading"     => __("Viewport Animation", "mk_framework"),
            "param_name"  => "animation",
            "value"       => $css_animations,
            "description" => __("Viewport animation will be triggered when this element is being viewed when you scroll page down. you only need to choose the animation style from this option. please note that this only works in moderns. We have disabled this feature in touch devices to increase browsing speed.", "mk_framework"),
        ),
        $add_device_visibility,
        array(
            "type"        => "textfield",
            "heading"     => __("Extra class name", "mk_framework"),
            "param_name"  => "el_class",
            "value"       => "",
            "description" => __("If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.", "mk_framework"),
        ),

    ),
));