0

I've created an image field using Image URL via the ACF plugin. This field appears across my pages. This field enables admin to change the background image for a selected class.

Here's the code I have inserted between the <head></head> tags:

<?php
    while ( have_posts() ) : the_post();
        $background = get_field('background'); ?>
        <style>
            .site-header {
            background: url(<?php echo $background; ?>) no-repeat center;
            background-size: cover;
            }
        </style>
    <?php endwhile; // end of the loop.  
 ?>

The url appears blank via the source. What am I doing wrong? I understand that ACF doesn't work outside of the loop which is why I've added a loop to the <head>.

Here's the ACF export:

if( function_exists('acf_add_local_field_group') ):

acf_add_local_field_group(array (
    'key' => 'group_560e6c0620487',
    'title' => 'Header Background',
    'fields' => array (
        array (
            'key' => 'field_560e6c0ed9ca8',
            'label' => 'Background Image',
            'name' => 'background',
            'type' => 'image',
            'instructions' => '',
            'required' => 0,
            'conditional_logic' => 0,
            'wrapper' => array (
                'width' => '',
                'class' => '',
                'id' => '',
            ),
            'return_format' => 'url',
            'preview_size' => 'thumbnail',
            'library' => 'all',
            'min_width' => '',
            'min_height' => '',
            'min_size' => '',
            'max_width' => '',
            'max_height' => '',
            'max_size' => '',
            'mime_types' => '',
        ),
    ),
    'location' => array (
        array (
            array (
                'param' => 'page_type',
                'operator' => '==',
                'value' => 'top_level',
            ),
        ),
    ),
    'menu_order' => 0,
    'position' => 'normal',
    'style' => 'default',
    'label_placement' => 'top',
    'instruction_placement' => 'label',
    'hide_on_screen' => '',
    'active' => 1,
    'description' => '',
));

endif;

closed as off-topic by Howdy_McGee, Mark Kaplun, Pieter Goosen, Sisir, Mayeenul Islam Oct 20 '15 at 7:54

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • Is the rest of the code rendering within your loop? In other words, when you view the source do you see .site-header { background: url() no-repeat center; } or is your whole style block missing? – dswebsme Oct 2 '15 at 16:20
  • I'm seeing .site-header { background: url() no-repeat center; }. – Sam Oct 2 '15 at 16:26
4

In the header.php template, you cannot access the $post variable.

So you will have to map it using $wp_query, as mentioned on ACF forum here.

Try this:

<?php 
global $wp_query;  
$post = $wp_query->post;
$background = get_field('background', $post->ID); 
?>

<style>
    .site-header {
        background: url(<?php echo $background; ?>) no-repeat center;
        background-size: cover;
    }
</style>
  • #facepalm I guess mentioning the use of global scope within my answer wasn't enough =] Well played @jsonUK. – dswebsme Oct 2 '15 at 20:27
1

You don't have to add a loop in the header to get the desired result. This should work outside the loop according to the documentation:

<?php
// using $post from the global scope (not within loop) - your setup may vary
$background = get_field('background', $post->ID);
?>

<style>
    .site-header {
        background: url(<?php echo $background; ?>) no-repeat center;
        background-size: cover;
    }
</style>

The code example you provided is using the proper ACF calls. This example just removes the loop to help clean things up a bit.

If you still see a blank URL in that space double check to ensure the field name is correctly named "background" to rule out the possibility of typos. Also be sure to clear any caching plugins or local cache that may be sticking (CSS likes to stick around).

If this is still giving you trouble perhaps you could export the field via ACF Export and paste that into your original question so I can assist further.

  • Thank you. I tried the above and I'm still getting a blank URL. I've updated my question with the ACF export. – Sam Oct 2 '15 at 16:43
  • I used the export and was able to create the field, assign an image and render that image in my header outside of the loop using the code above. The only differences between your export any my own local test is that I tested directly on a native WordPress page. It appears you are working on a custom post type called "top_level" though. The "location" section of your export shows "page_type" of "top_level" where mine shows "post_type" of "page" ... not sure why the difference in labels or if it makes a difference. – dswebsme Oct 2 '15 at 17:29
  • Thank you for going to the trouble of testing this, I really appreciate it :) – Sam Oct 2 '15 at 17:41
  • 1
    No problem at all. Best of luck resolving the issue. Perhaps stripping your site down (disabling plugins, swapping themes, etc.) might help narrow down the issue further. Your code is syntactically correct so the issue likely lies elsewhere in the execution. – dswebsme Oct 2 '15 at 17:45
1

You don't have to use get_field function inside the wp loop. If you use get_field before wp_head(), so you need to define post id. Your code must be something like this:

$bg = get_field('fieldname', $post->ID):
  • Simplest and best answer!!! – Taylorsuk Sep 8 '17 at 20:53
0

What is ACF returning? An object? Or a URL? With an object, you have to get the correct URL/size out of the object.

http://www.advancedcustomfields.com/resources/image/

--

Sorry, got a bit carried away increasing my SO-involvement :) Using the post ID is indeed necessary, depending on where you use get_field

  • You may want to consider deleting your answer and using the comments section instead. ACF is returning an image URL. – Sam Oct 2 '15 at 15:35
  • Users with less than 100 rep aren't allowed to leave comments so responding with an answer was likely his only option. That being said, I would recommend he modify the answer given the new information you provided. – dswebsme Oct 2 '15 at 16:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.