Declare inline background image in functions.php - php

Question

I'm not sure if this can be done as I cannot find anything to help me anywhere no matter how hard i try. I'm using Ajax to load to in posts on the press of the button. the posts that are loaded in are formatted by my function inside my functions.php. That all works perfetly,the issue i'm having is the background-image: property needs to be inline css so that it can pull the image from my custom field. This all works perfectly in the template file, however. no matter what I try the functions.php rejects my inline style for background image no matter what I try.
Here's my If statement in it's entirety:
if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();
if ($_SESSION["load_type"] == 'home')
{
$out .= '<div class="small-6 large-3 columns end thumb">
<div class="grid">
<figure class="effect-zoe">
'.get_the_post_thumbnail( get_the_ID(), $size, $attr ).'
<figcaption>
<h2>'.get_the_title().'</h2>
<hr class="light">
<p class="description">'.get_the_content().'</p>
</figcaption>
</figure>
</div>
</div>';
}
else
if ($_SESSION["load_type"] == 'category')
{
$out .= '<div class="small-6 large-6 columns end thumb under">
<div id="case">
<div class="th" id="element" >
<a class="fill-div" href="'. get_permalink($post->ID) .'"></a>
</div>
</div>
<div class="brief">
'.get_the_title().'
<p class="suppy">Supplier</p>
<p>'.get_the_excerpt().'</p>
<a class="more-btn" href="'. get_permalink($post->ID) .'">More</a>
</div>
</div>';
}
else
if ($_SESSION["load_type"] == 'product')
{
$out .= '<div class="small-6 large-3 columns">
<div class="small-6 large-12 columns end no-pad morepro" style="background-image: url(''.the_field(product_image).'')">
<a class="fill-div" href="'. get_permalink($post->ID) .'"></a>
</div>
<h2 class="product-load">'.get_the_title().'</h2>
</div>';
}
endwhile;
endif;
wp_reset_postdata();
die($out);
and heres the part of it that I'm having trouble with and crashes the whole site every time I try to load in a background-image:
if ($_SESSION["load_type"] == 'product')
{
$out .= '<div class="small-6 large-3 columns">
<div class="small-6 large-12 columns end no-pad morepro" style="background-image: url(' '.the_field(product-image).' ')">
<a class="fill-div" href="'. get_permalink($post->ID) .'"></a>
</div>
<h2 class="product-load">'.get_the_title().'</h2>
</div>';
}
enter code here
Can anyone see where I'm going wrong?

Answer 1

Change the following
style="background-image: url(' '.the_field(product-image).' ')"
into the
style="background-image: url('.the_field("product-image").')"
This should work if:
Your "product-image" is custom defined size (if its constant use it without quotes) - or edit your question and explain what it is.
the_field() function need to "return" value and not to echo it. I am mentioning this because by wordpress codex usually use "the_something()" function will not return value, it will just display something. If you want to to return a value it is usually "get_the_something()". It is important because it will break your json object (if that is what you are using on js side)
Example: the_content() vs get_the_content(), or get_the_title() vs the_title() etc...
Quotes within background-image should be optional by this.

Answer 2

if ($_SESSION["load_type"] == 'product'){
$image = the_field(product_image);
$out .= '<div class="small-6 large-3 columns">
<div class="small-6 large-12 columns end no-pad morepro" style="background-image: url('"'.$image.'"')">
<a class="fill-div" href="'. get_permalink($post->ID) .'"></a>
</div>
<h2 class="product-load">'.get_the_title().'</h2>
</div>';
}
and see if it works