Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ben Anggoro
Ben Anggoro
36,161 Points

How to get field value with PHP & use it on JavaScript

Hi everyone,

I really hope can get help from Mike the Frog & team with this

I'm trying to implement this awesome javascript slider that I found on codrops

I'm stuck when try to fire up the slider on the footer, where we are suppose to put the images url there. so part of the js code is 

<script>
var el = document.querySelector( '.md-slider' ),
settings = {autoplay : true,
        interval : 3000,
        devices : [ 
        { cName : 'md-device-1', canRotate : false, imgsrc : 'images/site1.jpg' },
        { cName : 'md-device-2', canRotate : false, imgsrc : 'images/site2.jpg' },
        { cName : 'md-device-3', canRotate : true, imgsrc : 'images/site3.jpg', rotatedsrc : 'images/site3r.jpg' },

{ cName : 'md-device-4', canRotate : true, imgsrc : 'images/site4.jpg', rotatedsrc : 'images/site4r.jpg' } ..... </script>

I am using acf plugin to upload the screenshots, one field for each image.

So how do I get - for example - <?php echo the_field('screenshot_desktop');?> value to be used on the to fill in the imgsrc: on the JS above?

I hope Zac or Andrew or anyone could help?

Many thanks in advance

2 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

With PHP, echo just means, put this text into the DOM when the page loads so...you can use PHP anywhere. You've kinda answered your own question. Put the_field echo in where the image should go. Remember, that echo will put in exactly what is in the echo so if ' are required for the code to work then you need to concatenate these into your echo.

I just wrote this piece of code that demonstrates what I'm saying. I'm putting the value of a meta field into a PHP variable and then echoing this variable into the jQuery function. The code is a timer that gets the amount of time left till the event. Once the time is up, it deletes the post that relates to the event and moves onto the next one. I think it's cool, anyway...here's the example. 

    <?php $startDate = date("d F Y H:i:s", strtotime($date)); ?>
$(document).ready(function(e) {
    $('.countdown').countdown({date: <?php echo '"' . $startDate . '"'; ?>}, function(){
    <?php if( time() > strtotime($date)){wp_delete_post($postid);} else {echo 'Fail';} ?>
    })
})

Ignore the messiness of the code, I'm still finishing it. You can see, I've got my $date variable which has had the meta data saved in it. This is then reworked into a format for the countdown to understand and saved in $startDate variable.

Now, the bit you're interested in, you see the third line, I've echoed $startDate into the funtion. But, it requires the date and time to be in single quote so you have to concatenate, in this case, double quotes around the variable.

Bit long winded but I think you'll better understand how you can use PHP in jQuery now, I hope. Hopefully some pros won't come along and rip my code apart now. ;)

Ben Anggoro
Ben Anggoro
36,161 Points
Ben Anggoro
Ben Anggoro
36,161 Points

Hi Matt Thanks so much! I was like 'oh? I don't know we can do that' and even started digging about getelementby thing lol And yes it's kind of cool what you're working on. Might need that one day :)

Still can't get it working though, but I think its about modernizr. The thing is i use bits and pieces of codrops stuff (cause they're all just look so good), and each uses customised modernizr. I think one plugin use this modernizr, and the other use that modernizr. So maybe i just need to find out what exactly custom modernizr is used by each and create one modernizr for all.

I think, though. What do you think, would modernizr be the problem?

Matt Campbell
Matt Campbell
9,767 Points

Ben Anggoro, I don't use modernizr so can't help you much there. Just wandering, why are you using a custom field? Why not just use the post thumbnail or put the image in the_content? Then you can just call it like you normally would, put it in a category for slider images.

You'll need to run a loop around your images. Otherwise it'll only get the one image. And you'll need to add a count to the loop as well and echo that in on the cName.

Ben Anggoro
Ben Anggoro
36,161 Points

Hi Matt

I was thinking the same, but the plugin doing it this way with 6 different images. I know it is so not DRY but somehow it makes sense because this way we can decide the screenshot look for each devices easier.

So what it does, it morphs devices from deskop screen, then tablet, then smaller tablet, then mobile. We can rotate the device to when it shows mobile devices.

Thats why I use acf and separate field for each screenshot.