How to add ACF Star rating in loop

Hi Martin,

You should be able to use a headline block to pull the star rating.

Hi Ying, sorry. This is about the loop block and ACF/Custom post types.

Hi Martin,

Have you tried retrieving the ACF Star rating through a GB Headline Block in your Loop? Reference: https://docs.generateblocks.com/article/headline-overview/#dynamic-data

You just need to set the Content source to Post Meta, and the field name to the one you set for your star rating post meta.

Could you please send me an example?
I can't find anything on converting a meta data value "5" into ⭐⭐⭐⭐⭐

Thanks

Hi there,

try this PHP Snippet:

add_filter( 'render_block', function( $block_content, $block ) {
	
    if (
        !is_admin() 
        && ! empty( $block['attrs']['className'] )
        && 'star-bar' === $block['attrs']['className']
    ){
        // set your ACF Field value
        $value = get_field('your_acf_field');

        $prefix = 'star-bar-';
        $uniqueClass = uniqid($prefix);
        $percentage = 100 * $value['stars'] / 5;
        $block_content = '<span class="'.$uniqueClass.'">★★★★★</span>
        <style>
        .'.$uniqueClass.' {
            background: linear-gradient(90deg, '. $value['color'] . ' ' . $percentage .'%, rgba(0,0,0,0) '. $percentage.'%);
            color: rgba(0,0,0,.2);
            background-clip: text;
            -webkit-background-clip: text;
            color: rgba(0,0,0,.2);
        }
        </style>';
    }
    
    return $block_content;

}, 10, 2 );

In the code, update the ACF field name here: $value = get_field('your_acf_field');

Then in the query loop block add a Headline block, with just some static text, and in Advanced > Additional CSS Class(es) add: star-bar

Thanks for the help! But I get with that snippet.

"The code snippet you are trying to save produced a fatal error on line 24: syntax error, unexpected token "}"

Could you check, please?

Many thanks

Hi Martin,

I corrected the syntax error here: https://generatepress.com/forums/topic/how-to-add-acf-star-rating-in-loop/#post-2495520

Can you try the updated code?

Still no stars, even tho the snippet didn't give any error this time.

Thanks!

Can you provide the login page to your site? The one previously provided seems to not be working anymore.

Attached new login details. Thanks! :)

The ACF field for the rating values 1-5 is called "ranking"

When I add "star-bar" as a CSS class on the header, the whole page goes blank while published.

I have tried this one as well, without any luck.
https://wpdevdesign.com/acf-star-rating-in-wordpress/

Any help would be appreciated!

where can I see the headline block which is pulling the ranking meta?

You can see the headline block here:
https://imgur.com/a/f5ZMDTW

Thanks!

Is that inside a query loop ? Or a GP Block Element Content Template ?