Nested Item - Visual Composer

Hi!

I try create new widget for Visual Composer versrion 5.2

i found this https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524362/Nested+Shortcodes+container

So i create some example widget:

It’s like that :frowning: i can’t edit or add nested element :frowning:

Standard Visual Composer Tabbed Content works fine ( see on screen “Zakladki” )

Hey,

Nested items are different.
You want to add the options to have gallery items?

I want to do exactly the same as in example:

[your_gallery param=“foo”]
[single_img img=“3012” title=“title”]
[single_img img=“3011” title=“title”]
[single_img img=“3013” title=“title”]
[/your_gallery]

So in Visual Composer i add New Element: Gallery then i can add new element Single Img inside Gallery component it’s much similar to Tabbed Content

That requires a different model of button, s you can run such type of element. Yes it is tabbed content.
Exmaple of the usage

vc_map(array(
"name" => __("Animated Headline Box", "mk_framework"),
"base" => "mk_animated_box_headline",
"content_element" => true,
'icon' => 'icon-mk-content-box vc_mk_element-icon',
"as_parent" => array('only' => 'mk_animated_box_txt_headline'),
"category" => __('Slideshows', 'mk_framework'),
'params' => array(
    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 Custom CSS Shortcode or Masterkey Custom CSS option.", "mk_framework")
    )
),
"js_view" => 'VcColumnView'

));

vc_map(array(
“name” => __(“Animated Headline Item”, “mk_framework”),
“base” => “mk_animated_box_txt_headline”,
“as_child” => array(‘only’ => ‘mk_animated_box_headline’),
‘icon’ => ‘icon-mk-content-box vc_mk_element-icon’,
“content_element” => true,
“category” => __(‘Slideshows’, ‘mk_framework’),
‘params’ => array(

    array(
        "type" => "toggle",
        "heading" => __("First Element", "mk_framework"),
        "param_name" => "item_first_element",
        "value" => "false",
        "description" => __("Activate if that is your first element only", "mk_framework")
    ),
    
    array(
        "type" => "textfield",
        "heading" => __("Text", "mk_framework"),
        "param_name" => "item_txt",
        "value" => "",
        "description" => __("", "mk_framework"),
    ),
    array(
        "type" => "theme_fonts",
        "heading" => __("Font Family", "mk_framework") ,
        "param_name" => "font_family",
        "value" => "",
        "description" => __("You can choose a font for this shortcode, however using non-safe fonts can affect page load and performance.", "mk_framework")
    ) ,
    array(
        "type" => "hidden_input",
        "param_name" => "font_type",
        "value" => "",
        "description" => __("", "mk_framework")
    ),
    array(
        "type" => "range",
        "heading" => __("Font Size", "mk_framework"),
        "param_name" => "item_text_size",
        "value" => "16",
        "min" => "10",
        "max" => "100",
        "step" => "1",
        "unit" => 'px',
        "description" => __("", "mk_framework")
    ),
    array(
        "type" => "dropdown",
        "heading" => __("Font Weight", "mk_framework"),
        "param_name" => "item_font_weight",
        "value" => array(
            __('Default', "mk_framework") => "inherit",
            __('Light', "mk_framework") => "300",
            __('Normal', "mk_framework") => "normal",
            __('Bold', "mk_framework") => "bold",
            __('Bolder', "mk_framework") => "bolder",
            __('Extra Bold', "mk_framework") => "900",
        ),
        "description" => __("", "mk_framework")
    ),
    array(
        "type" => "colorpicker",
        "heading" => __("Font Color", "mk_framework"),
        "param_name" => "item_color",
        "value" => "",
        "description" => __("", "mk_framework")
    ),
    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 Custom CSS Shortcode or Masterkey Custom CSS option.", "mk_framework")
    )
)

));

And then you need the rest which I guess u know for mapping the shortcode and the attributes

I have the same options in my code as you:

vc_map( array(
        "name" => __("Your Gallery", "my-text-domain"),
        "base" => "your_gallery",
        "as_parent" => array('only' => 'single_img'), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
        "content_element" => true,
        "show_settings_on_create" => false,
        "is_container" => true,
        "params" => array(
            // add params same as with any other content element
            array(
                "type" => "textfield",
                "heading" => __("Extra class name", "my-text-domain"),
                "param_name" => "el_class",
                "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.", "my-text-domain")
            )
        ),
        "js_view" => 'VcColumnView'
    ) );
    vc_map( array(
        "name" => __("Gallery Image", "my-text-domain"),
        "base" => "single_img",
        "content_element" => true,
        "as_child" => array('only' => 'your_gallery'), // Use only|except attributes to limit parent (separate multiple values with comma)
        "params" => array(
            // add params same as with any other content element
            array(
                "type" => "textfield",
                "heading" => __("Extra class name", "my-text-domain"),
                "param_name" => "el_class",
                "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.", "my-text-domain")
            )
        )
    ) );

For anything else consider to hire someone or visit slack of Visual Composer
http://slack.visualcomposer.io/