[Resolved] Add custom fields (ACF) beside featured image of posts of a cetain category

Home Forums Support Add custom fields (ACF) beside featured image of posts of a cetain category

  • This topic has 5 replies, 2 voices, and was last updated 4 months ago by Elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1505025
    Heike

    Unfortunately, my PHP knowledge is not sufficient, so I kindly ask for your support.

    I have tried in vain to expand David’s solution here to display all fields with their values in posts of a certain category beside the featured image.
    This is, what I came up with so far:

    add_filter( 'generate_single_featured_image_html', 'featured_image_custom_columns',25,1 );
    
    function featured_image_custom_columns($image_html) {	
    if ( in_category ( 'test', $currentPost ) ) {
    // Get the Custom Fields
    $fields = get_fields();
    if( $image_html == '' ) {
            return $image_html;
        } else {
    	if( $fields) {
        echo '<div class="feature-grid"><div class="feature-item">' . $image_html . '</div><div class="feature-item"><div class="details"><h3>Details</h3><ul class="list">';
            foreach( $fields as $name => $value )  {
    			if(!$value == '') {
                echo '<li class="' . $name . '"><span class="label">' . $name . '</span><span class="value">' . $value . '</span></li>';
    			}
    		}
        echo '</ul></div></div></div>';
    		}
    }
    } else { 
    	return $image_html;
    }
    }
    

    The snippet generates an output of the desired fields, unfortunately not within the desired <div class="featured-image page-header-image-single"> but above it while this one remains empty.

    I am infinitely grateful for any help.

    #1505372
    Elvin
    Staff
    Customer Support

    Hi,

    Since you’ve already made the fields display, I believe you’re halfway done.

    Can you link us to the site in question? Perhaps the thing to do here is fix the display by applying the proper CSS on the classes you’ve added.

    A wise man once said:
    "Have you cleared your cache?"

    #1506675
    Heike

    Hi Elvin,

    thanks for your reply.

    I have just uploaded the local development environment to my server, you can find the URL in the private information.

    The following output can be found in the browser’s inspector (featured-grid wrapper, abbreviated):

    <div class="feature-grid">
    	<div class="feature-item"><img … class="attachment-full size-full" … ></div>
    	<div class="feature-item"><div class="…"> Here the ul-list, works as expected</div></div>
    </div>

    And on the next line you can find the empty div within which I wanted to output the featured-grid wrapper:

    <div class="featured-image  page-header-image-single ">
    </div>

    I’m afraid that nothing can be done with css here. It’s due to my rudimentary PHP knowledge: I don’t know how to write the function so that the output is inside the empty div. If someone could help me with that, I would be delighted.

    #1506935
    Elvin
    Staff
    Customer Support

    To clarify:

    You want the featured image to be included in the feature grid, having something like this as the output?

    <div class="featured-image page-header-image-single">
       <div class="feature-grid">
    	<div class="feature-item"><img … class="attachment-full size-full" … ></div>
    	<div class="feature-item"><div class="…"> Here the ul-list, works as expected</div></div>
       </div>
    </div>

    If this is the structure you want, try this one:

    add_filter( 'generate_single_featured_image_html', 'featured_image_custom_columns',25,1 );
    
    function featured_image_custom_columns($image_html) {	
    if ( in_category ( 'culture', $currentPost ) ) {
    // Get the Custom Fields
    $fields = get_fields();
    if( $image_html == '' ) {
    return $image_html;
    } else {
    	if( $fields) {
    	$modified_html = '<div class="feature-item">'.$image_html.'</div>';
            $append_image = '<div class="feature-grid">'.$modified_html.'
    			<div class="feature-item">
    				<div class="details">
    					<h3>Details</h3>
    					<ul class="list">';
            foreach( $fields as $name => $value )  {
    			if(!$value == '') {
                $append_image .= '<li class="' . $name . '"><span class="label">' . $name . '</span><span class="value">' . $value . '</span></li>';
    			}
    		}
        $append_image .= '</ul></div></div></div>';
    	}
    	
        return $append_image;
    }
    } else { 
    	return $image_html;
    }
    }

    Or do you want this?

    <div class="featured-image page-header-image-single">
       <img … class="attachment-full size-full" … >
       <div class="feature-grid">
    	<div class="feature-item"><div class="…"> Here the ul-list, works as expected</div></div>
       </div>
    </div>

    If this is the structure you want, you can try this:

    add_filter( 'generate_single_featured_image_html', 'featured_image_custom_columns',25,1 );
    
    function featured_image_custom_columns($image_html) {	
    if ( in_category ( 'culture', $currentPost ) ) {
    // Get the Custom Fields
    $fields = get_fields();
    if( $image_html == '' ) {
    return $image_html;
    } else {
    	if( $fields) {
        $append_image = '<div class="feature-grid">
    			<div class="feature-item">
    				<div class="details">
    					<h3>Details</h3>
    					<ul class="list">';
            foreach( $fields as $name => $value )  {
    			if(!$value == '') {
                $append_image .= '<li class="' . $name . '"><span class="label">' . $name . '</span><span class="value">' . $value . '</span></li>';
    			}
    		}
        $append_image .= '</ul></div></div></div>';
    	}
        return $image_html.$append_image;
    }
    } else { 
    	return $image_html;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1507635
    Heike

    Elvin, you are my hero of the day!

    Your support is really sensational.
    Both snippets work like a dream, with solution # 1 being the one I wanted.
    Thank you for your help. I would probably have pushed the variables around for ages without success!

    #1508458
    Elvin
    Staff
    Customer Support

    We appreciate the kind words.

    No problem. Always glad to help. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.