Blox

Content Blocks for the Genesis Framework

Full Width Banner Image with Post Title Overlay

By Nick Diego

Setup

In this tutorial, we are going to add a full width banner image to all posts. The banner will pull the post’s featured image, if it has one, or a default custom image if not. We will add the title of the post as a caption on top of the banner. Finally, we will remove the default post title and post info using the Sandbox Addon.

Theme Used: Genesis Default Theme
Block Type: Global
Content Type: Static Image
Addons Used: Sandbox
Shortcodes Used: blox-page-title

Video Walkthrough

Tutorial Code

This tutorial includes some custom CSS for styling the banner image. It also used some PHP code in conjunction with the Sandbox Addon to remove the original post titles and post info. The code that we used is below:

Custom CSS


/* Edit the block id to match the block you are working on */
#blox_global_95 .blox-caption-container {
display: table; /* Required to vertically center text */
height: 100%; /* Make container cover whole image */
text-align: center; /* Center align the page title */
top: 0; /* Make container cover whole image */
}
#blox_global_95 .blox-caption-wrap {
background: none; /* Remove overlay */
display: table-cell; /* Required to vertically center the page title */
vertical-align: middle; /* Vertically center the header over the image */
}
#blox_global_95 .blox-caption-wrap h1 {
color: #fff;
font-size: 50px;
}
/* Mobile Styles for Default Genesis Theme */
@media only screen and (max-width: 800px) {
#blox_global_95 .blox-image-wrap.blox-image-background {
height: 300px; /* Make image look a little better on mobile */
}
#blox_global_95 .blox-caption-wrap h1 {
font-size: 36px; /* Make page title look a little better on mobile */
}
}

view raw

blox_tutorial_banner_image_all_posts_page_title.css

hosted with ❤ by GitHub

Sandbox PHP


// Remove the title and post info from all posts
// This code needs to be added via the Sandbox Addon or be added directly to your functions.php file
add_action( 'genesis_before', 'blox_remove_post_title' );
function blox_remove_post_title() {
if ( is_singular( 'post' ) ) {
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
}
}

view raw

blox_tutorial_banner_image_all_posts_page_title.php

hosted with ❤ by GitHub


About Nick Diego

Nick is the lead developer of Blox and is a founding partner of Outermost Design, LLC. He is chiefly responsible for all the code behind Blox and the available addons. He lives in Burlington, Vermont, with his wife and two dogs.

Unleash the power of your Genesis theme!

View Blox Pricing

Stay in the Loop