Background Image for element in Category loop

• NuriaAS

• July 10, 2021 at 2:03 am

Could someone help me with this problem?
I would like to incorporate
to this element
echo ‘<div class = “menu_section_parallax” style = “background-image: url (‘ ‘)”> </div>’;
a custom image field that I created for each category.
This element is inside a loop that shows each category with its posts.
I am not an expert in WordPress or PHP and I have not found a way to do it.

<?php 
$cat_args=array(
    'hierarchical' => 0,
    'orderby' => 'term_order',
    'order' => 'DESC',
    
);
$categories = get_categories($cat_args);

foreach($categories as $category) {
    $query_args = array(
        'category_name'  => $category->slug,
    );
    
    $posts = new WP_Query($query_args);
    echo '<article class="menu_section">';
    echo '<div class="menu_section_text menu_section_text-left">';
    echo '<h3 class="menu_section_text_title">' . $category->cat_name.'</h3> ';
    while(  $posts->have_posts() ) :
        $posts->the_post();
    ?>
        <div class="menu_section_text_dishes">
            <div class="menu_section_text_dishes_group">
                <h4 class="menu_section_text_dishes_group_title"><?php the_field( 'nombre_plato' ); ?></h4>
                <h4 class="menu_section_text_dishes_group_price"><?php the_field( 'precio_plato' ); ?></h4>
            </div>
            <div class="menu_section_text_dishes_group_line"></div>
            <p class="menu_section_text_description"><?php the_field( 'descripcion_plato' ); ?>

        </div>
    <?php endwhile;
    echo '</div>';
    echo '<div class="menu_section_parallax" style="background-image: url('')"></div>';
    echo '</article>';
}
wp_reset_postdata();
?>

• John Huebner

• July 10, 2021 at 11:08 am

Where are the custom fields and where is the image uploaded? to each category or somewhere else?

• NuriaAS

• July 12, 2021 at 3:20 am

Hi!
I´ve made a custom filed for taxonomy term as category. In fact the image input appears correctly in each category and I´ve uploaded images for them.
My problem is that I dont´t find a way to show the images in this part of the code:
echo ‘<div class=”menu_section_parallax” style=”background-image: url(”)”></div>’;
My idea was to put the custom field code in the background-image url
I´ve tried several solutions I found online but anything works, probably because I´ve made syntax errors or maybe because my approach is wrong.

• John Huebner

• July 12, 2021 at 3:46 am

You need to supply the term for ACF to get the value

get_field('image_field_name', $category);

https://www.advancedcustomfields.com/resources/adding-fields-taxonomy-term/

• NuriaAS

• July 12, 2021 at 4:24 am

Thank so much for your answers.

Anyway, is this correct?

$imgcategory = get_field('imagen_de_categoria', $category);

    echo '<div class="menu_section_parallax" style="background-image: url( '.$imgcategory. ' )"></div>';

Or this?
echo '<div class="menu_section_parallax" style="background-image: url( '.get_field('imagen_de_categoria', $category). ' )"></div>';

Because the images are not showing

• NuriaAS

• July 12, 2021 at 8:34 pm

Thanks ohn Huebner for your answers.
I finally find a solution!!!
The code that worked is this:

$imgcategory = get_field( 'imagen_de_categoria', 'category_'. $category->term_id ) ;
    echo '<div class="menu_section_parallax" style="background-image: url( ' .$imgcategory. ' )"></div>';

I´m not sure why it needs the ‘category_’ parameter: if you know it will be very helpfull for the future (my learning future) if you can explain it to me.
If you can´t, thank you anyway!!