Solution: displaying a background image in the header on the post page. In the theme file you need to add above <!-- Titlebar code:
and wrap the #titlebar itself with a div .parallax
And then in the custom fields of the posts we add a background image
PHP:
<?php
$parallax = get_post_meta($post->ID, 'listeo_parallax_image', TRUE);
$parallax_color = get_post_meta($post->ID, 'listeo_parallax_color', TRUE);
$parallax_opacity = get_post_meta($post->ID, 'listeo_parallax_opacity', TRUE);
$title = get_the_title($post->ID);
$subtitle = get_post_meta($post->ID, 'listeo_subtitle', true);
$parallax_output = '';
$parallax_output .= (!empty($parallax)) ? ' data-background="'.esc_url($parallax).'" ' : '' ;
$parallax_output .= (!empty($parallax_color)) ? ' data-color="'.esc_attr($parallax_color).'" ' : '' ;
$parallax_output .= (!empty($parallax_opacity)) ? ' data-color-opacity="'.esc_attr($parallax_opacity).'" ' : '' ;
?>and wrap the #titlebar itself with a div .parallax
HTML:
<!-- Titlebar
================================================== -->
<div class="parallax titlebar" <?php echo wp_kses_post($parallax_output); //XSS ok, escaped above ?> >
<div id="titlebar" class="<?php echo esc_attr(get_option('listeo_blog_titlebar_style','gradient')); ?>">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2><?php echo get_option('listeo_blog_title','Blog'); ?></h2>
<span><?php echo get_option('listeo_blog_subtitle','Latest News'); ?></span>
<!-- Breadcrumbs -->
<?php if(function_exists('bcn_display')) { ?>
<nav id="breadcrumbs">
<ul>
<?php bcn_display_list(); ?>
</ul>
</nav>
<?php } ?>
</div>
</div>
</div>
</div>
</div>And then in the custom fields of the posts we add a background image
