Put js variable inside wordpress function

Question

I've faced with a problem. I use Mafnific popup. Below the popup I add a button to download image and different actions like social icons etc.

so, I need to find out a filesize of image uploaded to media of Wordpress. I have js variable where I have link to image.

For this in functions.php I put a function for searching id of this image by link like this:

function pippin_get_image_id($image_url) {
    global $wpdb;
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
        return $attachment[0]; 
}

And now I can find out the filesize if I put a link of image to this function like this:

echo size_format(filesize( get_attached_file(pippin_get_image_id($link)) ),2);

But the main problem is: I am now inside js script and I need to pass to function a JS variable var link:

Inside a function I have a snippet:

return '<a href="' + link + '" download target="_blank" class="btn btn-success" id="original">Download (<?php echo size_format(filesize( get_attached_file(pippin_get_image_id( VARIABLE LINK )) ),2); ?>)</a>

p.s. see where VARIABLE LINK is. How can I put js variable there ?

Thank you so much in advance!

Raman Kumar · Accepted Answer · 2016-09-15 14:52:01Z

1

you can just print image size in hidden field like this:

<input style="display:none" id="image_link" value="<?php echo size_format(filesize( get_attached_file(pippin_get_image_id($link)) ),2); ?>" />

and then in script fetch this value in jQuery like this:

var imageLink = jQuery('#image_link').val();

return '<a href="' + link + '" download target="_blank" class="btn btn-success" id="original">Download (<?php echo size_format(filesize( get_attached_file(pippin_get_image_id(
'+imageLink +' )) ),2); ?>)</a>

answered Sep 15, 2016 at 14:52

Raman Kumar

1886 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dmitry Shulga Over a year ago

Thank you so much! You helped me about idea! I solved like this: 1. I created data-size attribute where I put the size via PHP 2. jQuery is a fairytale to take value of attribute :)

Jonathan Weber · Accepted Answer · 2016-09-15 14:55:37Z

Edit - Explanation: What you want to do is not directly possible because PHP execution stops before JavaScript execution starts. PHP is a server-side script language, meaning that it runs when the user requests a page from the server. It prepares the page, stops execution and the server sends the results to the requesting user. Only then it is displayed in the users browser and JavaScript execution (which runs on the users machine by the way) starts.

You might want to take a look at wp_localize_script(). This function takes information available at PHP runtime and puts it into a JavaScript variable, which you can then use in your JavaScript scripts.

In the (likely) case that you don't know at PHP runtime which file-size you need (for example when you have a huge list of files and don't want to pre-fetch file-sizes for all of them) your go-to solution will be AJAX. This is more complicated, but once you understand how it works, you can do many exciting things with it. The process is as follows:

In your JavaScript files, you "make a call" to an URL. In this case, the URL is your WordPress site. This call is made by JavaScript, so the user will not see anything of it. You can add addition data (variables) to this call.
You tell WordPress how to handle this call. Once again, the users sees nothing of this. The output of this call, that, in normal scenarios, would be shown in the browser, will instead be passed back to the calling JavaScript file from step 1.
After your calling JavaScript file has received a response from the call, you can use the response in any way you like.

Translated to your case: JavScript script runs when popup is opened. This script calls WordPress, WordPress handles the call with your file size function and returns file-size, JavaScript script takes file-size and adds it to the link-button.

Using jQuery makes the whole process of AJAX calls much more straightforward.

Thank you so much for all details and advices! I solved this in other way. But I realised that AJAX is definetely neccessary tool for me for my future activity. Good luck!

Collectives™ on Stack Overflow

Put js variable inside wordpress function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related