jcadima
3/9/2015 - 6:37 AM

How to add a full width banner with a featured image, 1) add a featured image to the page 2) create a custom field for the banner title info

How to add a full width banner with a featured image,

  1. add a featured image to the page
  2. create a custom field for the banner title info
new_gist_file.php
content_copyfile_download

get_header(); ?>
<?php // check if page has a featured image set
if (has_post_thumbnail( $post->ID ) ): ?>
<?php // get image src first
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<!-- use it as background for this container   -->
<div class="interiorbanner" style="background-image:url('<?php echo $image[0]; ?>');">
    <!-- use offset-2 to align to center  -->
		<div class="col-md-8 col-md-offset-2"> <!-- offset 2 is used to center it  -->
      <!--  create a custom field for the banner title/info etc  -->
      <span class="tag1"><?php the_field('banner_title'); ?></span>

    </div><!--colmd8-->

</div>
<?php endif; ?>
new_gist_file.css
content_copyfile_download

span.tag1 {
font-family: gobold;
font-size: 4.5em;
color: white;
text-transform: uppercase;
text-align: center;
margin-top: 120px;
display: block;
line-height: 1;
}

.interiorbanner {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
height: 643px;
display: block;
margin: 0px auto 0;
width: 100%;
position: relative;
padding-top: 1px;
overflow: hidden;
}