0

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">
                                <a href="'. get_permalink($post->ID) .'">'.get_the_title().'</a>    
                                <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?

Addzy
  • 664
  • 1
  • 6
  • 16

2 Answers2

4

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:

  1. Your "product-image" is custom defined size (if its constant use it without quotes) - or edit your question and explain what it is.
  2. 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.

Community
  • 1
  • 1
cool
  • 3,225
  • 3
  • 33
  • 58
  • Thanks for the help but it still returns this in the log `Uncaught Error: Syntax error, unrecognized expression: http://fireproductsearch.com/dev/wp-content/uploads/2015/08/4165880_scbaspa…http://fireproductsearch.com/dev/wp-content/uploads/2015/08/airxpress2.jpg
    `
     – Addzy Aug 13 '15 at 14:08
  • I've worked out what it's doing, the ajax is loading in 4 posts, and when we place that backgroundimage in, it's pulling the image urls from all 4 posts into one line, why it's doing that I have no idea – Addzy Aug 13 '15 at 14:11
  • As i mentioned, you need to fetch variable not to display it. You are echoing image variable before you are returning the content. In order for that to work you need to have a function which will "return" product image and not echo it. Do you have the function called "get_the_field" or something similar within the plugin you are using. – cool Aug 13 '15 at 14:12
  • There's a get_field fucntion but every time it tied that it crashes – Addzy Aug 13 '15 at 14:17
  • 1
    Well point is this. Answer above is more then valid. Where you are using "the_field()" function, you need to use function which will return value instead of display it (or use output buffering functions just to fetch that variable which i dont recommend at all) Which plugin you are using? I mean, what is the plugin which is using "the_field()" function? – cool Aug 13 '15 at 14:20
  • The plugin is called 'Advanced Custom Fields' – Addzy Aug 13 '15 at 14:23
  • If I use get_field do I then echo it? – Addzy Aug 13 '15 at 14:23
  • http://www.advancedcustomfields.com/resources/the_field/ As you can see based on the description of that function, that function will display the value and will not return it. Also i cannot see "get_the_field" function at all here?? You should be able to use "get_field_object" and then pick the value from array which that function returns. (http://www.advancedcustomfields.com/resources/get_field_object/) – cool Aug 13 '15 at 14:26
  • "If I use get_field do I then echo it?" => If you are concatenating within the $out why do you need to echo it? That is the why you are having an issue in first place. – cool Aug 13 '15 at 14:30
  • Here is the documentation for get_field http://www.advancedcustomfields.com/resources/get_field/ if i use it doesnt display anything – Addzy Aug 13 '15 at 14:51
  • Did you check the documentation? "Please note the type of variable returned is relative to the field type." What kind of field you are using. What kind of parameters you need to pass in order to get what you need etc... – cool Aug 13 '15 at 14:54
  • 1
    Thank you, with your help, eventually we have it, needed to be like this `style="background-image: url('.get_field("product_image", false, true).')"` thanks for your help, even if i was frustrating, I appreciate it – Addzy Aug 13 '15 at 15:07
0
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

Meenesh Jain
  • 2,532
  • 2
  • 19
  • 29
  • no i get this i the log `Uncaught Error: Syntax error, unrecognized expression: http://fireproductsearch.com/dev/wp-content/uploads/2015/08/3112011122511-a….jpghttp://fireproductsearch.com/dev/wp-content/uploads/2015/08/Propak.jpg
    `
     – Addzy Aug 13 '15 at 13:38
  • what is the "product_image"? Is that variable? If it is, place $ in front. From perspective of issue with quotes this answer is good. – cool Aug 13 '15 at 13:52
  • That takes the whole site down and gives us a white screen – Addzy Aug 13 '15 at 13:52
  • product_image is constant, i supposed – Meenesh Jain Aug 13 '15 at 13:54