This topic contains 1 reply, has 2 voices, and was last updated by  Steve 4 years, 8 months ago.

  • Author
    Posts
  • #2990

    aleskupi
    Participant

    I have many problems with add more and group fields. Here is example where I want to have group in add more filed.

    Problems:
    -Group label displays on bottom of every add more item and group fields shows up as they weren’t in a group
    -When adding new add more item editor is not working. After publish a post it works
    -Conditions are not working

    <?php
    /*
    Title: Media box
    Post Type: page
    Show for Template: template-homepage, template-about
    Collapse: true
    */
    //Add more item icon
    $addmore_icon = ‘  ‘;

    //Label of meta box
    piklist(‘field’, array(
    ‘type’ => ‘text’
    ,’field’ => ‘media_label’
    ,’label’ => __(‘Change order by dragging items up & down.’)
    ,’attributes’ => array(
    ‘class’ => ‘hidden’
    )
    ));

    //List of items
    piklist(‘field’, array(
    ‘type’ => ‘group’
    ,’field’ => ‘media_list’
    ,’label’ => ”
    ,’add_more’ => true
    ,’template’ => ‘field’ //field template for not showing label and 100% width
    ,’fields’ => array(
    array(
    ‘type’ => ‘text’
    ,’field’ => ‘media_item_label’
    ,’label’ => $addmore_icon . __(‘Media item’)
    ,’attributes’ => array(
    ‘class’ => ‘hidden’
    )
    ,’columns’ => 12
    )
    ,array(
    ‘type’ => ‘file’
    ,’field’ => ‘media_item_background_media’
    ,’label’ => __(‘Background image’)
    ,’template’ => ‘custom_media’
    ,’description’ => __(‘Select or upload box background image’)
    ,’attributes’ => array(
    ‘class’ => ‘piklist-custom-media-field’
    )
    ,’options’ => array(
    ‘modal_title’ => __(‘Background image’)
    ,’button’ => __(‘Select background image’)
    )
    ,’columns’ => 12
    )
    //Section where we choose to show image or video and set its position on front end
    ,array(
    ‘type’ => ‘group’
    ,’field’ => ‘media_block’
    ,’label’ => ‘Media block’ //Displaying on bottom of add more item
    ,’fields’ => array(
    array(
    ‘type’ => ‘radio’
    ,’field’ => ‘media_item_type’ // Condition for displaying fields
    ,’value’ => ‘video’
    ,’label’ => ‘Type’
    ,’description’ => ‘Please select what you want to show.’
    ,’choices’ => array(
    ‘video’ => ‘Video’
    ,’image’ => ‘Image’
    )
    ,’columns’ => 12
    )
    ,array(
    ‘type’ => ‘text’
    ,’field’ => ‘media_item_url’
    ,’label’ => __(‘Video URL’)
    ,’attributes’ => array(
    ‘placeholder’ => __(‘Youtube URL (http://domain.com/)’)
    ,’class’ => ‘large-text’
    )
    ,’conditions’ => array(
    array(
    ‘field’ => ‘media_block:media_item_type’ // Not working. Always visible
    ,’value’ => ‘video’ // Shown only on media_item_type = video
    )
    )
    ,’columns’ => 12
    )
    ,array(
    ‘type’ => ‘file’
    ,’template’ => ‘custom_media’
    ,’field’ => ‘media_item_featured_image’
    ,’label’ => __(‘Image’)
    ,’description’ => __(‘Select or upload media box item image’)
    ,’options’ => array(
    ‘modal_title’ => __(‘Featured image’)
    ,’button’ => __(‘Select Featured image’)
    )
    ,’conditions’ => array(
    array(
    ‘field’ => ‘media_block:media_item_type’ // Not working. Always visible
    ,’value’ => ‘image’ // Shown only on media_item_type = image
    )
    )
    ,’columns’ => 12
    )
    ,array(
    ‘type’ => ‘radio’
    ,’field’ => ‘media_item_position’
    ,’value’ => ‘left’
    ,’label’ => ‘Position’
    ,’description’ => ‘Select Video/Image position in box’
    ,’choices’ => array(
    ‘left’ => ‘Left’
    ,’right’ => ‘Right’
    )
    ,’columns’ => 12
    )
    )
    )
    //Section for editing content/text block
    ,array(
    ‘type’ => ‘group’
    ,’field’ => ‘content_block’
    ,’label’ => ‘Content block’
    ,’fields’ => array(
    array(
    ‘type’ => ‘text’
    ,’field’ => ‘media_item_title’
    ,’label’ => __(‘Title’)
    ,’attributes’ => array(
    ‘class’ => ‘large-text’
    ,’placeholder’ => __(‘Title’)
    )
    ,’columns’ => 12
    )
    ,array(
    ‘type’ => ‘textarea’
    ,’field’ => ‘media_item_subtitle’
    ,’label’ => __(‘Subtitle’)
    ,’attributes’ => array(
    ‘class’ => ‘large-text’
    ,’placeholder’ => __(‘Subtitle’)
    )
    ,’columns’ => 12
    )
    ,array(
    ‘type’ => ‘editor’
    ,’field’ => ‘media_item_description’ // When add more + breaks
    ,’label’ => __(‘Description’)
    ,’attributes’ => array(
    ‘class’ => ‘large-text’
    )
    ,’options’ => array (
    ‘wpautop’ => false
    ,’media_buttons’ => false
    ,’tabindex’ => ”
    ,’editor_css’ => ”
    ,’editor_class’ => ”
    ,’teeny’ => false
    ,’dfw’ => false
    ,’tinymce’ => true
    ,’quicktags’ => true
    )
    ,’columns’ => 12
    )
    ,array(
    ‘type’ => ‘file’
    ,’field’ => ‘media_item_quote_media’
    ,’template’ => ‘custom_media’
    ,’label’ => __(‘Quote image’)
    ,’description’ => __(‘Select or upload quote logo/image’)
    ,’options’ => array(
    ‘modal_title’ => __(‘Image’)
    ,’button’ => __(‘Select image’)
    )
    ,’columns’ => 12
    )
    ,array(
    ‘type’ => ‘textarea’
    ,’label’ => __(‘Quote’)
    ,’field’ => ‘media_item_quote_text’
    ,’attributes’ => array(
    ‘placeholder’ => __(‘Quote’)
    ,’class’ => ‘large-text’
    )
    ,’columns’ => 12
    )
    )
    )
    )
    ));
    ?>

    Attachments:
    You must be logged in to view attached files.
  • #2995

    Steve
    Keymaster

    @aleskupi– I got it working with the code below. A few things:
    1) You had a lot of groups within groups, which is really not necessary. Groups are primarily used for advanced layouts and an add-more with an add-more.
    2) As soon as I removed these parameters the Editor looked great: tabindex, editor_css and editor_class.

    $addmore_icon = '  ';
    
    //Label of meta box
    piklist('field', array(
    'type' => 'text'
    ,'field' => 'media_label'
    ,'label' => __('Change order by dragging items up & down.')
    ,'attributes' => array(
        'class' => 'hidden'
    )
    ));
    
      //List of items
      piklist('field', array(
      'type' => 'group'
      ,'field' => 'media_list'
      ,'label' => 'label 1'
      ,'add_more' => true
      ,'template' => 'field' //field template for not showing label and 100% width
      ,'fields' => array(
        array(
          'type' => 'text'
          ,'field' => 'media_item_label'
          ,'label' => $addmore_icon . __('Media item')
          ,'attributes' => array(
            'class' => 'hidden'
          )
          ,'columns' => 12
        )
        ,array(
          'type' => 'file'
          ,'field' => 'media_item_background_media'
          ,'label' => __('Background image')
          ,'template' => 'custom_media'
          ,'description' => __('Select or upload box background image')
          ,'attributes' => array(
            'class' => 'piklist-custom-media-field'
          )
          ,'options' => array(
            'modal_title' => __('Background image')
            ,'button' => __('Select background image')
          )
          ,'columns' => 12
        )
        ,array(
          'type' => 'radio'
          ,'field' => 'media_item_type' // Condition for displaying fields
          ,'value' => 'video'
          ,'label' => 'Type'
          ,'description' => 'Please select what you want to show.'
          ,'choices' => array(
            'video' => 'Video'
            ,'image' => 'Image'
            )
          ,'columns' => 12
        )
        ,array(
          'type' => 'text'
          ,'field' => 'media_item_url'
          ,'label' => __('Video URL')
          ,'attributes' => array(
          'placeholder' => __('Youtube URL (http://domain.com/)')
            ,'class' => 'large-text'
          )
          ,'conditions' => array(
            array(
              'field' => 'media_list:media_item_type' // Not working. Always visible
              ,'value' => 'video' // Shown only on media_item_type = video
            )
          )
          ,'columns' => 12
        )
        ,array(
          'type' => 'file'
          ,'template' => 'custom_media'
          ,'field' => 'media_item_featured_image'
          ,'label' => __('Image')
          ,'description' => __('Select or upload media box item image')
          ,'options' => array(
            'modal_title' => __('Featured image')
            ,'button' => __('Select Featured image')
          )
          ,'conditions' => array(
            array(
              'field' => 'media_block:media_item_type' // Not working. Always visible
              ,'value' => 'image' // Shown only on media_item_type = image
            )
          )
          ,'columns' => 12
        )
        ,array(
          'type' => 'radio'
          ,'field' => 'media_item_position'
          ,'value' => 'left'
          ,'label' => 'Position'
          ,'description' => 'Select Video/Image position in box'
          ,'choices' => array(
            'left' => 'Left'
            ,'right' => 'Right'
          )
          ,'columns' => 12
        )
        ,array(
          'type' => 'text'
          ,'field' => 'media_item_title'
          ,'label' => __('Title')
          ,'attributes' => array(
            'class' => 'large-text'
            ,'placeholder' => __('Title')
          )
          ,'columns' => 12
        )
        ,array(
          'type' => 'textarea'
          ,'field' => 'media_item_subtitle'
          ,'label' => __('Subtitle')
          ,'attributes' => array(
            'class' => 'large-text'
            ,'placeholder' => __('Subtitle')
          )
          ,'columns' => 12
        )
        ,array(
          'type' => 'editor'
          ,'field' => 'media_item_description' // When add more + breaks
          ,'label' => __('Description')
          ,'attributes' => array(
            'class' => 'large-text'
          )
          ,'options' => array (
            'wpautop' => false
            ,'media_buttons' => false
            ,'teeny' => false
            ,'dfw' => false
            ,'tinymce' => true
            ,'quicktags' => true
          )
          ,'columns' => 12
        )
        ,array(
          'type' => 'file'
          ,'field' => 'media_item_quote_media'
          ,'template' => 'custom_media'
          ,'label' => __('Quote image')
          ,'description' => __('Select or upload quote logo/image')
          ,'options' => array(
            'modal_title' => __('Image')
            ,'button' => __('Select image')
          )
          ,'columns' => 12
        )
        ,array(
          'type' => 'textarea'
          ,'label' => __('Quote')
          ,'field' => 'media_item_quote_text'
          ,'attributes' => array(
            'placeholder' => __('Quote')
            ,'class' => 'large-text'
          )
          ,'columns' => 12
        )
      )
    ));
    

    Let me know what you think.

The topic ‘Add more and group problem’ is closed to new replies.