Responsive Image function for ACF Image Array fields - SUPER OPTIMIZED.

responsive-images.php

/**
 * Responsive Image function for ACF Image Array fields - SUPER OPTIMIZED.
 *
 * This function is specifically designed for ACF Image Array format.
 * Ensures maximum performance with clean, simple code.
 *
 * @param array $image_mobile ACF Image Array field
 * @param array $image_tablet ACF Image Array field
 * @param array $image_desktop ACF Image Array field
 * @param string $alt_text Alt text for accessibility (optional - auto-extracted)
 * @param string $class Optional CSS class for the picture element
 * @param string $loading Loading attribute (lazy, eager, auto)
 * @param array $media_queries Custom media queries array
 * @return void
 */
function prefix__responsive_image($image_mobile, $image_tablet, $image_desktop, $alt_text = '', $class = '', $loading = 'lazy', $media_queries = array())
{
    // Default media queries
    $default_media_queries = array(
        'desktop' => '(min-width: 1024px)',
        'tablet' => '(min-width: 768px) and (max-width: 1023px)',
        'mobile' => '' // No media query for mobile (fallback)
    );

    // Merge with custom media queries if provided
    $media_queries = array_merge($default_media_queries, $media_queries);

    // Extract URLs and alt text from Image Arrays
    $mobile_url = !empty($image_mobile['url']) ? esc_url($image_mobile['url']) : '';
    $tablet_url = !empty($image_tablet['url']) ? esc_url($image_tablet['url']) : '';
    $desktop_url = !empty($image_desktop['url']) ? esc_url($image_desktop['url']) : '';

    // Apply fallback logic for URLs
    if (empty($mobile_url) && !empty($desktop_url)) {
        $mobile_url = $desktop_url;
    }
    if (empty($tablet_url) && !empty($desktop_url)) {
        $tablet_url = $desktop_url;
    }
    if (!empty($desktop_url) && empty($mobile_url) && empty($tablet_url)) {
        $mobile_url = $tablet_url = $desktop_url;
    }

    // If no images are available, return early
    if (empty($desktop_url) && empty($mobile_url) && empty($tablet_url)) {
        return;
    }

    // Set fallback image URL
    $fallback_url = !empty($mobile_url) ? $mobile_url : $desktop_url;

    // Get alt text with priority: manual > desktop > mobile > tablet
    if (empty($alt_text)) {
        $alt_text = $image_desktop['alt'] ?? $image_mobile['alt'] ?? $image_tablet['alt'] ?? '';
    }

    // Sanitize attributes
    $alt_text = esc_attr($alt_text);
    $class_attr = !empty($class) ? ' class="' . esc_attr($class) . '"' : '';
    $loading_attr = ' loading="' . esc_attr($loading) . '"';

    // Generate the picture element
    echo '<picture' . $class_attr . '>';

    // Desktop source
    if (!empty($desktop_url)) {
        echo '<source media="' . esc_attr($media_queries['desktop']) . '" srcset="' . $desktop_url . '">';
    }

    // Tablet source
    if (!empty($tablet_url)) {
        echo '<source media="' . esc_attr($media_queries['tablet']) . '" srcset="' . $tablet_url . '">';
    }

    // Fallback img tag
    echo '<img src="' . $fallback_url . '" alt="' . $alt_text . '"' . $loading_attr . '>';

    echo '</picture>';
}

/**
 * Simplified responsive image function with ACF group field.
 *
 * This function is designed to work with an ACF group field containing the three image subfields.
 *
 * @param array $image_group ACF group field containing mobile, tablet, desktop image subfields
 * @param string $alt_text Alt text for accessibility
 * @param string $class Optional CSS class for the picture element
 * @param string $loading Loading attribute (lazy, eager, auto)
 * @return void
 */
function prefix__responsive_image_group($image_group, $alt_text = '', $class = '', $loading = 'lazy')
{
    if (empty($image_group) || !is_array($image_group)) {
        return;
    }

    // Extract images from group field
    $image_mobile = isset($image_group['image_mobile']) ? $image_group['image_mobile'] : '';
    $image_tablet = isset($image_group['image_tablet']) ? $image_group['image_tablet'] : '';
    $image_desktop = isset($image_group['image_desktop']) ? $image_group['image_desktop'] : '';

    // Call the main function
    prefix__responsive_image($image_mobile, $image_tablet, $image_desktop, $alt_text, $class, $loading);
}