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