Image Hero

A basic, responsive hero section with an image background, and metabox fields for a title, description text, and an optional call-to-action button. The image hero comes with the hero-image featured image size, which is 1920 x 500px and set to crop=true.

Usage

Use the hero with buttons on the home page. Use the hero without buttons on other pages.

Implementation

						<pre class="language-php"><code>
<?php if ( class_exists( 'wp_component_library' ) ) :
    include( $this->get_component_template_part( 'component', 'image_hero', false ) );
endif; ?>
</code></pre>
					

Code

								
									<section class="hero-area image-as-background" style="background-image: url( http://wp-components.com/wp-content/uploads/2017/05/tires.jpg );" role="dialog" aria-labelledby="hero-title" aria-describedby="hero-description">
	<div class="hero-content">
					<h2 class="hero-title">Improve Your Productivity</h2>
		
					<p class="hero-description">Lorem ipsum dolor sit amet, ad ullum inimicus duo, erant mucius propriae ius no. Pri eros fabellas accusamus an, cu vim mollis conclusionemque. Has intellegat forensibus no, ex omnis iisque graecis vel.</p>
		
						<a href="http://google.com" class="button hero-button">Start Here</a>
						</div><!-- .hero-content -->
</section><!-- .hero-area -->
								
							
								<?php
/**
 * Build the image hero markup.
 *
 * @param  int  The Post ID. By passing a post ID, the hero can be used outside the loop.
 *
 * @author  Carrie Forde
 */
public function image_hero_markup( $post_id = 0 ) {

	if ( ! $post_id ) {
		$post_id = get_the_ID();
	}

	$image       = get_post_meta( $post_id, 'background_image', true );
	$title       = get_post_meta( $post_id, 'title', true );
	$description = get_post_meta( $post_id, 'description', true );
	$cta_button  = get_post_meta( $post_id, 'cta_button', true );

	// Bail if the image is empty.
	if ( empty( $image ) ) {
			return;
	}

	// Start the markup. ūüéČ ?>
	<section class="hero-area image-as-background" style="background-image: url( <?php echo esc_url( $image ); ?> );" role="dialog" aria-labelledby="hero-title" aria-describedby="hero-description">
		<div class="hero-content">
			<?php if ( ! empty( $title ) ) : ?>
				<h2 class="hero-title"><?php echo esc_html( $title ); ?></h2>
			<?php endif; ?>

			<?php if ( ! empty( $description ) ) : ?>
				<p class="hero-description"><?php echo esc_html( $description ); ?></p>
			<?php endif; ?>

			<?php if ( ! empty( $cta_button ) ) :
				$button_text = get_post_meta( $post_id, 'button_text', true );
				$button_link = get_post_meta( $post_id, 'button_link', true );
				?>
				<a href="<?php echo esc_url( $button_link ); ?>" class="hero-button"><?php echo esc_html( $button_text ); ?></a>
			<?php endif; ?>
		</div><!-- .hero-content -->
	</section><!-- .hero-area -->

        <?php
}
							
								//--------------------------------------------------------------
// IMAGE HERO
//--------------------------------------------------------------

// Variables
$color-black: #000;
$color-white: #fff;

// Hero container.
.hero-area {
	position: relative;
	z-index: 1;

	// Optional transparent overlay.
	&::after {
		background-color: rgba($color-black, 0.8);
		bottom: 0;
		content: '';
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 2;
	}

	// Would you rather have a gradient overlay? Well then, go ahead and uncomment this.
//	&:after {
//		@include linear-gradient(to bottom, rgba($color-black, 0) 0%, rgba($color-black, 0.50) 50%);
//		@include position(absolute, 0 0 0 0);
//
//		content: '';
//		z-index: 2;
//	}

	// Content container.
	.hero-content {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0 auto;
		max-width: rem(500); // width of content
		min-height: rem(500);  // height of hero
		position: relative;
		text-align: center;
		z-index: 3;

		.hero-title,
		.hero-description,
		.hero-button {
			color: $color-white;
		}

		.hero-description {
			padding-bottom: rem(24);
		}

		.hero-button {
			background: transparent;
			border: 2px solid $color-white;
			padding: rem(12) rem(40);

			&:hover {
				background: rgba($color-black, 0.7);
				text-decoration: none;
			}
		} // .hero-button
	} // .hero-content
} // .hero-area

// Style the background with a class
// for accessibility reasons. (This is already in wd_s)
.image-as-background {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}