10. Content Fields (Image, File, WYSIWYG, Gallery)

// return_format = 'array' (default, recommended)
$image = get_field( 'photo' );
/*
Returns:
[
    'ID'     => 55,
    'url'    => 'https://example.com/wp-content/uploads/photo.jpg',
    'width'  => 1200,
    'height' => 800,
    'alt'    => 'A scenic view',
    'title'  => 'Mountain Photo',
    'sizes'  => [
        'thumbnail'    => 'https://.../photo-150x150.jpg',
        'medium'       => 'https://.../photo-300x200.jpg',
        'large'        => 'https://.../photo-1024x683.jpg',
    ],
]
*/
if ( $image ) : ?>
    <img src="<?php echo esc_url( $image['url'] ); ?>"
         alt="<?php echo esc_attr( $image['alt'] ); ?>"
         width="<?php echo esc_attr( $image['width'] ); ?>"
         height="<?php echo esc_attr( $image['height'] ); ?>">
<?php endif;

// Responsive image with srcset using array format
if ( $image ) :
    echo wp_get_attachment_image( $image['ID'], 'large', false, [
        'class'   => 'responsive-img',
        'loading' => 'lazy',
    ] );
endif;

// return_format = 'url'
$image_url = get_field( 'photo' );
// Returns: 'https://example.com/wp-content/uploads/photo.jpg'
echo '<div style="background-image: url(' . esc_url( $image_url ) . ');"></div>';

// return_format = 'id'
$image_id = get_field( 'photo' );
// Returns: 55
echo wp_get_attachment_image( $image_id, 'large' );

// return_format = 'array' (default)
$file = get_field( 'document' );
/*
Returns:
[
    'ID'       => 60,
    'url'      => 'https://example.com/wp-content/uploads/doc.pdf',
    'filename' => 'doc.pdf',
    'title'    => 'Annual Report',
    'filesize' => 1048576,
    'mime_type'=> 'application/pdf',
]
*/
if ( $file ) : ?>
    <a href="<?php echo esc_url( $file['url'] ); ?>" download class="download-link">
        Download <?php echo esc_html( $file['filename'] ); ?>
        <span class="filesize">(<?php echo size_format( $file['filesize'] ); ?>)</span>
    </a>
<?php endif;

// Embed PDF inline
$file = get_field( 'pdf_document' );
if ( $file && $file['mime_type'] === 'application/pdf' ) {
    echo '<embed src="' . esc_url( $file['url'] ) . '" type="application/pdf" width="100%" height="600px">';
}

$content = get_field( 'body_content' );
// Returns: HTML string with wpautop applied

echo '<div class="rich-content">' . $content . '</div>';

// Strip tags for excerpts
$content = get_field( 'body_content' );
$excerpt = wp_trim_words( wp_strip_all_tags( $content ), 30 );
echo '<p class="excerpt">' . esc_html( $excerpt ) . '</p>';

// Check if content is empty (WYSIWYG can return empty <p> tags)
$content = get_field( 'body_content' );
if ( $content && strlen( trim( strip_tags( $content ) ) ) > 0 ) {
    echo '<div class="content">' . $content . '</div>';
}

$embed = get_field( 'video_url' );
// Returns: WordPress-rendered embed HTML (iframe/script for the provider).
// Falls back to the raw URL string when the provider can't be resolved
// (e.g., private video, network issue, or unsupported host).

echo '<div class="video-wrapper">' . $embed . '</div>';

// Need custom dimensions? Re-resolve from the stored URL via the field object
$obj = get_field_object( 'video_url' );
echo wp_oembed_get( $obj['value'] ?? '', [ 'width' => 800, 'height' => 450 ] );

$images = get_field( 'photo_gallery' );
// return_format = 'array': Returns array of image arrays
// return_format = 'url': Returns array of URL strings
// return_format = 'id': Returns array of attachment IDs

// Basic gallery grid
if ( $images ) : ?>
    <div class="gallery" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
        <?php foreach ( $images as $img ) : ?>
            <figure>
                <img src="<?php echo esc_url( $img['sizes']['medium'] ?? $img['url'] ); ?>"
                     alt="<?php echo esc_attr( $img['alt'] ); ?>"
                     loading="lazy">
            </figure>
        <?php endforeach; ?>
    </div>
<?php endif;

// Gallery count
$images = get_field( 'photo_gallery' );
$count = $images ? count( $images ) : 0;
echo '<p>' . $count . ' photos</p>';