This article has been archived.
Utility Pro is no longer under development. Some of the content may be relevant but there are better options for adding an SVG logo to a WordPress theme now.
My last post demonstrated how I added a Retina ready logo to the Utility Pro theme. If you have the professional version of Utility Pro, you can add a Sass mixin to generate the necessary code to add Retina ready background images. This can easily be adapted to any WordPress or Genesis theme that is using Sass.
The best approach for creating a logo that will look sharp and crisp on any device is to use an SVG (Scalable Vector Graphics) file, instead of using two versions of the same PNG (Portable Network Graphics) or JPG (aka JPEG – Joint Photographic Expert Group) file. I’ll cover that in the next post in this series.
For this post, I’ll cover how to serve Retina ready background images in Utility Pro with a Sass mixin when using JPG or PNG formats. They’ll always look sharp on HDPI (High Density Pixel and/or Retina displays). Read my previous post for an intro on that.
Utility Pro Developer Edition and Sass
Adding a Sass Mixin
A Sass mixin is an easy way to generate the CSS code. The mixin is stored in one place, so it is easy to maintain. You can call it from any other partial with @include and passing the values.
To replicate the example in my previous post using a Sass mixin, you will need to edit the _header.scss.
I replaced this code in my _header.scss partial.
With this code:
The above code calls the ImgRetina() mixin. Here is the code I added to my _mixin.scss partial to create the imgRetina() mixin. I adapted it from some code I found on Snippet Central to use the code recommended by Chris Coyier at CSS-Tricks. I added some additional parameters to the mixin to make it more flexible and provide some defaults. The snippet below goes in your _mixin.scss partial.
_mixin.scss partial for your Utility Pro theme, you’ll need to add one.Utility Pro developer edition does not include a mixin partial. If you add a _mixin.scss, be sure to include the _mixin.scss partial in your style.scss file. I added it just beneath the _variables.scss partial.
| /* Resets | |
| ---------------------------------------------------------------------------------------------------- */ | |
| @import "partials/reset"; | |
| /* # Variables | |
| ---------------------------------------------------------------------------------------------------- */ | |
| @import "partials/variables"; | |
| /* Mixins | |
| ---------------------------------------------------------------------------------------------------- */ | |
| @import "partials/mixins"; |
Breaking Down the Sass mixin
Let’s go over what this mixin does. It is passed the url ‘images/logo‘ without the file extension, the file extension, the width, the height, position and repeat values. The position and repeat have defaults of center and no-repeat if a value is not passed. Since Utility Pro is mobile first, we pass the logo with a position of center (for mobile displays). The mixin is called again within the media query with a position of left (for desktop displays).
Each time the mixin is called, it generates the background code along with an @media query checking if the device is a HDPI. If it is, it serves the @2x file.
Here is how the CSS is generated:
Use for any background image – not just logos
I used this ImgRetina() mixin to display the background photo in the footer widget on the home page. It is the image with a circular border. I uploaded two versions of the image to my image folder: waterlily.jpg and waterlily@2x.jpg. I added a border-radius of 50% to make it circular. On a HDPI or Retina display, waterlily@2x.jpg is served.
Here is how the CSS is generated:
That’s a Wrap
As I mentioned above, using a SVG is the preferred way to add to a logo to your WordPress site and I’ll cover that in my next post. When using PNGs for graphics and JPGs photos for background images, like the waterlily image in the footer – the imgRetina() mixin is a good option.
Resources:
Mixin code snippet adapted from Snippet Central
http://www.howtogeek.com/howto/30941/whats-the-difference-between-jpg-png-and-gif/