Support » Fixing WordPress » CSS Sprite Generator for Thumbnails

  • 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:

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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.

    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.

    Maybe you could use Infinite Scroll?

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

    I would recommend looking at the jQuery Lazy Load plugin.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS Sprite Generator for Thumbnails’ is closed to new replies.