Support » Plugin: WP Tiles » Loading images from CDN and AJAX help

  • Hey Mike,

    I’ve recently added CDN hosting to our website, but we can’t get the tiles images to load from the CDN.

    I’ve done a little research and seen that loading background images from a CDN can be problematic, and saw it was advised to host css and other relevant files from the CDN.

    I’m using W3 Total Cache and have tried pointing it to various files in WP-Tiles like


    As you see it should be hosting the root anyway, so i’m not sure what the problem is?

    I was thinking maybe I could modify the plugin to include our CDN url infront of the image – would this be a good way to do it, you think?

    Also if you checkout thenoisegate .com you’ll see we managed to integrate pagination 🙂

    Here’s the code

     $offset = $_GET['offset'];
     $numposts = 12;
     $query = 'numberposts='. $numposts . '&offset=' . $offset;
     $acturl = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['SCRIPT_NAME'] . "/test/?offset=";
    <?php the_wp_tiles(array('posts_query'=>$query)); ?>
    <a href="<?php echo $acturl . ($offset + $numposts);?>" id="pagination">next page</a>

    Any ideas on how to get AJAX going. Ideally we’d like to load another 6 tiles when the user reaches the bottom

    Thanks Mike 🙂

Viewing 1 replies (of 1 total)
  • Plugin Author Mike Martel


    Hi again!

    Can you tell me how the CDN is setup? Are all images offloaded to the CDN after upload, or do you let them exist both on the CDN server and on your own? Also, how are you replacing image urls in the content normally? Do you filter the_content for image urls or..? The trick will be to return an image with the pre_wp_tiles_image filter with the CDN url:

    add_filter( 'pre_wp_tiles_image', 'noisegate_get_cdn_image', 10, 2);
    function noisegate_get_cdn_image( $ret, $post ) {
        $ret = ''; // Get image from post with CDN url
        return $ret;

    Then, for AJAX infinite scroll type of effects, I’d say this would be the outline:
    1. Set up a trigger in jQuery when the user reaches the bottom of the page:

        if ( Math.round(jQuery('.pixelMonitor').last().offset().top) > ( jQuery(document).height() - 500 ) ) {
            // Get the next page!

    (.pixelMonitor is a div at the bottom of your content, that will always be the bottom of your content)

    2. Setup an AJAX post when the above trigger happens (that sends through a page number, etc.)

    3. On the server, query the next page and use a method like WP_Tiles::extract_data to get data that WP Tiles understands, and echo that back as a JSON

    4. Replace the tiles in the wptilesdata object in JS with the new tiles and recreate the tiles – there is currently no public JS method for that, but with some script fiddling you should be able to access the Tile object.


Viewing 1 replies (of 1 total)
  • The topic ‘Loading images from CDN and AJAX help’ is closed to new replies.