Add image as background-image inline style

• kmiller

• May 17, 2017 at 2:04 am

I have a custom taxonomy with an ACF Image Upload in it. The return value is an Image URL. My end goal is to loop through the categories and display each category name with the image as the background.

<ul id="menu-categories">
     <?php
         $categories = get_categories( array(
         'taxonomy' => 'cck_menu_categories',
         'orderby' => 'id',
         'title_li' => '',
         'hide_empty' => true,
     ) ); 
          
     foreach( $categories as $category ) {
         $image = get_field('cck_menu_category_image', $category->term_id );  
     ?> 
     <li>
         <a href="<?php echo esc_url( get_category_link( $category->term_id ) );?>" style="background: pink url('<?php echo the_field( $image ); ?>');">
            <?php echo $category->cat_name; ?>
         </a>
     </li> 
     <?php } ?> 
    </ul>

• John Huebner

• May 24, 2017 at 10:31 am

The value of $post_id depends on what version of ACF you are using.

In ACF 4 or < 5.5.0

$image = get_field('cck_menu_category_image', $category->taxonomy.'_'.$category->term_id );

In ACF >= 5.5.0 you can use the above or you can use

$image = get_field('cck_menu_category_image', 'term_'.$category->term_id );

I think that you might also be able to use (but I’m not sure)

$image = get_field('cck_menu_category_image', $category);