In my last article, we took our first look at using images in Statamic, as compared to WordPress. Here, we take a closer look at using images, and in particular working with image sizes.

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

Image Sizes in WordPress

WordPress sites have a default set of image sizes that get automatically generated when you upload a new image to the media library. These can be visualized when you dump out the data from an ACF image field, for example. So, we can either use the raw image that was uploaded using the url key in the array of image data, or we can select one from the sizes:

// WP Image sizes
$image = get_field('headshot');

// output the URL
echo '<img src="'. $image['url'] .'">'

// output a specific size
echo '<img src="'. $image['sizes']['thumbnail'] .'">'

If you want to define a custom size for a specific use case, you will need to call a function from with the after_theme_setup action:

// functions.php

function site_setup() {
    // add image size inside the hook
    add_image_size( 'hero', 1440, 960 );
}

add_action( 'after_theme_setup', 'site_setup' );

If you did this at the begging of your project, these sizes will be available right away. Otherwise, you may need to install a plugin to regenerate your images, and then you can use that new size:

$image = get_field('headshot');

// output a specific size
echo '<img src="'. $image['sizes']['hero'] .'">'

Images Sizes in Statamic with Glide

Statamic doesn’t generate a bunch of image sizes on upload by default, which is nice, because this has the potential to bloat the assets with unnecessary images, as can often be the case in WordPress.

However, the option is there should you choose to opt into this. Inside the /config/statamic/assets.php file, scroll down to the presets key, which is an array of named image size options. Out of the box, it look like this:

'presets' => [
    // 'small' => ['w' => 200, 'h' => 200, 'q' => 75, 'fit' => 'crop'],
],

In the above example, you can duplicate the small option and name it to whatever you might like, and set the width, height, and quality options to your liking.

There’s also the next setting, which is se to true by default, which will generate the image sizes as defined above when set to true, whenever a new image is uploaded.

'generate_presets_on_upload' => true,

When set to false (which is nice for development), images get generated the first time the URL is hit; testing different sizes is a breeze when you don’t need to regenerate them manually after changing your settings if you’re playing around. You can do that manually in the terminal like so:

php please assets:generate-presets

Check out the docs for image manipulation.

Inside of your Antlers template, we can output our image using Glide, and specify the preset we want to use:

<img src="{{ glide:headshot preset="hero" }}" />

If you can’t plan your image sizes ahead of time, you can always indicate the size right within the template as well, as we looked at in the previous article:

<img src="{{ glide:headshot width="1440" height="960" }}" />

Statamic Makes it Easy

I hope you are starting to see just how much more straightforward, and easily configurable Statamic is, when compared to WordPress. I have so many options for images right at my fingertips, and we haven’t even yet dug into all of the things that we can do with Glide to make life that much easier.