Wordpress PHP link inside Javascript (for Photoswipe Custom Share URL)

0
votes

I'm wondering if there is a way to put my Wordpress attachment link inside of a javascript function. In simple terms, it would function like so:

$attach_url = "<?php echo wp_get_attachment_url(); ?>";
function () {
    return $attach_url;
}

More specifically, I'm looking for a way to implement it with Photoswipe's share buttons (full source code here):

    $attach_url = = "<?php echo wp_get_attachment_url(); ?>";

    (this, function () {
        'use strict';
    var PhotoSwipeUI_Default =
     function(pswp, framework) {
    shareButtons: [
                {url:'https://www.facebook.com/sharer/sharer.php?u={{attachment_pg_url}}'},
            ],  
            getAttachmentPageURL: function ( shareButtonData ) {
                return $attach_url;},
            parseShareButtonOut: function(shareButtonData, shareButtonOut) {
                return shareButtonOut;
            },
        _updateShareURLs = function() {
        var shareButtonOut = '',
                        shareButtonData,
                        shareURL,
                        attachment_pg_url;
        for(var i = 0; i < _options.shareButtons.length; i++) {
                        shareButtonData = _options.shareButtons[i];

                        attachment_pg_url = _options.getAttachmentPageURL(shareButtonData);

                        shareURL = shareButtonData.url.replace('{{attachment_pg_url}}', attachment_pg_url );

Any help is much appreciated!

EDIT

Here's my updated code, which is almost working. The js file is interpreting the enqueue script from functions.php. However, the url displayed is <?php echo get_attachment_link(); ?>, rather than the actual link (ex: home.com/attachment-page), which does display correctly when I use this php code in the loop.

How can I get the url to output a link, not the actual php code?

In functions.php:

    // Custom Photoswipe Share URL  
    wp_enqueue_script( 'photoswipe_custom_share_link', get_template_directory_uri() . '/custom_path_here/photoswipe-ui-single-item.js' );
    $attach_url = "<?php echo get_attachment_link(); ?>";
    wp_localize_script( 'photoswipe_custom_share_link', 'pswp_custom_share', $attach_url );

In the Photoswipe js file (with some extra fixes from my original post):

    (this, function () {
        'use strict';
    var PhotoSwipeUI_Default =
     function(pswp, framework) {
    shareButtons: [
                {url:'https://www.facebook.com/sharer/sharer.php?u={{attach_url}}'},
            ],  
            getAttachmentURLForShare: function ( /*shareButtonData */) {
            return pswp_custom_share;
            },
            parseShareButtonOut: function(shareButtonData, shareButtonOut) {
                return shareButtonOut;
            },
        _updateShareURLs = function() {
        var shareButtonOut = '',
                        shareButtonData,
                        shareURL,
                        attachment_url;
        for(var i = 0; i < _options.shareButtons.length; i++) {
                        shareButtonData = _options.shareButtons[i];

                        attachment_url = _options.getAttachmentURLForShare(shareButtonData);

                        shareURL = shareButtonData.url.replace('{{attach_url}}', encodeURIComponent(attachment_url) );

EDIT

I made the mistake of using quotes in my enqueue script. With the below code, formatting is now correct. The only problem is the url output is "home.com" instead of "home.com/attachment-page."

How can I define the dynamically generated attachment page url outside of the loop? Do I need to echo it?

$attach_url = get_attachment_link($attachment->ID);

EDIT - SOLVED!

I needed to use JavaScript enqueue to get base url of attachment in the loop. (Based on the answer here and with thedarkcoder's help).

In functions.php:

// Custom Photoswipe Share URL
function pswp_custom_share()
     {  
         /* Get the ID of the current post */
         global $post;
         $ID = $post->ID;

         /* register the script */
         wp_register_script( 'photoswipe_custom_share_link', get_template_directory_uri() . 'custom_path_here/photoswipe-ui-single-item.js', array('jquery'), false, true );
         $attach_url = array(
             'attachment_page'    => get_attachment_link( $ID )
         );
         wp_enqueue_script( 'photoswipe_custom_share_link' );
         wp_localize_script('photoswipe_custom_share_link', 'attach_url', $attach_url);

    }

     /* If we're not in the admin section call our function on the wp_enqueue_scripts hook  */
     if ( !is_admin() ) add_action( "wp_enqueue_scripts", "pswp_custom_share", 10 );

In the Photoswipe js file:

getAttachmentURLForShare: function ( /*shareButtonData */) {
                return attach_url.attachment_page;
            },
2
javascriptphpwordpressattachmentphotoswipe

2 Answers

0
votes

You can use WordPress enqueue script function to achieve this

Please follow below link for detailed info

https://code.tutsplus.com/tutorials/how-to-pass-php-data-and-strings-to-javascript-in-wordpress--wp-34699

Let me know if it resolves your problem

0
votes

It should be possible in theory as PHP is processed server-side before the javascript runs on client side.

I've noticed your script is missing the attachment ID from the wp_get_attachment_url function.

From the Wordpress API Documentation:

<?php echo wp_get_attachment_url( 12 ); ?>

The first step would be to test the functionality on a basic level by echoing the attachment URL to the page. Once you've done this, you know that you're hooking into the function correctly.

Then assign that value to a JavaScript variable and try running some sort of alert or console log to validate that you can successfully parse the URL to a global JS variable.

Then see if you can access that variable from inside a function. If you can step through each of the above basic steps then it should be more than possible for you to parse this data into the Photoswipe plugin.

Let me know if you get stuck, I will attempt to help in any way I can.