Standard Banner (Baked-in shading with text overlay)

HTML/PHP Snippet

Note: Text in ALL CAPS should be updated.

		
	<section class="banner" style="background-image: url(/common/images/banners/BANNER-NAME.jpg);">
		<div>
			<h1><span class="degreeType"><?php print $GLOBALS["degreeType"]; ?></span>
				<span class="nowrap"><?php print $GLOBALS["myTitle"]; ?></h1>

			<p>CAPTION TEXT.
				<!-- Brand long variable -->
				<?php returnBrand($GLOBALS["brand"], "long") ?>
				<!-- Brand short variable -->
				<?php returnBrand($GLOBALS["brand"], "short") ?>
			</p>

			<?php rfiButton("ghost invert"); ?>
		</div>
	</section>
		
	

HTML Example

		
	<!-- Instructions in Comments -->
	<!-- Banner images should be uploaded to /common/images/banners/
	Then update the inline style below with your new banner image.
	Note that shaded area for text readability is baked into the image
	(check with George for a PSD template). -->
	<section class="banner" style="background-image: url(/common/images/banners/business-administration.jpg);">
		<!-- div tag contains text overlay -->
		<div>
			<!-- h1 heading, first span contains degree type, second span contains program name -->
			<h1><span class="degreeType">online Master of Business Administration in</span>
				<span class="nowrap">Business Administration</span></h1>
			<!-- caption text in paragraph -->
			<p>American Military University prepares students to be principled leaders in the global business community through a flexible learning environment that leverages technology and best practices focused on the practical application of knowledge.</p>
			<!-- Optional CTA / use this PHP function to insert RFI Overlay button:
			<?php rfiButton("ghost invert"); ?>
			which outputs the below button-styled anchor with proper data attributes -->
			<a id="lp5_rfi_overlay" class="rfi-overlay-button button ghost invert" title="Request Information" data-level="masters" data-program="Business Administration" href="#rfi-off-canvas">Request Information</a>
		</div>
	</section>
		
	

The section is what delineates banner content. The inner div shapes & positions its contents. The H1 and paragraph are for SEO and introducing the rest of the page content. Note that the H1 may look like two different elements because of the degreeType styling. For SEO reasons, it is one phrase and should make sense as such. Standard banners have white text on a default background image specified by CSS and designed so the width of the div content is less than half the banner positioned on the right.

Dynamic Brand Names

You can dynamically include the full university brand name or the university brand acronym in the caption text using these PHP functions.

		
	<!-- Full Brand Name "long" -->
	<?php returnBrand($GLOBALS["brand"], "long") ?>
	<!-- Brand Acronym "short" -->
	<?php returnBrand($GLOBALS["brand"], "short") ?>
			
		

RFI Button Function

You can dynamically insert an RFI overlay button using the php below. This function checks the URL for the program name and level (per our standard naming structure) and echoes a button-styled anchor with data attributes using those URL values to control the preselection of degree level and type in the RFI.

			
	<!-- Function / Note the the text in quotes are button classes.
	Ghost and Invert are the default for the RFI in the banner but can optionally be changed. -->
 	<?php rfiButton("ghost invert"); ?>

	<!-- What it actually does (FYI) -->
	echo '<a id="lp5_rfi_overlay" class="rfi-overlay-button button '
	. $a . '" title="Request Information" data-level="'
 	. $levelSelect . '" data-program="' . $rfiSelect
 	. '" href="#rfi-off-canvas">Request Information</a>';
			
		

Banner Without Text

HTML Snippet

			
	<section class="banner"
	style="background-image: url(/common/images/banners/BANNER-NAME.jpg);
	background-size: cover;
	min-height: 330px;">
	</section>
			
		

Notes

• Image should have no baked-in shaded area
• Add inline style background-size: cover
• Add inline style min-height: 330px (the minimum height depends on the native pixel dimensions of the image and whether cropping is okay)
• Remove standard caption HTML and optional CTA

Banner With Text and CSS Background Overlay

HTML/PHP Snippet

			
	<section class="banner" style="background-image: url(/common/images/banners/ocs-connect.jpg);
	background-position: top center;
	background-size: cover;">
		<div style="background: rgba(0,0,0,0.5);
		padding: 2em;">
			<h1><span class="degreeType">online Master of Arts in</span>
				<span class="nowrap">Saluting Properly</span></h1>
			<p>With a strong military heritage, AMU educates those in the military, defense, national security, public safety, and related communities.</p>
			<?php rfiButton("ghost invert"); ?>;
		</div>
	</section>
			
		

Notes

• Image should have no baked-in shaded area
• Add inline style background-size: cover (keeps long caption from breaking layout)
• Add optional inline style background-position. Value depends on image and desired focal area.
• Add inline styles to <div> background: rgba(0,0,0,0.5) and padding: 2em
• Add optional inline style min-height (depends on whether the text in the caption creates a desired minimum height / also avoid too long of a caption)

Large Banner

HTML/PHP Snippet

			
	<section class="banner" style="background-image: url(/common/images/banners/ocs-connect.jpg);
		background-position: top center;
		background-size: cover;
		min-height: 480px">
		<div style="background: rgba(0,0,0,0.5);
		padding: 2em;">
			<h1><span class="degreeType">online Master of Arts in</span>
				<span class="nowrap">Saluting Properly</span></h1>
			<p>With a strong military heritage, AMU educates those in the military, defense, national security, public safety, and related communities.</p>
			<?php rfiButton("ghost invert"); ?>;
		</div>
	</section>
			
		

CSS Snippet (add in page/include)

			
			@media only screen and (max-width: 637px) {
				.banner > div {
						padding: 2em;
						bottom: 0;
						position: absolute;
				}
			}
			
		

Notes

• Follow all directions for the type of banner you are creating: baked-in shading, css shading, no text/shading...
• Add inline style min-height: 440px (where the value is the desired minimum height)
• Include CSS Snippet in page.
• Note: for CSS shading and text overlay the mobile version will not necessarily cover the image by default and will snap to the bottom of the frame. This module will be fleshed out (as a default) for LP6.

Video Banner

PHP Snippet

			
	<?php
		// Add to the php tag at the top of a page or in a new tag.
		$movieID = "bz6cluulhy"; //the Wistia movie ID
		include($GLOBALS["coreContentDir"]."_includes/bannerloop.php"); //the standard video hero include
	?>
			
		

Notes

• Update Wistia movie ID in page

Video Banner with Text Overlay (and RFI)

PHP Snippet

			
		<?php
		// Add to the php tag at the top of a page or in a new tag.
		$movieID = "bz6cluulhy";
		$caption = "<h1 class='degreeType'>ONLINE " . $myTitle . "</h1>";
		$padTop = "42"; // padding top percent (line 19): 42
		$posBottom = "19";// position bottom percent (line 24): 19
		include($GLOBALS["coreContentDir"]."_includes/bannerloop-large-headline.php"); //the video hero include with caption and RFI
		?>
			
		

Notes

• Optionally add custom $caption value. Default mimics standard image banner "Online [degree level] in [degree name]"
• Update Wistia movie ID in page
• Ask George about padding variables
• Note: the include name indicated -large-headline but that's because these were initially created for school pages with a larger headline. See more below.

Video Banner with Text Overlay (No RFI)

PHP Snippet

			
		<?php
		// same as above but swap the include for this:
		include($GLOBALS["coreContentDir"]."_includes/bannerloop-large-headline-no-rfi.php"); //the video hero include with caption an NO RFI
		?>
			
		

Video Banner with Custom-Sized Text Overlay

PHP Snippet

			
		<?php
		// Add to the php tag at the top of a page or in a new tag.
		$movieID = "bz6cluulhy";
		$caption = "<h1 class='degreeType'>School of Arts, Humanities, and Education</h1>";
		$padTop = "42"; // padding top percent (line 19): 42
		$posBottom = "19";// position bottom percent (line 24): 19
		include($GLOBALS["coreContentDir"]."_includes/bannerloop-large-headline-no-rfi.php"); //select the bannerloop-large-headline include with or without RFI
		?>
		<!-- FlowType JS include and controls  -->
		<script type="text/javascript" src="/common/js/flowtype.js"></script>
			<script>
			$(function(){
			  $('h1').flowtype({
			     minimum   : 320, //adjust for best responsiveness in QA
			     maximum   : 1440, //adjust for best responsiveness in QA
			     minFont   : 14, //adjust for best responsiveness in QA
			     maxFont   : 36, //adjust for best responsiveness in QA
			     fontRatio : 11.125 //adjust for best responsiveness in QA
			  });
			});
			</script>
			<!-- In-page CSS for flexbox <figcaption>  -->
			<style>
			.banner.loopVid {
				background-color: #000; //fix for mobile when video doesn't fill space and background peeks through
			}
			.loopVid figcaption {
			  display: flex;
			  flex-direction: column;
			  flex-wrap: nowrap;
			  align-items: center;
			  justify-content: center;
			}
			.loopVid figcaption h1 {
			  flex: 0 1 auto;
			  margin: 0;
			  text-align: center;
			}
			.loopVid figcaption a {
			  flex: 0 auto;
			  margin: 0;
			  text-align: center;
			}
			</style>
			
		

Notes

• Uses flowtype.js in /common/js/
• Adjust flowtype control script values via QA/experimentation for best results (text length dependent)
• Requires in-page css to convert figcaption to flexbox
• Background color fix might be something we want to rollout to default styles