0

On my site I've got a custom post type. Each custom post has a thumbnail of a person, and an extra custom field that has another image in it. I've written code so that when the user hovers over the thumbnail of the person, they can see the alternative thumbnail. This is in JS.

Everything is mechanically working fine, (I got wp_enqueue_script and wp_localize_script going with some help from here!) but instead of each persons thumbnail seeing the correct corresponding alternative thumbnail on hover, they were all seeing the same one. This was the last one that was read into the array (they were all being overwritten in the loop.)

My new approach (which I don't know if its right) is to read the post ID into the first half of the array, and then the corresponding thumbnail into the second half.

This all seems to work when I echo it in PHP, but I'm not sure how to get it into Javascript.

Assuming the postID is 23, I've tried just writing alert(MyScriptParams.23); but that doesn't work.

I can't quite get my head around the scope, what would I do if there was 100 people? I assume I'd write a separate loop in JS to loop through it all? I'm having difficulty with the link between PHP and JS...

Any help greatly appreciated! I may be doing something stupid!

page-custom.php

<?php 
                $args = array( 'post_type' => 'drummers', 'orderby' => 'menu_order');  

                $your_loop = new WP_Query( $args ); 

                //FETCHES THE POSTS
                if ( $your_loop->have_posts() ) : while ( $your_loop->have_posts() ) : 
                $your_loop->the_post(); 

                //GETS THE POST ID FROM WP_QUERY

                $gettheid = get_the_ID();                

                    if ( has_post_thumbnail() ) {
                    the_post_thumbnail('', array( 'class' => "img-fluid animated drummers_face$post_id"));
                    } 

                    $meta = get_post_meta( $post->ID, 'drummers_fields', true );

                    $thumbnail_url = get_the_post_thumbnail_url($post->ID);


                    wp_localize_script('animated', 'MyScriptParams', 
                        $array = array(
                        $gettheid => $meta['image']
                        //'bar' => $thumbnail_url

                        ));

                //THIS ECHOS FINE
                echo $array[$gettheid];

                ?>

            <?php the_title(); ?>



            <?php the_content(); ?>



        </div><!-- END OF COLUMN-->    

<?php endwhile; endif; wp_reset_postdata(); ?>

Javascript - I've got some code to show the new thumbnail on hover, but I'm keeping it basic and trying to get it to just alert first

alert(MyScriptParams.23);

Update

Have moved localize_script outside of the loop, added in a counter that counts through the array, but still have the same problem.

            <?php


                $args = array( 'post_type' => 'drummers', 'orderby' => 'menu_order');  

                $counter = 0;

                $bigid = array();

                $your_loop = new WP_Query( $args ); 

                if ( $your_loop->have_posts() ) : while ( $your_loop->have_posts() ) : 
                $your_loop->the_post(); 


                array_push( $bigid, get_the_ID() );
            ?>

        <div class="col-md-4">

            <?php                

                if ( has_post_thumbnail() ) {
                the_post_thumbnail('', array( 'class' => "img-fluid animated drummers_face$post_id"));
                } 

                $meta = get_post_meta( $post->ID, 'drummers_fields', true );

                $thumbnail_url = get_the_post_thumbnail_url($post->ID);


             $array = array(
                    $bigid[$counter] => $meta['image']
                    //'bar' => $thumbnail_url

                    );            

            echo $bigid[$counter];

            $counter++;

            ?>


            <?php the_title(); ?>


            <?php the_content(); ?>


        </div><!-- END OF COLUMN-->    


<?php endwhile; endif; wp_reset_postdata(); ?>


    <?php    wp_localize_script('animated', 'MyScriptParams', $array);  ?>  
  • Did you try MyScriptParams[23]? – Samuel Elh Feb 12 '17 at 18:56
  • Yep, it just says undefined (I've tried other post numbers as well) :-( – lycrake Feb 12 '17 at 19:02
  • Is that get_the_ID() supposed to get the ID of each post and do the rest? because it seems to me that it's not in the loop, therefore it only returns the ID and thumbnail of the last post. – Jack Johansson Feb 12 '17 at 19:52
  • So theres, 3 posts on the page currently with the IDs 23, 25, and 33. If I do echo $array[23]; echo $array[25]; echo $array[33]; Each of the different thumbnail urls are displayed, but when I put any of those numbers in the JS, it comes back as undefined. – lycrake Feb 12 '17 at 20:40
0

It's because you're running the localize script inside the loop. Instead, store the array of ids etc, and then run localize script outside/after you set it up.

All the localize script really does is inject the params you pass into it into the global scope of js/jquery, allowing you to reference them. However, localize script isn't cumulative, instead you're just re-writing it over and over (thus only ever seeing the last id of the loop, and all other ids being undefined).

Taking another look, I see another issue:

$array = array(
                    $bigid[$counter] => $meta['image']
                    //'bar' => $thumbnail_url

                    );     

Should be

$array[] = array(
                    $bigid[$counter] => $meta['image']
                    //'bar' => $thumbnail_url

                    );         

With the difference being that in the former, you are resetting $array over and over, vs the latter being you're actually pushing the data into an array.

You'll also want to make sure that prior to the loop, before iteration, to define $array = array(). It will still work, but if you don't define it first you'll get php warnings.

As a third option you could also do:

$array[$bigid[$counter]] = $meta['image']; 

Since you seem new, I'd actually try doing both and doing a dump/console log to see the difference in data structure it creates.

  • Hey there, thanks for the help! So I've moved the localize script outside of the loop, i've added in an array push to keep adding the post IDs into the array, and then a counter to move them into a new position in the array, but I've still got the same problem! I'll update my code up top... thanks for the help so far! – lycrake Feb 12 '17 at 23:57
  • I'm also wondering what to do once I've read all the arrays into the js file. I ideally want to give each of the people a different class in the php (which i can do), and then on hover show that class the correct hover animation. I'm unsure what the methodology is..... – lycrake Feb 13 '17 at 0:23
  • try console logging the resulting array you localize in in js to see if you're data is all correct. – Hybrid Web Dev Feb 13 '17 at 7:37
  • So when I do a console log, I just get the last value in the array, the other two are undefinied – lycrake Feb 13 '17 at 8:15
  • See edit. Apologies for delayed replies :) – Hybrid Web Dev Feb 14 '17 at 3:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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