When you view the live demo for Clarified, you will notice there are some pages with banner images.
They depend on what type of page you are on:
- The Front Page – This is the WordPress Custom Header Image feature; it shows only on the front-page
- Page Featured Image – When you add a featured image to a page, they become banner images.
- Post Featured Image – This will only be seen if you choose one of the banner image-based post layouts; you need a featured image for this to work correctly.
To ensure that you have the best-looking featured images, I recommend using quality photos that have large enough and sharp-looking quality. I would also recommend optimizing them if their file size is huge. It’s a balance of quality and file size that is important.
Banner Image Height Options
- Go to Appearance > Customize > Featured Image Options
- At the top, you will see a set of 3 sliders, each one will change the height of your banner viewable area on the front-end. The minimum size is 30, while the maximum is set to only 70. We didn’t want to go 100% because this theme is not designed for full browser height image viewing, but if you really want 100%, submit a support request and we can show you how to do this with some custom CSS.
- Once you are happy with the height you have, click Publish at the top.
NOTE: Adjusting the height for each of the banner types, will affect “all” pages that have the banner image feature. We should also mention that the values set are not actually percent (%) but vertical height (vh) values. The full range is 0 to 100 for
Banner Image Position Options
What can happen is when you upload and use an image for your page or post, it is that the subject matter might not be positioned as you would like it. By default, the banner area positions your image is centered (middle) of the viewable background area. If you find that most if not all of your images have parts of the subject cut off, we can reposition the banner image.
You can position your image to have it start at the top of the viewable area, centered, or have the bottom of the image begin at the bottom viewable area.
- Go to Appearance > Customize > Featured Image Options
- Look for the appropriate banner image setting for positioning, and decide what works best. Please note that what you change here will affect “all” other pages for that particular banner image type.
- Click Publish when ready.
Mobile Banner Image Views
The above sizing will only affect desktop monitor viewing since there are many types of mobile devices. We have a default banner image height set to be 30%. Only when you view your pages on a desktop monitor, the adjusted sizing will take effect.