Viewing 5 reply threads
  • Author
    Posts
    • #5001
      mcmaster
      Member

      I’m still trying to get my client’s site converted from ACF to Piklist. Now I’m trying to build flexible content fields in Piklist. A search turned up https://piklist.com/support/topic/flexible-content/, but the OP decided not to give it a try.

      I started with piklist-demos/parts/meta-boxes/field-conditions.php. I created an add-more group with conditions. The result, though, is that all fields always show up. I’ve attached a simplified version. I’m guessing that the problem is that the field reference for the condition is ambiguous. The conditional code refers to the choose_panel field that’s within the flex_panels group field. Not sure how to fix this reference. Is it even possible to do a conditional within a group?

      /*
      Title: Flexible Panels
      Post Type: post
      Order: 90
      Collapse: false
      */
      
      piklist('field', array(
         'type' => 'group',
         'field' => 'flex_panels',
         'label' => 'Flexible Panels',
         'add-more' => true,
      
         'fields' => array(
            array(
               'type' => 'select',
               'field' => 'choose_panel',
               'label' => 'Choose panel type',
               'choices' => array(
                  'just_editor' => 'Just editor',
                  'just_image' => 'Just image',
                  'both' => 'Editor and image',
               ),
               'value' => 'both',
            ),
            array(
               'type' => 'text',
               'field' => 'headline',
               'label' => 'Headline',
               'columns' => 12,
            ),
            array(
               'type' => 'editor',
               'field' => 'intro',
               'label' => 'Introduction',
               'columns' => 12,
               'options' => array (
                  'media_buttons' => true,
                  'teeny' => true,
               ),
               'conditions' => array(
                  array(
                     'field' => 'choose_panel',
                     'value' => array( 'just_editor', 'both' ),
                  ),
               ),
            ),
            array(
               'type' => 'file',
               'field' => 'image',
               'label' => 'Image',
               'description' => 'Add or upload one image.',
               'options' => array(
                  'modal_title' => 'Add Image',
                  'button' => 'Add Image',
               ),
               'conditions' => array(
                  array(
                     'field' => 'choose_panel',
                     'value' => array( 'just_image', 'both' ),
                  ),
               ),
            ),
         ),
      ));
      

      I could probably give this current client a simpler solution, but I have another site I’ll be starting to build later this week that will consist entirely of horizontal panels in flexible configurations. I really don’t want to go back to ACF!

      Thanks again for all your help,
      Donna

    • #5002
      mcmaster
      Member

      Forgot to mention that the “add-more” buttons don’t show up, either. Here’s a screen shot. The fields are always the same regardless of the selection.

      Attachments:
      You must be logged in to view attached files.
    • #5004
      mcmaster
      Member

      Good news: I tried some other search terms and found this thread, which explains how to reference a nested field: https://piklist.com/support/topic/new-conditional-bug-yaaay/. I modified my code to use flex_panels:choose_panel as the conditional selector, and now the conditional aspect works great. Awesome!

      Now for the bad news. There is still no add-more button. 🙁

      I also disabled ACF just in case that was interfering, but no change.

      Attachments:
      You must be logged in to view attached files.
    • #5033
      Kevin
      Keymaster

      Hi @mcdonna-

      Switch add-more to add_more and it should turn on.

      Thanks,

      Kevin

    • #5034
      mcmaster
      Member

      @kevin, words fail me

      facepalm

      thank you!

    • #5035
      mcmaster
      Member

      @kevin, the flexible content configuration is working almost perfectly.

      The “almost” is because for some reason when it displays the inputs for one of the repeatable options, it displays the wrong label.

      Still, it’s close enough to show my client in the morning, and I know she’ll be pleased.

      Here’s the full metabox file in case someone else would find it useful. I’m attaching an image that shows the label problem.

      <?php
      /*
      Title: Flexible Panels
      Post Type: post
      Order: 90
      Collapse: false
      */
      
      piklist('field', array(
         'type' => 'group',
         'field' => 'flex_panels',
         'label' => 'Flexible Panels',
         'add_more' => true,
         'template' => 'field',
      
         'fields' => array(
      
            // first select the type of panel; this will determine which fields to add
            array(
               'type' => 'select',
               'field' => 'choose_panel',
               'label' => 'Choose panel type',
               'choices' => array(
                  'grid_3' => 'Three-column grid',
                  'columns_2' => 'Two columns',
                  'boxed_rows' => 'Boxed rows',
                  'wide_content' => 'Wide content',
                  'looking_forward' => 'Looking forward',
               ),
               'value' => 'grid_3',
            ),
      
            // Headline field is in all panels
            array(
               'type' => 'text',
               'field' => 'headline',
               'label' => 'Headline',
               'columns' => 12,
            ),
      
            // Introduction field is in all but "Looking forward"
            array(
               'type' => 'editor',
               'field' => 'intro',
               'label' => 'Introduction',
               'columns' => 12,
               'options' => array (
                  'media_buttons' => true,
                  'teeny' => true,
               ),
               'conditions' => array(
                  array(
                     'field' => 'flex_panels:choose_panel',
                     'value' => array( 'wide_content', 'grid_3', 'boxed_rows', 'columns_2' ),
                  ),
               ),
            ),
      
            // "Looking forward" has a single Image field
            array(
               'type' => 'file',
               'field' => 'image',
               'label' => 'Image',
               'help' => 'Add or upload one image.',
               'options' => array(
                  'modal_title' => 'Add Image',
                  'button' => 'Add Image',
               ),
               'conditions' => array(
                  array(
                     'field' => 'flex_panels:choose_panel',
                     'value' => array( 'looking_forward' ),
                  ),
               ),
            ),
      
            // "Wide content" allows either two or three images
            array(
               'type' => 'file',
               'field' => 'images',
               'label' => 'Images',
               'help' => 'Add or upload 2 or 3 images, which will be displayed in a row.',
               'options' => array(
                  'modal_title' => 'Add Image',
                  'button' => 'Add Image',
               ),
               'conditions' => array(
                  array(
                     'field' => 'flex_panels:choose_panel',
                     'value' => array( 'wide_content' ),
                  ),
               ),
            ),
      
            // Main content field is in "Wide content" and "Looking forward"
            array(
               'type' => 'editor',
               'field' => 'content',
               'label' => 'Content',
               'columns' => 12,
               'options' => array (
                  'media_buttons' => true,
                  'teeny' => true,
               ),
               'conditions' => array(
                  array(
                     'field' => 'flex_panels:choose_panel',
                     'value' => array( 'wide_content', 'looking_forward' ),
                  ),
               ),
            ),
      
            // "looking forward" also has a bottom content area
            array(
               'type' => 'editor',
               'field' => 'content_bottom',
               'label' => 'Content bottom',
               'columns' => 12,
               'options' => array (
                  'media_buttons' => false,
                  'teeny' => true,
               ),
               'conditions' => array(
                  array(
                     'field' => 'flex_panels:choose_panel',
                     'value' => array( 'looking_forward' ),
                  ),
               ),
            ),
      
            // Boxes include headline, image and text
            // for "Boxed rows," each box is displayed horizontally on a full-width row;
            // for "3-column grid," the boxes are roughly square shaped and are displayed
            // three across. 
            array(
               'type' => 'group',
               'field' => 'boxes',
               'label' => 'Boxes',
               'help' => 'Enter content for as many boxes as you want. They will be displayed three across for 3-column grid, or one across for boxed rows.',
               'columns' => 12,
               'add_more' => true,
               'fields' => array(
                  array(
                     'type' => 'text',
                     'field' => 'box_title',
                     'label' => 'Box Title',
                     'columns' => 12,
                  ),
                  array(
                     'type' => 'file',
                     'field' => 'box_image',
                     'label' => 'Box Image',
                     'description' => 'Add or upload one image.',
                     'options' => array(
                        'modal_title' => 'Add Image',
                        'button' => 'Add Image',
                     ),
                  ),
                  array(
                     'type' => 'editor',
                     'field' => 'box_body',
                     'label' => 'Box Body',
                     'columns' => 12,
                     'options' => array (
                        'media_buttons' => false,
                        'teeny' => true,
                     ),
                  ),
               ),
               'conditions' => array(
                  array(
                     'field' => 'flex_panels:choose_panel',
                     'value' => array( 'boxed_rows', 'grid_3' ),
                  ),
               ),
            ),
      
            // Column content includes optional column title and body
            // Two columns exactly, please. 
            array(
               'type' => 'group',
               'field' => 'columns',
               'label' => 'Columns',
               'help' => 'Enter content for each of the two columns.',
               'columns' => 12,
               'add_more' => true,
               'fields' => array(
                  array(
                     'type' => 'text',
                     'field' => 'column_title',
                     'label' => 'Column Title',
                     'columns' => 12,
                  ),
                  array(
                     'type' => 'editor',
                     'field' => 'column_body',
                     'label' => 'Column Body',
                     'columns' => 12,
                     'options' => array (
                        'media_buttons' => false,
                        'teeny' => true,
                     ),
                  ),
               ),
               'conditions' => array(
                  array(
                     'field' => 'flex_panels:choose_panel',
                     'value' => array( 'columns_2' ),
                  ),
               ),
            ),
         ),
      ));
      
      Attachments:
      You must be logged in to view attached files.
Viewing 5 reply threads
  • You must be logged in to reply to this topic.