Media

Dealing with media has always been a small crux. It’s difficult to know what sizes to use and how to help the client output the right images that are cropped properly and fit their content. Ignition tries to make this a bit easier.

Resetting Media Sizes

To start with, when creating a new site, I always open the media settings in the admin and set the medium and large media sizes to 0. Every time you upload an image, multiple versions of it are made for each image size and it can bloat the site and add unnecessary files. By setting them to 0 it won’t create any extra files.

Added Sizes

Ignition comes with two sizes included.
The default thumbnail size which is 300 x 300
A header_image size which is 2000 x 600
Both are set in functions.php

The issue with featured images

ignition comes with post thumbnails enabled, so posts and pages can have featured images.

Unfortunately, in my experience a lot of clients always want the featured image to be displayed in the card and on the single view as a large header.

The same image used in a small card doesn’t always look right when used as the wide hero image at the top of a blog post. Even if the same image is being output at different sizes, it doesn’t always look great. This is because the small image might need to be square while the single view requires a wider image. Sometimes the image needs to be cropped differently. Using a background-size of cover makes us have less control and images can be a nightmare. The idea that the client will crop the image themselves has proven futile.

Instead, Ignition comes with a second featured image meant to be used for the header of a single view. This seems to work and clients understand that they should upload two separate images if the main one isn’t looking “right” as a header image.

This second featured image is called header_image and is set in functions.php. An ACF field has been created and shows up on posts and pages allowing users to upload a second image.

Retina Images

I recommend installing WP Retina, a plugin that will replace your image with a retina version if the device supports it. If you upload a 1x and 2x it will automatically swap for the 2x when necessary. It can also generate the 2x is most cases. The plugin runs when it finds an image element being output.

The plugin also has the option to shut off WordPress medium large sizes and responsive sizes which just creates more images and bloat. Unfortunately the plugin wont replace inline background images set with css. However ignition comes to the rescue! See below.

Retina Background Images

A lot of times we want to use a background image in our code, perhaps outputting the thumbnail as a background image for each post. You can easily get the thumbnail url with get_the_post_thumbnail_url(), but this wont test for retina. It wont check to see if a retina device is being used and it wont swap for a retina version. It just gets the url as is.

To have it check and use a high res add data-high-res to the element like so:

<?php //an element with an inline background ?>
<div class="some-element" data-high-res style="background-image: url('
<?php the_post_thumbnail_url('full'); ?>
');">
...
</div>

The code above will use javascript to check for the 2x version and swap the background image for high resolution devices.

You can also use a totally different image if data-high-res has a value. The value must be a url to another image to use.