CODEWITHSUNDEEP
wordpress
user9258693
user9258693

Reputation:

How to output a ACF Custom field in place of WordPress Featured Image

I am using ACF Advanced Custom Fields Plugin to create custom fields. I have a field which I would like to output in place of the default WordPress featured image. Basically, I'm replacing the default WordPress featured image functionality with the custom field. The custom field contains a piece of html code which contains 3 images - 1 background image and two images on top of the image (I'm using CSS to align them properly.) That's the reason I want to use the custom field option.

I really don't know how to solve this and I really hope that somebody has a solution.

Upvotes: 0

Views: 374

Answers (1)

Ali Qorbani
Ali Qorbani

Reputation: 1263

you have to add_filter to the post_thumbnail_html function

here is an example that you have to change the $html variable as you need

functions.php

add_filter('post_thumbnail_html', 'change_post_thumbnail_html', 10, 5);
function change_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr)
{
    global $post;
    $post_field_1 = get_field('first-image',$post->ID);
    $post_field_2 = get_field('second-image',$post->ID);

    $html = '<div class="acf-thumbnail_container">';
    $html .= '<div class="acf-first_thumbnail">';
    $html .= $post_field_1; // if it return an array you can use wp_get_attachment_image($post_field_1); to generate image
    $html .= '</div>';
    $html .= '<div class="acf-second_thumbnail">';
    $html .= $post_field_2;
    $html .= '</div>';
    $html .= '</div>';

    return $html;

}

Upvotes: 1

Related Questions