Why is the WordPress Kahuna Theme Messing with my Images?
As WordPress theme writers work with the functions of the WordPress core, there can be some interesting bugs. A bug is an unintended glitch in the programming. The Kahuna theme has a bug with how it uses the WordPress Featured Image function. On the one hand, having your theme use images through the core WordPress functions is a good thing. In the past, there have been themes and plugins that have stored images in other locations, which made them unavailable to other functions on the site.
What is a WordPress Featured Image
WordPress makes images available to your website through a function called the Media Library. The Media Library shows the images and other files you have uploaded into your server file structure. But, the fact that an image is in the Media Library doesn’t connect those images to specific posts or pages.
When you use the Add Media button on a Post or Page, you can choose an image that is already in the Media Library or you can choose to upload an image to the Media Library from your computer. It is that Add Media function that connects the image to your Post or Page. WordPress adds a record to the database, making that connection.
Your Post or Page may have many images. There are places where you may want one specific image to represent a Post or a Page on other pages of the site.
For example, WordPress has a function to make pages that list all the Posts in a Category. Another function of the WordPress core is that the category pages can display an image for each Post. To tell WordPress what image to show, you use the Featured Image link that shows at the bottom of the right column in Edit Post.
Where Do the Banner Images Come In?
Theme writers can use the WordPress functions however they want to. They may use them well; they may use them not so well. In the case of the Kahuna theme, Posts pick up the Featured Image as the banner image. The problem is that a squarish Featured Image that works for the Category pages is not a great shape for a short, wide banner image. So, the image has to be resized somehow.
The Kahuna theme has quite a few options for banner images in the Customizer. Unfortunately, the interface is not intuitive. For Posts, the Customizer item Post Information -> Featured Image is where we want to go for the banner images for Posts and Pages.
The choice in the panel is whether the Featured Image is Enabled. It is difficult to say what the scope of this setting is. For example, does it affect the banner image and the image on the category pages? Three Google searches for different combinations of words did not reveal an answer, but it is clear that the Featured Image must be enabled.
The second item in Featured Image is Auto Select Image from Content. This feature as well does not seem to have documentation.
One of the issues I’ve noticed with the Kahuna Customizer is that the controls are quite mixed up in the different panels. In this case, the Featured Height affects the image in a Category page (see screenshot of pig and camera above), but does not affect the height of the image in the banner. The height of the banner image is set in Dashboard -> Appearance -> Customize -> Header.
In the case of the banner, there is a basic HTML principle affecting the height of the image. The image in the banner is coded as a background image. That means that by default it is actually the size of the layer surrounding the image, not the size of the image itself. The normal behavior of a background image is to tile to fill a space. If the space is smaller than the image, it shows the part of the image that fits into the space. That explains the strange cropping of the bug in my banner. Only the top part of the bug shows because the layer is picking up the top 250px of the image.
But there are additional properties you can add to a background image that controls how it shows as a background. This is where the writers of the Kahuna theme could have done a better job.
Is It Possible for the Whole Image to Show?
For the whole image to show, the image itself must be 250px tall or how the image shows must be constrained by CSS coding. Here is the code that controls the layer. I used the Firefox Inspector to find this code on the page. The key rules here are the three that start with background. The first change I am going to try is to change background-cover to contain. I will make this change in the child theme style.css file.
background-size: cover – Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
background-size: contain – Resize the background image to make sure the image is fully visible
#masthead .header-image
{
display: block;
width: inherit;
max-width: 100%;
margin: 0 auto;
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
}
Now comes the tricky part because the code change doesn’t work. Notice in the screen shot, that the code in the child theme (1) overrides the code in the parent theme (2). So, the background-size rule should be working.
Fix 1: On a search for the problem, we find that if you have a background rule with the shorthand version, you can’t add contain in a rule separate from the background rule. That is not the case here, but it was something that needed to be checked. https://stackoverflow.com/questions/21388712/background-size-doesnt-work
Fix 2: Is other code causing the problem? Yes! In layer 2, there are other rules that are causing the problem. You can see more about this in the discussion on StackOverflow. Often when there is a problem it is not the specific line of code but other code, or an interaction between several lines of code.
But, in focusing on the specific code issues, we didn’t deal with the real problem: planning.
Watching out for Side Effects
Whatever settings and code you choose, they will affect all the banners, not just one. This means that planning your images is key. The truth is that it is very difficult to use the same image in views that are more square in one place and very horizontal in another. To get the full width of a banner, you have to take a slice that may obscure the main focus of the image. So, even if we conquer the technical issues above, that may not actually be the solution.
Another solution may just be to use two images. Since there is only one Featured Image in the WordPress default, we need a different structure to use two images.
Structure 1: Find a plugin that accommodates 2 feature images. Assign one to the banner and the other to other uses.
Structure 2: Find a banner plugin that doesn’t use the Featured image at all. The plugin should allow you to choose a banner image on the Edit page for each Post or Page to be effective.