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 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.

share|improve this question

1 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/

share|improve this answer
    
This worked for me - thank you! –  Nathan Oct 12 '12 at 8:15

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.