Adding Retina Support for Logo in Genesis Framework
Devices are getting more and more dense, and there isn’t much I hate more than spending hours working on a logo only to see a pixelated mess on my iPhone. To optimize your images for higher-res devices, you don’t increase your PPI (necessarily), you have to increase the actual pixel count. This is great, unless you’re working within a framework or working on a client’s existing site–and they limit the size of picture you can upload, or automatically scale it down.
The Genesis framework embeds your image URL into the your PHP document via Inline CSS, which can’t be overridden via a stylesheet. The problem with this is that background-image scaling (via css) isn’t fully supported yet, and if you upload an image double the actual size–you’ll be missing half the image.
Therefore, I set out to embed my client’s uploaded image into the <a> tag itself rather than relying on CSS. This allows me to scale the image based on the client’s device and keep it responsive (and beautiful). Here’s what I did.
First thing’s first. We have to remove the default actions and replace them with our own. For this we rely on the very helpful WordPress functions, remove_action and add_action. We are putting the following code in our custom child theme’s functions.php file.
Once this is done, we can write our custom functions:
Basically we have done two things:
1. We have created an image tag that links dynamically to whatever image our client uploads via the Dashboard. We’ve sandwiched that image inside the site-title link where there was hidden text before.
2. We have done away with the inline background CSS property for the <a> tag. This was redundant, as we have an <img> tag inside (and it didn’t work).
One more function, and then we’re done with those–promise. We need to add header image support for our new size (double the size we want to display). We add this to the functions file for that support.
Now, we need to do one more thing, and that’s add a few lines to our CSS file. Genesis has a site-title there usually, and if there is a logo–throws that site-title far away -9999px to be exact. So, when we add our image, it’s -9999px away and you’d have to have a huge monitor to see that. Here’s what we add to our stylesheet. You can add it to your style.css sheet in your child theme.
That’s it! Easy-Peesy.
Now the logo looks beautiful.
Lead Developer and CEO