Standard Section Functionality

This functionality simplifies the process of creating a “standard section” on a website (it can also be used to create a hero section), where there is a block of text and an image. The image can aligned to the left, right, or bottom, and this has many additional features to make creating pages easier. The function is set up to handle mobile views, and has functionality to adjust the display as the browser changes size.

Image Examples

Image on the left

Image on the right

Image at the bottom

As a hero section

Including the File (WordPress)

require_once(get_template_directory()."/functions/fn_GetStandardSection.php");

These can be used to get data from wordpress ACF Forms

require_once(get_template_directory().”/saphire-blocks/standard-section/standard-section.php”);

$Careers = GetStandardSection(“Careers”);

Including the File (Non-Wordpress)

require_once("saphire-blocks/standard-section/standard-section.php");

Using the Function

<?php
$data['Title'] = "Just Some Title";
$data['Text'] = "Just some text goes here.";
$data['Image'] = "images/mytestimage.jpg";
Saphire_Standard_Section($data);
?>

Content Data Settings

$data[‘Title’]	Adds a title
$data[‘Text’]	Adds a text section beneath the title
$data[‘PreTitle’]	Adds a pre-title above the main title
$data[‘Image’]
$data[‘ImageMobile’]	Optional, swaps out ‘Image’ with this if browser is less than ‘CollapseWidth’
$data[‘ButtonText’]
$data[‘ButtonTarget’]
$data[‘ButtonClass’]
$data[‘Html’]	If we need to include HTML in the content area, use this

Settings

Additional behaviors can be called by adding in any of the following to the array (for example: $data[‘ClassWrapper’]):

$data[‘CollapseWidth’]	The minimum dimension for the desktop arrangement (with image on left or right). Below this width, the image drops below the text.
$data[‘ClassWrapper’]	Adds a class to the section wrapper. For instance, setting this to $data[‘ClassWrapper’] = “my-class” will add the “my-class” class to the section wrapper.
$data[‘Height’]
$data[‘BackgroundColor’]	Adds a background color to the section
$data[‘ImagePosition’]	Can be set to “left”, “right” (default), “bottom”
$data[‘ImagePlacement’]	Can be “content” or “section”. Determines if image is placed as a background on the entire section (full screen width), or just the content section (usually contained to 1200px, but can be set with the “MaxWidth” setting.
$data[‘MaxWidth’]	The maximimum width the main content area (defaults to 1200px) (must be set in increments of 100)
$data[‘ContentWidth’]	Sets the width on the specific content area (title, text). This should include units (ie: 500px, 30%)
$data[‘ContentMaxWidth’]	Sets a maximum width on the content area (title, text). This shoull include units (ie: 500px, 30%)
$data[‘ContentCenterLessThan’]	If set, the content area will center align below this browser width (don’t include units)
$data[‘ContentPadding’]	Adds padding around the content area (defaults to 75px of top padding). Padding gets set to 75px 0 0 0″ when below the “CollapseWidth”.
$data[‘BreakpointBackground’]	Allows the image’s horizontal placement to be ajusted for various screen sizes
$data[‘ImageBreakpoints”]	“1700,-100;1450,-200;1150,-325”;
$data[‘TitleHeadingTag’]	Defaults to “h2”, but can be set to “h1″,”h2″,”h3”,etc..
$data[‘ImageStyle’]	Lets you add style declarations straight to the image tag.