Using Exhale’s Media Options

When I was nearly finished building the Exhale theme, I realized that I’d made the theme flexible enough, with a little code, to do some nifty things with images. Building from a solid foundation makes all sorts of things possible.

I wanted to bring those features to users who are not going to be writing their own PHP instead of having them hidden away for coders.

The first feature was the ability to change the featured image size shown on the front end. The second feature allows users to easily add CSS filters over their images. In this tutorial, I’ll walk you through how each of those features work.

Both of these options are available under the “Theme Options > Media” section in the WordPress customizer.

Featured image size

The “Featured Image Size” setting allows you to select the image size you want for featured images, such as on the home/blog page. The setting provides four sizes out of the box:

• Landscape: Medium – 650×366 – This is the same width as the content.
• Landscape: Large – 900×506 – This is the ideal size for “wide” images and stretches beyond the content area. Default size.
• Landscape: Extra Large – 1366×768 – This is a full-width image size on your average computer screen.
• Landscape: Huge – 1920×1080 – This is a full-width image size on larger desktop screens.

In version 1.0, all images are in 16:9 format. Like with any theme switch, you’ll want to reformat your images with a plugin such as Regenerate Thumbnails to make sure they are sized appropriately.

Featured images use the core WordPress image functions, which means that they’ll have responsive sizes set for smaller screens as well.

Image filter

The “Image Filter” option allows you to select from a set of pre-selected CSS filters to add to all images across your site. I’ve been pleasantly surprised by the feedback on this feature.

As of this writing, there are 7 filters that you can apply to images:

• Brightness – Makes the image brighter/darker.
• Contrast – Increase/Decrease the image contrast.
• Grayscale – Converts the image to grayscale.
• Invert – Inverts the colors of the image.
• Opacity – Increases/Decreases the image’s transparency.
• Saturate – Super-saturates or desaturates the image.
• Sepia – Converts the image to sepia.

There are actually other CSS filters available, but I chose not to add them in version 1.0 for various reasons. Some may make it into future versions while others don’t make sense for this particular option. Nevertheless, we have quite a few options to work with.

Aside from choosing a filter, there are two additional options to configure with this, which are the default filter amount and hover filter amount. The hover filter amount only applies when a linked image is hovered/focused (keep in mind that mobile users do not hover images).

The amount-type options change based on which filter is chosen. Some may have an upper limit of 100 while others have a higher limit. It depends on the specific filter.

I had a lot of fun (and a few headaches) building out this option in the customizer. Definitely give it a go and have a bit of your own fun with images.

Don’t have the Exhale WordPress theme yet? Hop over and check out the theme page →