We spent all this time in our static mockup making some clever JavaScript that would "smooth load" the images in the Gallery. Now that we have the real Gallery going with real images, that is gone.

Essentially, we need to get our image wrappers having a padding-top of the aspect ratio of the image. That was easy in the static mockup because we knew the height and width of the image. We don't have that information anymore, we just have the URL of the image.

We Google a tutorial on getting image dimensions with PHP. After we get this in place and visit the gallery, it loads super slowly. It's probably the PHP function getimagesize. We speculate that once this is live, and it's requesting the images from the same server that it's on, it will be faster.

It turns out that sadly this isn't the case. This function is just slow because it has to request the entire image and process it to get the information it needs. Later on we just have to resort to something totally different to get smooth loading going. Kind of a bummer. If we could turn back time we should have used the native WordPress media uploader to upload these images rather than a custom field. That way we would have had access to image dimension data that is stored in the database which would have make this all possible.

Comments

  1. Wesley
    Permalink to comment#

    Hey Chris

    Maybe the the “get attachment image src function” might work. It outputs the URL, width and height in an array for a given attachment_id.

    WordPress get attachment image src function

    Loving the screencasts.

    • Chris Coyier
      Permalink to comment#

      Probably would, yeah, but unfortunately the images are custom fields not attached in that way. If I could go back in time, I would have used the native WordPress function. Not that custom fields aren’t native but you know what I mean.

  2. Wesley
    Permalink to comment#

    I came across this post where the user was looking for the image width and height from the Advanced Custom Fields plug-in but it might work. As the custom field would have an attachment_id you get the attachment id via the field name then get the width and height of the image.

    How do I retrieve an image’s width and height using Advanced Custom Fields?

    It maybe a case of you are happy with how the gallery works so there is no point in fix what is not broken.

    On a side note I dont seem to be notified when some replies to a post I make even though I have both checkboxes selected to be notified.

    I get the CSS-Tricks emails of new post to the website though.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.