One of the hallmarks of life on the web is the use of images. In HTML terms, this means the use of the <img> tag to get our images onto the page, where the the simplest of implementations, all that is required is the src attribute, which takes the path to the image file as the value.

Follow along as I compare WordPress with Statamic, if you’d rather just soak in the info. Watch it here:

Image Basics in WordPress

In WordPress, there is some work to do to generate your image tag, depending on our use case - are we using the featured image for a given post? First, if it’s a Custom Post Type, we need to ensure that this is enabled by including thumbnail in the array of things that the Post Type “supports” when it’s being registered:

    // functions.php

    $args = array(
        // other arguments go here ...

        'supports' => array( 'title', 'editor', 'thumbnail'),
    );
    register_post_type( 'post-type-name', $args );

Featured image. Thumbnail. Weird mashup of terms, but it gets the job done. Once this is there, we get a meta box in the post edit screen, and we can upload the image.

Once in the template, and inside the loop, we can generate our image tag with a function thusly, much like getting the title or content items:

    // post template

    while( have_posts() ) : the_post();
        the_title();
        the_post_thumbnail(); //  <-- this is the image!
        the_content();
    endwhile;

The nice thing about this approach is that it handles the responsive srcset for us out of the box, which is certainly a perk.

Alternatively with an ACF field, we would get the image using the ACF functions to get the content, and build our own srcset with the array of image sizes that comes with our ACF data:

    $image = get_field('headshot');
    echo '<img src="'. $image['url'] .'" />';

    // or

    echo '<img src="'. $image['sizes']['large'] .'" />';

    // or
    $srcset = wp_get_attachment_image_srcset( $image['ID'], 'large' );
    echo '<img srcset="'. $srcset .'"  />';

This, however, requires a more intimate knowledge of the behind-the-scenes working of images in WP. What does the 2nd param “large” indicate? In this case, it refers to the pre-configured (either default, or customized) image sizes, that generates new sizes when any image gets uploaded to the media library.

While these things do give us some options for optimizing our images, we are limited to whatever sizes are definied for us. Often this can be enough, but what if you wanted super fine-grained control?

Images in Statamic with Glide

In Statamic, there’s no concept of the “featured image” for a given Collection. Rather, there are only the fields as defined in the Blueprint. We can call our asset the “featured image” if we really want to though, we have that option. We can call it anything we want to.

For the purposes of consistency, let’s call our image in Statamic “headshot” just like with the ACF example above. How might we put that on the page?

    <img src="{{ headshot }}" />

I don’t have to specify the URL or anything here, Antlers simply knows what to do here. If I wanted to access other data from the asset, we could use the tag pair:

    {{ headshot }}
        <img src="{{ url }}" alt="{{ alt }}" />
    {{ /headshot }}

Introducing Glide

Statamic also gives is Glide, which is a super-powerful image tool, that gives us a ton of control over our images. The simplest example we will look at here is defining a size inline, which will generate the image to that sizes on the fly if one doesn’t exist already. Check it out:

    <img src="{{ glide:headshot width="400" }}" />

In this example, imagine we have a large image, 1975 pixels wide, and the 1975 pixels tall - a giant square. This is probably overkill for just a small headshot on a profile page, so we can use Glide to specify a smaller size. In the above example, this will give us a 400x400 image.

If it’s the first time it’s being rendered, it might take a quick second to generate the image the first time the URL is visited, but after that it’s cached and speedy.

I don’t have to remember what my array of sizes returns in order to specify “medium” or “large,” neither to I have to have those sizes determined ahead of time.

With or without Glide, this is much simpler to manage that WP - there is less code to have to write overall. With Glide, I have magical powers to configure images in a very fine-tuned way without having to do any real configuration. Mind you, I can do some config to optimize even further, but it’s not required. That will be topic for another day.

For now, enjoy the glide!