Caleb Stauffer Style

jon-tyson-P2aOvMMUJnY-unsplash-modified

Image Tag

TL;DR: https://github.com/crstauf/Image_Tag.

Whenever you upload an image to WordPress, multiple sizes of that same image are created. WordPress natively generates versions of the image in the following sizes (can be adjusted in Settings > Media):

  • 150px x 150px (hard crop)
  • 300px x 300px
  • 768px x 768px
  • 1024px x 1024px

This is really cool, because it means when you insert an image into a blog post, the properly sized image for your visitor’s device will be displayed (since WordPress 4.4).

But for a custom theme or plugin developer, reproducing that behavior is a lot of work, especially on top of everything else to go with properly implementing an image.

And thus, I created Image Tag (a.k.a. Image_Tag), a helper class for generating img tags within WordPress.

Features

WordPress attachment images

When given an attachment ID and image sizes, Image_Tag generates the whole img tag, including srcset, sizes, title, and alt attributes. It also supports theme images, when a path relative to the theme’s directory is provided.

External images

If you’re embedding an image with an external URL, Image_Tag can handle that as well: just pass the URL, add any attributes you want, and you’re done!

Placeholder images

Image_Tag also supports several placeholder image services:

These come especially in handy when you’re demoing a page template that you might not have the final content for yet. Each of the services have their own set of settings, and Image_Tag handles them all! You can also easily convert what’s supposed to be a WordPress attachment image into any one of these services, by making just one function call: Image_Tag uses what it knows about the attachment, and passes those settings on to the placeholder image service.

Common colors

Image_Tag is also able to determine the common colors used in an image. When implemented, this can create a really cool effect when you’re lazyloading an image: set the image’s container’s background color to the image’s most common color, and then fade the image in once it’s loaded. ?

Low-quality image placeholders

When using an image from WordPress, Image_Tag is able to generate a low-quality image placeholder (LQIP) for use as a placeholder while the higher resolution image loads. Image_Tag uses WordPress image libraries to create a small version of the image, encodes the image using base64, and stores that value in the WordPress database (for use again later).

My favorite use of this: setting the image’s container’s background color to the primary color, loading the LQIP with a grayscale filter and translucency, and then fading the high-res image on the top: beautiful.

There’s even more…

  • noscript support
  • helpers to add classes, sizes (for sizes attribute, and sources (for srcset attribute), and styles
  • lazyloading (using your method of choice, though I prefer lazysizes)
  • get image ratio (height / width) (for local images only)
  • request the image using HTTP GET method (various uses)
  • easily access attributes like an array

Conclusion

That’s a lot of cool stuff, right? On top of all that, I’ve also implemented unit testing and continuous integration (using Travis CI) on multiple versions of PHP and WordPress. I’ve spent years refining this utility, and I’m finally very happy with it (well, nearly: it’s not quite ready for master).

Check it out, and if you’ve got any suggestions, please, you are absolutely welcome to submit a PR!

Photo by Jon Tyson on Unsplash