GrayofD4
8/31/2016 - 6:40 PM

Slideshow alternative that slides backgrounds behind the content of a shortcode

Slideshow alternative that slides backgrounds behind the content of a shortcode

.masthead-chunk {
	position: relative;
	background-color: #004394;
}

.masthead-chunk .cycle-slideshow, .masthead-chunk .cycle-slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}
.masthead-chunk .masthead-content {
	padding: 110px 0 150px;
}
.masthead-content {
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,83,169,0.7) 0%, rgba(0,83,169,0.7) 20%, rgba(0,83,169,1) 72%, rgba(0,83,169,1) 100%);
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,83,169,0.7) 0%,rgba(0,83,169,0.7) 20%,rgba(0,83,169,1) 72%,rgba(0,83,169,1) 100%);
	background: radial-gradient(ellipse at center, rgba(0,83,169,0.7) 0%,rgba(0,83,169,0.7) 20%,rgba(0,83,169,1) 72%,rgba(0,83,169,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b30053a9', endColorstr='#0053a9',GradientType=1 );
	position: relative;
}
.masthead-chunk .cycle-slide {
	background-size: cover;
}
<?php

function shortcode_masthead( $atts, $content ) {
	wp_enqueue_script('jcycle2');
	$output .= '<div class="masthead-chunk">';

		$output .= '<div ';
			$output .= ' class="cycle-slideshow"'; // Initializing class, default for cycle2
		#	$output .= ' data-cycle-pager="#per-slide-template"'. // Connects to #per-slide-template box below
			$output .= ' data-cycle-slides=".cycle-slide"'; // identifies the class identifier for slides
		#	$output .= ' data-pause-on-hover="true"'; // Pause on hover
			$output .= ' data-timeout="3000"'; // The time between slide transitions in milliseconds.
			$output .= ' style="position:absolute;"';
		$output .= '>';

			$slidequery = new WP_Query(array(
				'post_type' => 'skivvy_slider',
				'posts_per_page' => 5,
				'order' => 'ASC',
				'orderby' => 'rand'
			)); while ( $slidequery->have_posts() ) {

				$slidequery->the_post();

				$background_image = '';
				if (has_post_thumbnail()) {
					$image_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'full', true);
					// Background image code. if undesired, Hash out $background_image
					$background_image = 'background-image:url(\'' . $image_url[0] . '\');';
				}

				$output .= '<div class="cycle-slide slide-' . get_the_ID() . '" style="position:absolute;' . $background_image . '">';
				#	$output .= '<div class="page-wrapper">';
						# do_shortcode('[video_bg]').
						# the_title('<h1>', '</h1>');
						# the_content();
				#	$output .= '</div>';
				$output .= '</div>';


			} wp_reset_postdata();
		$output .= '</div>';
		$output .= '<div class="masthead-content">';
			$output .= '<div class="page-wrapper">';
				$output .= do_shortcode( $content );
				$output .= '<div class="clear"></div>';
			$output .= '</div>';
		$output .= '</div>';
	$output .= '</div>';

	return $output;
} add_shortcode( 'masthead', 'shortcode_masthead' );