So some of you may have noticed that the header images on this site have not been responsive.
I really wanted to add custom header support to the Genesis Sample Theme I am using here. I wanted to be able to rotate images I uploaded through the Customizer so that various posts and pages would display different images. However, when I added the custom header feature, my header images were NOT responsive.
I tried all sorts of CSS to make it happen. No go. But I was sure that there was some way of adding header images that I could make fairly responsive, like I have done on my LetsBSocial website. There are certain other elements to the responsive design there that don’t exist here. The theme I am using there is the BuddyBoss theme for BuddyPress driven sites. LetsBSocial is a BuddyPress driven site. When I view LetsBSocial on my iPhone, the header image becomes a sliver of itself situated vertically to the right of the mobile primary navigation menu that is also stacked vertically.
What I wanted to achieve at this time was to be able to reduce the width of the header image proportionately like I had done on LetsBSocial. To achieve that, you need to be able to implement
The Genesis Framework and its accompanying Genesis Sample (Child) Theme are set up somewhat differently than BuddyBoss. The Framework is even set up differently than Underscores. To compare the three themes would be like comparing apples to oranges, but I was able to replicate the
background-size: cover; result.
There are certain features I really like about Genesis that aren’t readily apparent in BuddyBoss or Underscores. The thing that I like most about Genesis, is that the development turn-around is pretty quick, and the theme is responsive out of the box. So if a client needs to get a pretty, flexible-layout, and responsive site up and running quickly, Genesis is an excellent option. More important, I wanted to make sure to add more popular features to the Genesis Framework that might not otherwise be readily apparent, removed, or yet discovered.
After some research and web surfing, I came across a nifty little article entitled “Add a Full Width Responsive Header Image to a Genesis Theme” by Neil Gee for WP Beaches. Yes, it is possible to create a Full Width Responsive Header in Genesis. However, you have to make sure you choose the right image that will initially display as you like. That means that you might have to test out a lot of images without the option of previewing them beforehand.The reason why so many people probably don’t like this method is because you have much less control over what part of an image you capture with
background-size: cover; without a Customizer, so it almost becomes an art form. You face a similar challenge when potentially having to test out many images via the Customizer, but you do get to preview the outcome first. I think that it’s not necessary to have an image in small smart phone screens. A vertical sliver also adds enough pizzazz. However, a small version of the complete image in the smallest screen (as here) does well too.
Getting back to my story, I discovered a cool Genesis feature that I like even better than producing random rotating images in the Customizer. Custom Body Classes. Don’t get me wrong. I love that too! Implementing custom body classes in posts and pages means that you can attribute specific images to specific posts or pages across your site. I’ve decided to do that here. Fo me, this feature will then further differentiate Genesis from a theme framework such as Underscores. It’s a speedy way of implementing custom images to specific pages or posts. Sometimes, it’s about making as pretty a site as possible that is also responsive within the shortest period of time, and that’s what Genesis can do for you!
I’ll leave you to figure out how to implement custom body classes to specific posts or pages that result in different header images. I’d love to hear from you about what results you came up with!