Add Image alt tag into ACF fields content

To check if an ACF WYSIWYG editor (Editor Type) field contains any images, add an alt tag to those images, and display them correctly on a page in WordPress, you can use a combination of PHP and regular expressions to find images in the field content, add the alt tags if missing, and then output the modified content.

Step-by-Step Guide

  1. Create/Update ACF WYSIWYG Field:
    • Make sure you have an ACF field group created with a WYSIWYG Editor field type. If not, go to Custom Fields > Add New and create one.
    • Add a field of type WYSIWYG Editor and give it a name, e.g., content_editor.
  2. Add PHP Code to Your Theme:
    • You need to add PHP code to your theme’s template file (e.g., single.php, page.php, or a custom template file) where you want to check for images, add alt tags, and display the content.
  3. Check for Images in WYSIWYG Field, Add Alt Tags, and Display Them:

Here is the code you can add to your template file:

<?php
// Get the WYSIWYG editor content using ACF
$content = get_field('content_editor');

if ($content) {
    // Use a regular expression to find all <img> tags
    $content = preg_replace_callback('/<img(.*?)>/', function ($matches) {
        $img_tag = $matches[0];

        // Check if the image tag already has an alt attribute
        if (strpos($img_tag, 'alt=') === false) {
            // Add a default alt attribute if none is present
            $alt_text = 'Default alt text'; // Customize this as needed
            $img_tag = str_replace('<img', '<img alt="' . esc_attr($alt_text) . '"', $img_tag);
        }

        // Optionally, you can add a dynamic alt text based on other attributes or logic
        return $img_tag;
    }, $content);

    // Output the modified content
    echo $content;
} else {
    echo 'No content available.';
}
?>

Explanation

  1. Retrieve Content from ACF WYSIWYG Editor Field:
    get_field('content_editor') retrieves the content from the ACF WYSIWYG editor field named content_editor.
  2. Find and Replace Image Tags Using Regular Expression:
    The preg_replace_callback() function is used to find all <img> tags in the content. It then checks each image to see if it has an alt attribute.
  3. Add alt Attribute if Missing:
    If the alt attribute is missing, the code adds a default alt attribute (alt="Default alt text"). You can customize the default text or make it dynamic based on other criteria.
  4. Output the Modified Content:
    The modified content, with the updated <img> tags, is then echoed to the page.

4. Ensure Theme Compatibility

  • Make sure your theme supports ACF by having the necessary code in your functions.php file or the template file to check for ACF fields.

5. Additional Customizations and Tips

  • Dynamic Alt Text: Instead of a static “Default alt text,” you can add more dynamic logic to determine the alt text (e.g., use image filename, post title, etc.).
  • Optimize Performance: If you’re performing this operation multiple times on the same content, consider caching the result to improve performance.
  • Sanitization: Always sanitize the content using functions like esc_attr() and wp_kses_post() to ensure the output is safe.

Conclusion

By following these steps, you can check if an ACF WYSIWYG editor field has any images, add alt tags if missing, and display them properly on a page in WordPress. This approach provides flexibility to handle dynamic content and enhances SEO and accessibility by ensuring all images have descriptive alt text.