Use custom field as body background image throughout site

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user wanted to use custom backgrounds for their posts based on the custom field of the post.

Solution:

This would need some modifications in the theme field to load the background image itself.

You can use an inline style to achieve this.


style="background-image:url('<?php echo do_shortcode("[wpv-post-field id='.$id.' name='background-img' background-size='cover' size='full' url='true']")?>')"

Just ensure that it is using correct field name for the custom field and this should work for you.

So an example usage would be.


<body style="background-image:url('<?php echo do_shortcode("[wpv-post-field id='.$id.' name='background-img' background-size='cover' size='full' url='true']")?>')"> 


</body>

Where i'm applying the custom background around the body tag.

This support ticket is created 5 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	14:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Jamaica (GMT-05:00)

Tagged: Setting up custom fields, Types plugin

This topic contains 17 replies, has 3 voices.

Last updated by sietseR 5 years, 9 months ago.

Assisted by: Shane.

← 1 2

Author

Posts

April 25, 2019 at 7:15 am #1235429

sietseR

Hi Shane,

Thanks, but it is still not working.

My header.php file now looks like this:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php do_action( 'fl_head_open' ); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<?php echo apply_filters( 'fl_theme_viewport', "<meta name='viewport' content='width=device-width, initial-scale=1.0' />\n" ); ?>
<?php echo apply_filters( 'fl_theme_xua_compatible', "<meta http-equiv='X-UA-Compatible' content='IE=edge' />\n" ); ?>
<link rel="profile" href="<em><u>hidden link</u></em>" />
<?php

wp_head();

FLTheme::head();

?>
</head>
<body <?php body_class(); ?> itemscope="itemscope" itemtype="<em><u>hidden link</u></em>">
<?php

FLTheme::header_code();

do_action( 'fl_body_open' );


$id = get_the_ID();

?>
<div class="fl-page" style="background-image:url('<?php echo do_shortcode("[wpv-post-field id='.$id.' name='background-img' background-size='cover' size='full' url='true']")?>')" >
	<?php

	do_action( 'fl_page_open' );

	FLTheme::fixed_header();

	do_action( 'fl_before_top_bar' );

	FLTheme::top_bar();

	do_action( 'fl_after_top_bar' );
	do_action( 'fl_before_header' );

	FLTheme::header_layout();

	do_action( 'fl_after_header' );
	do_action( 'fl_before_content' );

	?>
	<div class="fl-page-content" itemprop="mainContentOfPage">

		<?php do_action( 'fl_content_open' ); ?>

I've added

$id = get_the_ID();

and i added the code to the fl-page div. Through the dev-tools I can see that there is a reference to the background-image, but it only shows

background-image: url((unknown));

So it looks like it can not find the image. What am I doing wrong?

April 25, 2019 at 9:59 pm #1235896

Shane

Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hello,

I tried to log into the site using FTP so that I can modify the theme files but the FTP don't seem to work.

Could you try the FTP on your end and let me know as I suspect some debugging is needed because this code should work.

Thanks,
Shane

April 26, 2019 at 10:47 am #1236096

sietseR

I got it! All I had to do was add "wpcf-" in front of the slug.

name='wpcf-background-img'

Thanks for the assistance!

← 1 2