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.
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.
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.
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.