Radio Button and Repeater Subfields

• mmarquez

• October 2, 2015 at 8:19 am

Hello!

I recently started working with AFC to create custom layouts in WP custom posts. We have 16 pre-defined rows (HTML & CSS) juts like this (some include images as well):

<div class="row row-75 cols-4">
<div class="col col-span-3 col-text offset-top-100 offset-bottom-100 offset-left-100">
<h2>"Heading"</h2>
<p>"Content"</p>
</div>
</div>

So I created a Repeater field called “Builder” and the first subfield is “Row Options” which contains 16 Radio Buttons. The rest of the subfields are specific to every single one of the custom layouts and are displayed in the page by simple conditional logic (if you choose Radio 12, you will see the fields with the condition to appear in that specific choice).

This works good, I can access the fields and everything, but I think there is a better approach. Right now I’m populating variables with each sub field, checking if they are empty or no and then going through ifelse statements in each one to see if it displays or not. It works, but I’m sure there is a better way of doing this.

Is there another way to approach this? I’m thinking of instead of going though all the values maybe knowing which Radio buttons are selected and just querying those values?

Thanks in Advance 🙂

    <?php  if( have_rows('builder') ): ?>
      	<?php
  	while( have_rows('builder') ):
  	the_row();
  	// Subfield Variables
    // Query the radio buton row
    // populate row type
    // switch statement 

    // Row 1 Single Center Image
  	$row_1_image = get_sub_field('row_1_image');
  	//Row 2 Content Alignt Left
  	$row_2_heading = get_sub_field('row_2_heading');
  	$row_2_content = get_sub_field('row_2_content');
  	//Row 3  Full Screen Image
  	$row_3_image = get_sub_field('row_3_image');
  	//Row 4  Content Centered
  	$row_4_heading = get_sub_field('row_4_heading');
  	$row_4_content = get_sub_field('row_4_content');
  	//Row 5 Edge Left Image Right Content
  	$row_5_image = get_sub_field('row_5_image');
  	$row_5_heading = get_sub_field('row_5_heading');
  	$row_5_content = get_sub_field('row_5_content');
  	//Row 6 Centered Left Content Right Image
  	$row_6_image = get_sub_field('row_6_image');
  	$row_6_heading = get_sub_field('row_6_heading');
  	$row_6_content = get_sub_field('row_6_content');
  	//Row 7 Block Quote With Separators
  	$row_7_quote = get_sub_field('row_7_quote');
    //Row 8 Simple Centered Content
  	$row_8_content = get_sub_field('row_8_content');
    //Row 9 Three Square Images
  	$row_9_image_left = get_sub_field('row_9_image_left');
  	$row_9_image_center = get_sub_field('row_9_image_center');
  	$row_9_image_right = get_sub_field('row_9_image_right');
    //Row 10 Full Screen Image With Overlay Caption
  	$row_10_image = get_sub_field('row_10_image');
  	$row_10_heading = get_sub_field('row_10_heading');
  	$row_10_content = get_sub_field('row_10_content');
    //Row 11 Image With Caption
  	$row_11_image = get_sub_field('row_11_image');
  	$row_11_heading = get_sub_field('row_11_heading');
  	$row_11_content = get_sub_field('row_11_content');
    //Row 12 Two Images Row
  	$row_12_image_left = get_sub_field('row_12_image_left');
  	$row_12_image_right = get_sub_field('row_12_image_right');
    //Row 13 Image With Small Caption
  	$row_13_image = get_sub_field('row_13_image');
  	$row_13_caption = get_sub_field('row_13_caption');
    //Row 14 Left Content Image Right
  	$row_14_image = get_sub_field('row_14_image');
  	$row_14_heading = get_sub_field('row_14_heading');
  	$row_14_content = get_sub_field('row_14_content');
  	?>
        <!-- Check Row 1 For Content-->
        <?php  if( $row_1_image ) : ?>
            <div class="row row-75 cols-1">
                <div class="col">
                    <img src="<?php  echo $row_1_image['url']; ?>" alt="<?php  echo $row_1_image['alt']  ?>" />
                </div>
            </div>
          <!-- Check Row 2 For Content-->
          <?php  elseif( $row_2_heading and $row_2_content ) : ?>
              <div class="row row-75 cols-4 col-float-right">
                  <div class="col col-span-3 col-text offset-top-100 offset-bottom-100 offset-right-100">
                      <h2><?php  echo $row_2_heading; ?></h2>
                      <p><?php  echo $row_2_content; ?></p>
                  </div>
              </div>
            <!-- Check Row 3 For Content-->
            <?php  elseif( $row_3_image['url'] ) : ?>
              <div class="row row-100">
                  <div class="col">
                      <img src="<?php  echo $row_3_image['url']; ?>" alt="<?php  echo $row_3_image['alt']  ?>" />
                  </div>
              </div>
            <!-- Check Row 4 For Content-->
            <?php  elseif( $row_4_heading and $row_4_content ) : ?>
              <div class="row row-75 cols-4">
                  <div class="col col-span-3 col-text offset-top-100 offset-bottom-100 offset-left-100">
                    <h2><?php  echo $row_4_heading; ?></h2>
                    <p><?php  echo $row_4_content; ?></p>
                  </div>
              </div>
            <!-- Check Row 5 For Content-->
            <?php  elseif( $row_5_image and $row_5_heading and $row_5_content ) : ?>
              <div class="row row-100 cols-2">
                  <div class="col">
                    <img src="<?php  echo $row_5_image['url']; ?>" alt="<?php  echo $row_5_image['alt']  ?>" />
                  </div>
                  <div class="col pad-40 col-text">
                    <h2><?php  echo $row_5_heading; ?></h2>
                    <p><?php  echo $row_5_content; ?></p>
                  </div>
              </div>
              <!-- Check Row 6 For Content-->
            <?php  elseif( $row_6_image and $row_6_heading and $row_6_content ) : ?>
              <div class="row row-75 cols-2 offset-top-100 offset-bottom-100">
                  <div class="col pad-left-70">
                    <h2><?php  echo $row_6_heading; ?></h2>
                    <p><?php  echo $row_6_content; ?></p>
                  </div>
                  <div class="col pad-right-70">
                    <img src="<?php  echo $row_6_image['url']; ?>" alt="<?php  echo $row_6_image['alt']  ?>" />
                  </div>
              </div>
            <!-- Check Row 7 For Content-->
            <?php  elseif( $row_7_quote ) : ?>
              <div class="row row-100 ">
                  <div class="col">
                    <p class="pull-quote"><?php  echo $row_7_quote; ?></p>
                  </div>
              </div>
            <!-- Check Row 8 For Content-->
            <?php  elseif( $row_8_content ) : ?>
              <div class="row row-50 pad-bottom-100">
                  <div class="col col-text">
                    <p><?php  echo $row_8_content; ?></p>
                  </div>
              </div>
            <!-- Check Row 9 For Content-->
            <?php  elseif( $row_9_image_left and $row_9_image_center and $row_9_image_right ) : ?>
              <div class="row row-100 cols-3 row-gutter-3">
                  <div class="col col-gutter-3">
                    <img src="<?php  echo $row_9_image_left['url']; ?>" alt="<?php  echo $row_9_image_left['alt']  ?>" />
                  </div>
                  <div class="col col-gutter-3">
                    <img src="<?php  echo $row_9_image_center['url']; ?>" alt="<?php  echo $row_9_image_center['alt']  ?>" />
                  </div>
                  <div class="col col-gutter-3 stack-col">
                    <img src="<?php  echo $row_9_image_right['url']; ?>" alt="<?php  echo $row_9_image_right['alt']  ?>" />
                  </div>
              </div>
            <!-- Check Row 10 For Content-->
            <?php  elseif( $row_10_image and $row_10_heading and $row_10_content ) : ?>
              <div class="row row-100 offset-top-100" data-pg-collapsed>
                  <div class="col">
                    <img src="<?php  echo $row_10_image['url']; ?>" alt="<?php  echo $row_10_image['alt']  ?>" />
                  </div>
                  <div class="caption caption-inline caption-overlay">
                      <span>02</span>
                      <h3><?php  echo $row_10_heading; ?></h3>
                      <p><?php  echo $row_10_content; ?></p>
                  </div>
              </div>
            <!-- Check Row 11 For Content-->
            <?php  elseif( $row_11_image and $row_11_heading and $row_11_content ) : ?>
              <div class="row row-75 offset-top-100" data-pg-collapsed>
                  <div class="col">
                    <img src="<?php  echo $row_11_image['url']; ?>" alt="<?php  echo $row_11_image['alt']  ?>" />
                  </div>
                  <div class="caption caption-inline">
                      <span>03</span>
                      <h3><?php  echo $row_11_heading; ?></h3>
                      <p><?php  echo $row_11_content; ?></p>
                  </div>
              </div>
            <!-- Check Row 12 For Content-->
            <?php  elseif( $row_12_image_left and $row_12_image_right  ) : ?>
              <div class="row row-75 cols-2 offset-top-40 col-gutter-3-top" data-pg-collapsed>
                  <div class="col col-gutter-3">
                    <img src="<?php  echo $row_12_image_left['url']; ?>" alt="<?php  echo $row_12_image_left['alt']  ?>" />
                  </div>
                  <div class="col col-gutter-3">
                    <img src="<?php  echo $row_12_image_right['url']; ?>" alt="<?php  echo $row_12_image_right['alt']  ?>" />
                  </div>
              </div>
            <!-- Check Row 13 For Content-->
            <?php  elseif( $row_13_image and $row_13_caption  ) : ?>
              <div class="row row-75 cols-2 offset-top-40 col-gutter-3-top" data-pg-collapsed>
              <div class="col col-span-2">
                <img src="<?php  echo $row_13_image['url']; ?>" alt="<?php  echo $row_13_image['alt']  ?>" />
                  <p class="fine-print"><?php  echo $row_13_caption; ?></p>
                  <hr class="row-rule">
              </div>
              </div>
            <!-- Check Row 14 For Content-->
            <?php  elseif( $row_14_image and $row_14_heading and $row_14_content ) : ?>
              <div class="row row-75 cols-3">
                  <div class="col col-span-1 caption caption-align-right pad-40">
                      <span>04</span>
                      <h3><?php  echo $row_14_heading; ?></h3>
                      <p><?php  echo $row_14_content; ?></p>
                    </div>
                  <div class="col col-span-2">
                    <img src="<?php  echo $row_14_image['url']; ?>" alt="<?php  echo $row_14_image['alt']  ?>" />
                  </div>
              </div>
              <?php  endif; ?>
      	<?php  endwhile; ?>
      <?php  endif; ?>

• John Huebner

• October 3, 2015 at 11:39 am

Yes, I think there is. Since the additional fields are based on the radio button field, get the radio button field and test it’s value to determine which of the other fields to get and display.

if ($radio == 'choice_1') {
  // display fields
} elseif ($radio == 'choice_2') {
  // display fields
} elseif etc...

or better yet

switch ($radio_field) {
  case 'choice 1':
    //display fields
    break;
}

If fields can be displayed for multiple choices you may want to put them into functions so they can be called that way rather than duplicating the code to display them over and over again.

You’ll also find that sooner or later you’ll be showing the wrong fields. For example, if they change the choice later that hides one of the fields the hidden field will still have a value, so you’ll need to check the radio field for that reason any way.