WordPress.org

Ready to get started?Download WordPress

Forums

WP Tiles
Loading images from CDN and AJAX help (2 posts)

  1. tylerjfrags
    Member
    Posted 5 months ago #

    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

    {plugins_dir}/wp-tiles/*
    {plugins_dir}/wp-tiles/_inc/css/wp-tiles.css
    {plugins_dir}/wp-tiles/_inc/js/wp-tiles.js

    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

    <?php
     $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 :)

    http://wordpress.org/plugins/wp-tiles/

  2. Mike
    Member
    Plugin Author

    Posted 5 months ago #

    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:

    jQuery(document).scroll(function(){
        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.

    Cheers,
    Mike

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.