Gallery shortcode - change link file image size? (not using default fullsize image)

Question

I am using this for my gallery -

<?php echo do_shortcode('[gallery size="gallery-thumb" link="file"]'); ?>

and I am using the jquery fancyapps fancybox. But some full-size images that are in my gallery are are really big and take forever to load...

Instead I want the link file in the shortcode to use my custom image size below...

add_image_size( 'fancyapps-image', 1024, 1024 );

Can any one help with out using another plugin?

---

I am using similar script on my post/pages body where images are inserted manually and aligned etc. So something similar surely could work?

This script combo functions ajax call basically scans all the images in my posts and changes the link url to the 'fancyapps-image' size...

script

var raw_class, image_id = new Array();
$('.entry a img').each(function(i){
    var img_class = $(this).attr('class');
    if(img_class && img_class != undefined){ 
        raw_class = $(this).attr('class').split(" ");
        for(j=0;j<=raw_class.length-1;j++){
            if(raw_class[j].match(/wp-image-/))
                image_id[i]= raw_class[j].slice(9);
        }
    }
});

var image_ids = image_id.toString();
var data = { type: 'get_data', action: 'wp_get_large_image_url', data: image_ids }

$.post( wp_ajax, data, function(message){
    if(message){
        var raw_data = message.split(',');
        for(i=0;i<=raw_data.length-1;i++){
            var image_data = raw_data[i].split('%-');
            $('.wp-image-'+image_data[1]).parent('a').attr('href', image_data[0]);
        }
    }
});

admin-ajax.php call

<?php echo "var wp_ajax = '" . admin_url('admin-ajax.php') . "';" ?>

functions.php

function wp_large_image_data(){
    unset( $_POST['action'] );
    if($_POST['type'] == 'get_data'){
        $data = $_POST['data'];
        $image_ids = explode( ',',  $data );
        $image_large_url = array();
        foreach($image_ids as $image_id){
            if($image_id){
                $attachment_data = wp_get_attachment_image_src( $image_id, 'fancyapps-image' );
                $image_large_url[] = $attachment_data[0].'%-'.$image_id;
            }
        }
        $image_data = implode( "," , $image_large_url);
        echo $image_data;       
    }
    die;
}
add_action('wp_ajax_wp_get_large_image_url', 'wp_large_image_data');
add_action('wp_ajax_nopriv_wp_get_large_image_url', 'wp_large_image_data');

Any ideas would be great thanks.

Answer 1

Thanks to @Hai

Add it to your functions.php and it will use the ‘fancyapps-image’ version of the image wherever WordPress is displaying a link to an attached image. Hope it helps.

function oikos_get_attachment_link_filter( $content, $post_id, $size, $permalink ) {
    // Only do this if we're getting the file URL
        if (! $permalink) {
            // This returns an array of (url, width, height)
            $image = wp_get_attachment_image_src( $post_id, 'fancyapps-image' );
            $new_content = preg_replace('/href=\'(.*?)\'/', 'href=\'' . $image[0] . '\'', $content );
            return $new_content;
        }
    }
    add_filter('wp_get_attachment_link', 'oikos_get_attachment_link_filter', 10, 4);

Code from http://oikos.org.uk/2011/09/tech-notes-using-resized-images-in-wordpress-galleries-and-lightboxes/