Blog

There are two custom fields made with Advanced Custom Fields Pro plugin: Video Tutorials and Video Tutorial Sections.

• Video Tutorials: has a repeater field that include Video name (Text), Video URL from Youtube (Text), and Video section (Select). This will display under a page called Video Tutorials.

• Video Tutorial Sections: a repeater of text fields to list the sections. This is assigned to an Options page. If you don’t use Options page, I guess it is good enough to just create a page and assign the values then.

The idea is to add a selection field to the Video Tutorials, which takes in values from the Video Tutorial Sections.

I would like to do it so that: first, the page displays a thumbnail image from the Youtube Video, then when people click, the actual video will load. This will make the page load faster than placing a bunch of videos at once. That is also why we need the Video ID instead of the whole URL.

How to populate video sections values into video tutorials choices

First, the ACF documentation has instructions on this topic already. It is the Example 2 from this link which can be taken and modified a bit in this case. Simply saying, we can hook into the “acf/load_field/name=video_single_section” to add the choices from the Video Tutorials Sections.

/**
 * Populate video sections values into video tutorials choices
 */
add_filter( 'acf/load_field/name=video_single_section', 'acf_load_video_sections_choices' );
function acf_load_video_sections_choices ( $field) {
    $field['choices'] = [];
    if( have_rows('video_tutorials_sections', 'option') ) {
        while( have_rows('video_tutorials_sections', 'option') ) {
            the_row();
            $value = get_sub_field('video_tutorials_section_name');
            $field['choices'][ $value ] = $value;
        }
    }
    return $field;
}

Then, come back to the “Video Tutorials” page and reload. You should now see that the selection has successfully takes values from our options page:

Notices:

• When changing the value of any rows in Video Tutorial Section, you have to assign the select field again to the video.

That’s it, quite simple!

ACF issue: First row duplication in nested loops

Let’s talk a bit about how to display the videos on the front-end in sections. We have data already, now it’s time to show it in our Video Tutorials page.

The first solution I think of is to create two nested while loops:

• The first loop looks for and display the sections
• The second loop looks for the value of Video Section in each single video, and if the video’s section name is equal to the name of the section from the first loop, the video will be placed under that section.

But, there comes an issue with this solution: always, the first row is duplicated. And the problem is somewhere from the second loop. I don’t know why, and Googling does not help me much. And I find a workaround solution for this duplicate issue:

First, loop through the Video Tutorials Section, store the unique values into an array. Then, create another array to store the Video Tutorials information.

$sections = [];
if(have_rows('video_tutorials_sections', 'option')) :
  while(have_rows('video_tutorials_sections', 'option')) : 
      the_row(); 
      $sections[] = get_sub_field('video_tutorials_section_name', 'option');
  endwhile;
  $sections = array_unique($sections);
endif;
$videos_quick_links = [];
if(have_rows('video_tutorials')) :
  while(have_rows('video_tutorials') ) : 
    the_row();
    $videos = array(
      'name' => get_sub_field('video_tutorials_name'),
      'section' => get_sub_field('video_single_section'),
      'url' => get_sub_field('video_tutorials_url')
    );
    $videos_quick_links[] = $videos;
  endwhile;
endif;

Then, in the body, display the information with a nested foreach loop.

About the thumbnail image: please read this Stackoverflow post. In summary, the link to retrieve the thumbnail is “https://img.youtube.com/vi/<video-id>/0.jpg”

<?php 
$counter_anchor = 1;
foreach ($sections as $section) :
     $anchor_id = create_section_id($section); ?>
     <div class="col-lg-4 not-v-center">
          <a href="#<?php echo $anchor_id; ?>">
              <li>
                  <p>
                      <?php echo $counter_anchor . ". " . $section; ?>
                  </p>
                  <ul>
                  <?php
                  foreach ($videos_quick_links as $video_q) :
                    if($video_q['section'] === $section) : ?>
                        <li class="text-left">
                            <?php echo $video_q['name']; ?>
                        </li?>
                    <?php endif;
                  endforeach;
                  ?>
                  </ul>
              </li>
          </a>
      </div>
<?php
$counter_anchor++;
endforeach; ?>

Embedding Youtube videos are quite annoying, because at the end of the video, it always suggests videos from the other channel. The “&feature=youtu.be&rel=0” at the end of the video url will make sure that it only suggests videos from my channel.

Lastly, I use lity to display the video within the page. There will be video in a lightbox. Download lity style and script file from the link and then enqueue them with wp_enqueue_style and wp_enqueue_scripts in WordPress:

add_action( 'wp_enqueue_scripts', 'blog_add_styles' );
function blog_add_styles() {
    if (is_page_template('video-tutorials.php')) {
         $stylesheet_uri = get_stylesheet_directory_uri();
         wp_enqueue_style( 'lity-css', $stylesheet_uri . '/css/lity.min.css', array(), '0.1' );
         wp_enqueue_script( 'lity-js', $stylesheet_uri . '/js/lity.min.js', true );
    }    
}

And, of course, you can make some CSS to style up the page that it looks better.