Post and category image background

• PauloNatal

• March 2, 2016 at 10:40 pm

Hi, great plugin first of all.

I am trying to add functionality for adding posts, pages and categories background images. I think I am almost getting this to work but I am not sure what I am missing.

So I have created an image field that only shows in posts, pages and category pages. When I select an image in this field I want it to show as the background image for this post, page or category in the front end. This will happen through the following function:

function my_theme_body_image_bg() {
global $post;

// the handle of my stylesheet
$handle = 'main-styles';

// background image field with the image url
$bg_image = get_field('background_image');

$css = "body { background-image: url('$bg_image'); }";
wp_add_inline_style( $handle, $css );
}
add_action( 'wp_enqueue_scripts', 'my_theme_body_image_bg' );

So, here I get the url of the image chosen on the background image field of posts, pages and category pages and make it the body background-image for that page on the front end.

This approach should work but so far I haven’t had any luck. Would really appreciate any help on getting this to work.

Thanks

• John Huebner

• March 2, 2016 at 11:28 pm

the ACF functions are only useful inside “The Loop” like many WP functions. You will need to supply the post ID when using it in this manner, this will be more complicated because you’re also trying to use the same function on a category page. global $post won’t do you much good here.

$queried_object = get_queried_object();
if (isset($queried_object->ID)) {
  $post_id = $queried_object->ID;
} elseif (isset($queried_object->term_id)) {
  $post_id = $queried_object->taxonomy.'_'.$queried_object->term_id;
}

then when getting fields

get_field('field_name', $post_id);

• PauloNatal

• March 3, 2016 at 12:55 am

Great! Thanks a lot.

This works to show the background images but now I am having another issue related to this and was wondering if you could help. I am using something else for my theme options. I have a body background image option there. The problem I am having is that that background image set on my theme options overrides background images set on individual pages with ACF. I am wondering what would be the best way to override that background image set on my theme options with the background image set on individual pages, posts and categories with ACF. So, when I have a background image set on individual pages it would override the theme options one and when not the theme options one is the one visible. Is this something you can help with?

• PauloNatal

• March 3, 2016 at 2:31 am

I would imagine something like the bellow would resolve this issue but it doesn’t:

    if ( get_field('background_image') ) {

    	// set this to the handle of one of your stylesheets
    	$handle = 'main-styles';

	    $queried_object = get_queried_object();

	    if (isset($queried_object->ID)) {
	    	$post_id = $queried_object->ID;
	    } else if (isset($queried_object->term_id)) {
	    	$post_id = $queried_object->taxonomy.'_'.$queried_object->term_id;
		}

    	$bg_image = get_field('background_image', $post_id);
    	$css = "body { background-image: url('$bg_image')!important; }";
    	wp_add_inline_style( $handle, $css );
    } 

• John Huebner

• March 3, 2016 at 6:21 am

I think you’d need to bundle it all into one function.

$bg_image = get_field('background_image', $post_id);
if (!$bg_image) {
  // get the background image from options page
}
$css = "body { background-image: url('$bg_image')!important; }";
wp_add_inline_style( $handle, $css );

But I may be misunderstanding how you’re adding the image that’s part of theme options.