Support

Account

Home Forums General Issues Country Flags (graphics/icons) with ACF?

Solving

Country Flags (graphics/icons) with ACF?

  • I’m using ACF on a site for the first time. The site will contain a list of worldwide retailers (built using ACF and custom post types) and I was wondering if there’s a quick way to display countries and their respective flags?

    At the moment I’ve got a country field and a flag field but the only way to add a flag image is to manually upload it or choose it from the WordPress Media Library (if I both to upload a flag for every country on earth).

    Am I missing a faster way of doing this? Thanks for any pointers!

  • This is how I would do this…

    The basics

    Upload all of the flag images to a folder on the server, for this example I will assume I have put them in /wp-content/themes/your-theme/flags/. The file names of these flags would include information I want to display. For example the file name for the US flag might be “US-USA-United_States.png”. I will explain US is the 2 character ISO country code, USA is the 3 character ISO code and ‘United_States” is the country name. These 2 parts are separated with hyphens and spaces are replaced with underscores. You can use whatever you want here based on what text you want to appear for selection.

    I would create a select field for the flag. “Stylised UI = Yes” this will allow images to be shown and will also create search using select2.

    I would dynamically generate the choices for this field from the files that exist in the folder.

    
    add_filter('acf/prepare_field/name=your-flag-field-name', 'populate_flag_field', 20);
    function populate_flag_field($field) {
      $choices = array();
      $dir = get_template_directory().'/flags';
      $files = scandir($dir);
      if ($files) {
        foreach ($files as $file) {
          if (is_dir($dir.'/'.$file)) {
            // skip folders
            continue;
          }
          // only allow png images
          $file_info = pathinfo($file_name);
          if ($file_info['extension'] != 'png') {
            continue;
          }
          // build label
          $label = $fileinfo['filename'];
          // pretty it up
          $label = str_replace('-', ' - ', $label);
          $label = str_replace('_', ' ', $label);
          // add image
          $label .= ' <img src="'.get_template_directory_uri().'/flags/'.$file.'" />';
          // add choice
          $choices[$file] = $label;
        } // end foreach file
      } // end if files
      return $choices;
    } // end function
    

    The I would create an acf/format_value filter

    
    add_filter('acf/format_value/name=your-flag-field-name', 'format_flag_field', 20, 3);
    function format_flag_field($value, $post_id, $field) {
      if ($value) {
        $value = '<img src="'.get_template_directory_uri().'/flags/'.$value.'" />';
      }
      return $value;
    }
    
  • Hello there,
    Thank you for this. I was searching something similar.

    As I work with a child theme, the code had to be modified and also needed some corrections. Here is a code working for a child theme :

    add_filter('acf/prepare_field/name=slug_field', 'populate_flag_field', 20);
    function populate_flag_field($field) {
        $choices = array();
        $dir = get_stylesheet_directory() . '/flags';
        $files = scandir($dir);
        if ($files) {
            foreach ($files as $file) {
                if (is_dir($dir . '/' . $file)) {
                    continue;
                }
                $file_info = pathinfo($file);
                if ($file_info['extension'] != 'png') {
                    continue;
                }
                $label = $file_info['filename'];
                $choices[$file] = $label;
            }
        }
        $field['choices'] = $choices;
        return $field;
    }
    
    add_filter('acf/format_value/name=slug_field', 'format_flag_field', 20, 3);
    function format_flag_field($value, $post_id, $field) {
        if ($value) {
            $value = '<img src="' . get_stylesheet_directory_uri() . '/flags/' . $value . '" />';
        }
        return $value;
    }
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.