Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to make a photo gallery where the individual photos can be shared on Facebook and Twitter, and when you click the link, the photo that was shared will open in a lightbox automatically.

Most lightbox plugins provide a deep-linking feature that provides this in the form of a #! after the URL. Unfortunately, both the Facebook (https://www.facebook.com/sharer/sharer.php?u=http://google.com) and Twitter (http://twitter.com/share?text=My%20Tweet&url=http://google.com) share boxes strip out all text after the #. This means that when you try to share a deep-linked lightbox photo, the link just brings you back to the gallery rather than opening that photo.

The non-WordPress solution I came up with was to share a static URL and then use a RewriteRule to send them to the correct place. So for example, the user would share "example.com/gallery/123/" on Facebook, and when they went there they would be sent to "example.com/gallery/?photo=123". This would be parsed by Javascript to programmatically click on the correct image and open the lightbox.

The RewriteRule I came up with:

RewriteRule ^gallery/(.*)/$ /gallery/?photo=$1 [R]

Does work fine on a static site, but not in WordPress, which is why I'm here!

I'd prefer the URL to be /gallery/#!/123, but I know you can't add a #! with RewriteRule, so if anyone can think of a way to do that, it'd be even better!

share|improve this question

1 Answer 1

up vote 1 down vote accepted

one way you could do this with an internal WordPress rewrite, which would then set a query var you could check when enqueueing your javascript, and pass that data via localize script.

so first, rewrite rule to intercept requests to gallery/ with something appended, load the page named gallery, and set the query var gallery_id to whatever was in the URL. also we add the gallery_id query var so WordPress knows about it. Make sure to visit permalinks settings page after adding the rewrite, to flush rules and this new rule.

function wpa_gallery_rewrite(){
    add_rewrite_rule(
        'gallery/([^/]+)/?$',
        'index.php?pagename=gallery&gallery_id=$matches[1]',
        'top'
    );
}
add_action( 'init', 'wpa_gallery_rewrite' );

function wpa_gallery_query_var( $query_vars ){
    $query_vars[] = 'gallery_id';
    return $query_vars;
}
add_filter('query_vars', 'wpa_gallery_query_var');

Now when we enqueue our javascript, we can check for that value and set a var which will be added along with the script and available to it.

function wpa_scripts() {
    wp_enqueue_script(
        'wpa_script',
        get_template_directory_uri() . '/js/my_gallery.js',
        array('jquery'),
        null,
        false
    );
    $default_photo = ( get_query_var( 'gallery_id' ) ) ? get_query_var( 'gallery_id' ) : 0;
    wp_localize_script(
        'wpa_script',
        'wpa_data',
        array(
            'default_photo' => $default_photo
        )
    );
}
add_action( 'wp_enqueue_scripts', 'wpa_scripts', 100 );

Now in your javascript, check wpa_data.default_photo to see if it equals 0, or there was a specific photo requested.

share|improve this answer
    
That worked perfectly! Thanks so much! –  Ryan Giglio May 10 '13 at 20:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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