1. Introduction to wpestate_header_image Function

The wpestate_header_image function is an important component in the WPResidence theme, responsible for generating and displaying header images across various page types. This function is typically located in the header-media-functions.php file.

2. Function Overview

Here’s the basic structure of the wpestate_header_image function:

function wpestate_header_image($image) {
global $post;
$paralax_header = wpresidence_get_option('wp_estate_paralax_header', '');
if (is_category() || is_tax() || is_archive()) {
echo wpestate_get_simple_header_image($image);
} elseif (isset($post->ID)) {
$header_data = wpestate_get_header_data($post->ID);
echo wpestate_get_custom_header_image($image, $header_data, $paralax_header);
} else {
echo wpestate_get_simple_header_image($image);
}
}

3. Step-by-Step Breakdown

3.1 Function Parameters

• $image: The URL of the header image to be displayed.

3.2 Global Variables and Options

• global $post: Accesses the current post object.
• $paralax_header: Retrieves the parallax header setting from theme options.

3.3 Conditional Logic

1. Checks if the current page is a category, taxonomy, or archive page:
   • If true, calls wpestate_get_simple_header_image($image)
2. If not, checks if there’s a current post ID:
   • If true, retrieves custom header data and calls wpestate_get_custom_header_image($image, $header_data, $paralax_header)
3. If neither condition is met:
   • Falls back to wpestate_get_simple_header_image($image)

4. Supporting Functions

4.1 wpestate_get_simple_header_image

This function generates a basic header image HTML:

function wpestate_get_simple_header_image($image) {
return '<div class="wpestate_header_image" style="background-image:url(' . esc_url($image) . ')"></div>';
}

4.2 wpestate_get_header_data

This function retrieves header data based on the post ID:

function wpestate_get_header_data($post_id) {
if (is_page_template('splash_page.php')) {
return wpestate_get_splash_page_data();
} else {
return wpestate_get_regular_page_data($post_id);
}
}

4.3 wpestate_get_custom_header_image

This function generates more complex header image HTML with additional features:

function wpestate_get_custom_header_image($image, $header_data, $paralax_header) {
$header_data = wpestate_apply_default_values($header_data);
$style = wpestate_get_header_style($image, $header_data);
$class = wpestate_get_header_class($header_data, $paralax_header);
$output = "<div class=\"" . esc_attr($class) . "\" style=\"" . esc_attr($style) . "\">";
$output .= wpestate_get_overlay_html($header_data);
$output .= wpestate_get_heading_html($header_data);
$output .= '</div>';
return $output;
}

5. Customization Options

5.1 Modifying Header Image Display

To change how header images are displayed, you can modify the wpestate_get_custom_header_image function. For example, to add a new element:

function wpestate_get_custom_header_image($image, $header_data, $paralax_header) {
// ... existing code ...
$output .= wpestate_get_heading_html($header_data);
$output .= '<div class="custom-header-element">' . esc_html__('Custom Content', 'wpresidence') . '</div>';
$output .= '</div>';
return $output;
}

5.2 Adding New Header Types

To add a new header type, you would need to:

1. Create a new function to handle the new header type.
2. Modify the wpestate_header_image function to include your new header type.

Example:

function wpestate_get_video_header_image($video_url) {
return '<div class="wpestate_video_header"><video autoplay loop muted><source src="' . esc_url($video_url) . '" type="video/mp4"></video></div>';
}
function wpestate_header_image($image) {
// ... existing code ...
elseif (isset($post->ID)) {
$header_type = get_post_meta($post->ID, 'header_type', true);
if ($header_type === 'video') {
$video_url = get_post_meta($post->ID, 'header_video_url', true);
echo wpestate_get_video_header_image($video_url);
} else {
$header_data = wpestate_get_header_data($post->ID);
echo wpestate_get_custom_header_image($image, $header_data, $paralax_header);
}
}
// ... rest of the function ...
}

This guide provides an overview of the wpestate_header_image function in WPResidence, its functionality, and how to customize it. By understanding these components, you can modify and extend the header image functionality to suit your specific needs.