10. Champs de Contenu (Image, Fichier, WYSIWYG, Galerie) | Field Forge - Champs personnalisés, conçus pour la vitesse

Champs multimédias et de contenu riche qui stockent des références aux pièces jointes multimédias WordPress ou du HTML formaté.

Image

Le format de retour dépend de la configuration du champ. Le format le plus courant et recommandé est 'array'.

// 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' );

Fichier

Stocke une référence à une pièce jointe multimédia WordPress.

// 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">';
}

Éditeur WYSIWYG

Éditeur de texte enrichi qui retourne du HTML formaté.

$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>';
}

oEmbed (PRO)

Stocke une URL pour intégrer des médias (YouTube, Vimeo, Twitter, etc.).

$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 ] );

Galerie (PRO)

Stocke un tableau ordonné de pièces jointes d’images.

$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>';

—