php - ACF background-color per post in a WordPress loop

I have the following loop in WordPress:

    <div class="container">
    <?php

    $news = array(
        'post_type' => 'post',
        'category_name' => 'angebote',
        'order' => 'ASC',
        'posts_per_page' => -1
    );


    $wp_query = new WP_Query($news);
    if (have_posts()) : while (have_posts()) :
        the_post(); ?>

        <div class="main-columns">
            <div class="card-content">
                <div class="main-content liste"
                     style="background-image: url(<?php the_field('background-image'); ?>
                             )">
                    <h2><?php the_title(); ?></h2>
                    <div class="row"><?php the_content(); ?></div>
                    <div class="row content-button">
                        <a href="<?php the_permalink(); ?>">
                            <p>MEHR</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <style>
            .card-container .main-content:hover {
                background: <?php echo get_field('background-farbe' ); ?>;
                background-blend-mode: multiply;
            }
        </style>

    <?php var_dump($postid); ?>
    <?php endwhile; ?>

    <?php endif; ?>
    <?php wp_reset_query();
    ?>


</div>

As can be seen, I have the following CSS, what it does is add a color assigned to each post with ACF.

     <style>
        .card-container .main-content:hover {
            background: <?php the_field('background-farbe' ); ?>;
            background-blend-mode: multiply;
        }
    </style>

The problem is that I only get the color of the first post on all. Could someone help me solve the problem?, why do not I see it

I have the following loop in WordPress:

    <div class="container">
    <?php

    $news = array(
        'post_type' => 'post',
        'category_name' => 'angebote',
        'order' => 'ASC',
        'posts_per_page' => -1
    );


    $wp_query = new WP_Query($news);
    if (have_posts()) : while (have_posts()) :
        the_post(); ?>

        <div class="main-columns">
            <div class="card-content">
                <div class="main-content liste"
                     style="background-image: url(<?php the_field('background-image'); ?>
                             )">
                    <h2><?php the_title(); ?></h2>
                    <div class="row"><?php the_content(); ?></div>
                    <div class="row content-button">
                        <a href="<?php the_permalink(); ?>">
                            <p>MEHR</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <style>
            .card-container .main-content:hover {
                background: <?php echo get_field('background-farbe' ); ?>;
                background-blend-mode: multiply;
            }
        </style>

    <?php var_dump($postid); ?>
    <?php endwhile; ?>

    <?php endif; ?>
    <?php wp_reset_query();
    ?>


</div>

As can be seen, I have the following CSS, what it does is add a color assigned to each post with ACF.

     <style>
        .card-container .main-content:hover {
            background: <?php the_field('background-farbe' ); ?>;
            background-blend-mode: multiply;
        }
    </style>

The problem is that I only get the color of the first post on all. Could someone help me solve the problem?, why do not I see it

• php
• loop
• advanced-custom-fields

Share Improve this question edited Oct 31, 2018 at 10:16 Krzysiek Dróżdż 25.6k99 gold badges5353 silver badges7474 bronze badges asked Oct 31, 2018 at 9:15 Dario B.Dario B. 1551010 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Well, your problem lies in your CSS code.

    .card-container .main-content:hover {
        background: <?php the_field('background-farbe' ); ?>;
        background-blend-mode: multiply;
    }

It uses class only, so it will be applied to every element with that class. Multiplying the same code with different colors won't change anything - only one such rule will be active.

So how to solve this?

You have to assign unique identifiers to your posts:

<div class="container">
    <?php
        $news = array(
            'post_type' => 'post',
            'category_name' => 'angebote',
            'order' => 'ASC',
            'posts_per_page' => -1
        );

        $wp_query = new WP_Query($news);
        while (have_posts()) :
            the_post();
    ?>
    <div class="main-columns">
        <div class="card-content" id="card-<?php echo esc_attr( get_the_ID() ); ?>">
            <div class="main-content liste"
                 style="background-image: url(<?php the_field('background-image'); ?>
                         )">
                <h2><?php the_title(); ?></h2>
                <div class="row"><?php the_content(); ?></div>
                <div class="row content-button">
                    <a href="<?php the_permalink(); ?>">
                        <p>MEHR</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <style>
        #card-<?php echo esc_attr( get_the_ID() ); ?> .main-content:hover {
            background: <?php echo get_field('background-farbe' ); ?>;
            background-blend-mode: multiply;
        }
    </style>
    <?php endwhile; ?>
    <?php wp_reset_query(); ?>
</div>

PS. You don't need any if statements in your loop, because you don't do anything outside while loop ;)