[Support request] How to add ACF Star rating in loop

[Martin]

Hello!

I am converting my Elementor Pagebuilder site to GeneratePress + GenerateBlocks and I have issues with adding star ratings.
I have googled and googled but I can’t find a good guide.

I am trying to get star ratings in the loop on this page:
https://www.spelbladet.nu/casino/

Example on my elementor site (Font Awesome stars):
https://www.norsskencasino.se/casino3/

Would it be possible to give me some guidance? Many thanks!

[Ying]

Hi Martin,

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

[Martin]

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

[Fernando]

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.

[Martin]

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

Thanks

[David]

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

[Martin]

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

[Fernando]

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?

[Martin]

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

Thanks!

[Fernando]

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

[Martin]

Attached new login details. Thanks! 🙂

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

[Martin]

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!

[Ying]

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

[Martin]

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

Thanks!

[David]

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

[Author]

Posts