How to overlay Post titles on featured images on single posts in Ambiance Pro

In StudioPress forums a user asked:

Could anyone tell me pls how I can move page title on specific pages over these big feature images.

Let’s first look into how the titles can be relocated from their default position to over the featured images for ALL posts with featured images in Ambiance Pro.

What we are aiming for:

Here’s how this can be set for all single posts:

In functions.php change

//* Hook entry background area
add_action( 'genesis_after_header', 'ambiance_entry_background' );
function ambiance_entry_background() {

    if ( is_singular( 'post' ) || ( is_singular( 'page' ) && has_post_thumbnail() ) ) {

        echo '<div class="entry-background"></div>';

    }

}

to

// Hook entry background area.
add_action( 'genesis_after_header', 'ambiance_entry_background' );
function ambiance_entry_background() {
    if ( is_singular( 'post' ) || ( is_singular( 'page' ) && has_post_thumbnail() ) ) {

        echo '<div class="entry-background">';
        genesis_do_post_title();
        echo '</div>';

    }
}

// Remove entry title from its default location on single posts.
add_action( 'genesis_before_entry', 'sk_remove_entry_title' );
function sk_remove_entry_title() {
    if ( ! is_singular( 'post' ) ) {
        return;
    }

    remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
}

Then add the following in style.css:

.entry-background .entry-title {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    width: 80%;
    text-align: center;
}

To make this happen on specific Posts, we shall create a custom checkbox labelled Relocate Title? using ACF Pro and make a few changes in the code.

Install and activate Advanced Custom Fields.

Go to Custom Fields > Custom Fields. Create a new field group called say Post Meta as shown in the screenshot below (here’s [mirror) the XML import if you’d like to import]:

Change the code added earlier in functions.php to:

//* Hook entry background area
add_action( 'genesis_after_header', 'ambiance_entry_background' );
function ambiance_entry_background() {

    if ( is_singular( 'post' ) || ( is_singular( 'page' ) && has_post_thumbnail() ) ) {

        $relocate_title = get_post_meta( get_the_ID(), 'relocate_title', true );

        echo '<div class="entry-background">';
        if ( 1 == $relocate_title ) {
            genesis_do_post_title();
        }
        echo '</div>';

    }

}

// Remove entry title from its default location on single posts.
add_action( 'genesis_before_entry', 'sk_remove_entry_title' );
function sk_remove_entry_title() {
    $relocate_title = get_post_meta( get_the_ID(), 'relocate_title', true );

    if ( 1 != $relocate_title || ! is_singular( 'post' ) ) {
        return;
    }

    remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
}

Now visit the posts where you’d like the title to be relocated to/overlayed on the featured image and tick Relocate Title? in the “Post Meta” section.

Update/Publish.

The titles will be relocated for only those Posts in which Relocate Title? has been ticked. Other posts will continue to appear as per the default theme configuration.