WordPress.org

Ready to get started?Download WordPress

Forums

CSS Sprite Generator for Thumbnails (6 posts)

  1. jschleuss
    Member
    Posted 2 years ago #

    I have a big list of posts displayed as rows in a table. The first column of each row is the post's featured image or post thumbnail.

    I'm up to 416 posts and the HTTP requests are slowing the load time of my pages.

    Here's my site:
    http://www.crystalbridgescollection.com/

    Any ideas on how to generate a new css sprite for all post thumbnails after a new post is added? I'd like it automated as much as possible.

  2. FMarion
    Member
    Posted 2 years ago #

    Just off the top of my head: you might create the sprite image in Photoshop or your favourite image editor and use a custom field for the coordinates, and embed those coordinates in an inline style tag using the values of said custom field.

  3. jschleuss
    Member
    Posted 2 years ago #

    That would work if I only had a few posts. But I'd have about 400 images and 400 sets of coordinates to input by hand. I don't have time to do all that. I'd like to figure out a way to have it built in PHP and run whenever a new post is created.

    In non-code terms this is what I'm trying to figure out:

    when a new post is published run:
    loop through all posts
    if (post has thumbnail) { add post thumbnail to image sprite, copy coordinates inside sprite }
    end loop
    append css for sprite coordinates, clear css browser cache

    As an alternative, I'm also just trying to figure out how to speed up my page load time for the homepage and all image-populus pages. I currently average 4.25 seconds for the homepage to load.

  4. Bill Dennen
    Member
    Posted 2 years ago #

    Maybe you could use Infinite Scroll?

    http://www.infinite-scroll.com/

  5. Denis Leblanc
    Member
    Posted 2 years ago #

    Have you considered limiting the amount of posts per page to something like 10-20 posts instead of all 400?

  6. krang
    Member
    Posted 2 years ago #

    I would recommend looking at the jQuery Lazy Load plugin.
    http://www.appelsiini.net/projects/lazyload

    The thumbnails only load once they are in view. This way you aren't loading 400 in one go.

Topic Closed

This topic has been closed to new replies.

About this Topic