Hero plugin added to core package. (Formerly known as "Bullets")

2025-01-17 12:48:24 +01:00 · 2020-12-16 15:46:11 -08:00 · 2020-12-16 15:46:11 -08:00 · 1fe797b4d5
commit 1fe797b4d5
parent 780a44d4fd
17 changed files with 1929 additions and 1 deletions
--- a/e107_handlers/plugin_class.php
+++ b/e107_handlers/plugin_class.php
@ -1362,7 +1362,7 @@ class e107plugin
 		"_blank","admin_menu","banner","blogcalendar_menu",
 		"chatbox_menu",	"clock_menu","comment_menu",
 		"contact", "download", "featurebox", "forum","gallery",
-		"gsitemap","import", "linkwords", "list_new", "log", "login_menu",
+		"gsitemap","hero", "import", "linkwords", "list_new", "log", "login_menu",
 		"metaweblog", "newforumposts_main", "news", "newsfeed",
 		"newsletter","online", "page", "pm","poll",
 		"rss_menu","search_menu","siteinfo", "social", "tagcloud", "tinymce4",
--- a/e107_plugins/hero/admin_config.php
+++ b/e107_plugins/hero/admin_config.php
@ -0,0 +1,600 @@
+<?php
+
+// Generated e107 Plugin Admin Area 
+
+require_once('../../class2.php');
+if (!getperms('P')) 
+{
+	e107::redirect('admin');
+	exit;
+}
+
+// e107::lan('hero',true);
+
+e107::css('hero', 'css/bootstrap-iconpicker.min.css');
+
+
+
+
+
+class hero_adminArea extends e_admin_dispatcher
+{
+
+	protected $modes = array(	
+	
+		'main'	=> array(
+			'controller' 	=> 'hero_ui',
+			'path' 			=> null,
+			'ui' 			=> 'hero_form_ui',
+			'uipath' 		=> null
+		),
+		
+
+	);	
+	
+	
+	protected $adminMenu = array(
+
+		'main/list'			=> array('caption'=> LAN_MANAGE, 'perm' => 'P'),
+		'main/create'		=> array('caption'=> LAN_CREATE, 'perm' => 'P'),
+			
+		'main/prefs' 		=> array('caption'=> LAN_PREFS, 'perm' => 'P'),	
+
+		// 'main/custom'		=> array('caption'=> 'Custom Page', 'perm' => 'P')
+	);
+
+	protected $adminMenuAliases = array(
+		'main/edit'	=> 'main/list'				
+	);	
+	
+	protected $menuTitle = 'Hero';
+}
+
+
+
+
+				
+class hero_ui extends e_admin_ui
+{
+			
+		protected $pluginTitle		= 'Hero';
+		protected $pluginName		= 'hero';
+
+		protected $table			= 'hero';
+		protected $pid				= 'hero_id';
+		protected $perPage			= 10; 
+		protected $batchDelete		= true;
+		protected $batchExport      = true;
+		protected $batchCopy		= true;
+
+		protected $sortField		= 'hero_order';
+	//	protected $sortParent      = 'somefield_parent';
+	//	protected $treePrefix      = 'somefield_title';
+
+	//	protected $tabs				= array('Tabl 1','Tab 2'); // Use 'tab'=>0  OR 'tab'=>1 in the $fields below to enable. 
+		
+	//	protected $listQry      	= "SELECT * FROM `#tableName` WHERE field != '' "; // Example Custom Query. LEFT JOINS allowed. Should be without any Order or Limit.
+	
+		protected $listOrder		= 'hero_order';
+	
+		protected $fields 		= array (
+		   'checkboxes'         =>   array ( 'title' => '', 'type' => null, 'data' => null, 'width' => '5%', 'thclass' => 'center', 'forced' => '1', 'class' => 'center', 'toggle' => 'e-multiselect',  ),
+		  'hero_id'           =>   array ( 'title' => LAN_ID, 'type' => null, 'data' => 'int', 'width' => '5%', 'help' => '', 'readParms' => '', 'writeParms' => '', 'class' => 'left', 'thclass' => 'left',  ),
+		   'hero_image'       => array('title'=> LAN_IMAGE, 'type'=>'image', 'data'=>'str', 'readParms'=>array('thumb'=>'100x80'), 'writeParms'=>array('media'=>'hero^')),
+
+		  'hero_title'        =>   array ( 'title' => LAN_TITLE, 'type' => 'text', 'data' => 'str', 'width' => '18%', 'inline' => true, 'help' => '', 'readParms' => '', 'writeParms' => array('size'=>'block-level'), 'class' => 'left', 'thclass' => 'left',  ),
+		  'hero_description'  =>   array ( 'title' => LAN_DESCRIPTION, 'type' => 'text', 'data' => 'str', 'width' => '30%', 'inline' => true, 'help' => '', 'readParms' => '', 'writeParms' => array('size'=>'block-level'), 'class' => 'left', 'thclass' => 'left',  ),
+		  'hero_bullets'      =>   array ( 'title' => 'Bullets', 'type' => 'method', 'data' => 'json', 'width' => '35%', 'help' => '', 'readParms' => '', 'writeParms' => '', 'class' => 'left', 'thclass' => 'left',  ),
+		  'hero_button1'      =>   array ( 'title' => 'Button-1', 'type' => 'method', 'data' => 'json', 'width' => '5%', 'help' => '', 'readParms' => '', 'writeParms' => '', 'class' => 'left', 'thclass' => 'left',  ),
+		  'hero_button2'      =>   array ( 'title' => 'Button-2', 'type' => 'method', 'data' => 'json', 'width' => '5%', 'help' => '', 'readParms' => '', 'writeParms' => '', 'class' => 'left', 'thclass' => 'left',  ),
+		   'hero_order'      =>   array ( 'title' => LAN_ORDER, 'type' => 'number', 'data' => 'int', 'width' => '5%', 'help' => '', 'readParms' => '', 'writeParms' => '', 'class' => 'left', 'thclass' => 'left',  ),
+	       'hero_class'      =>   array ( 'title' => LAN_VISIBILITY, 'type' => 'userclass', 'data' => 'int', 'inline'=>true, 'width' => '10%', 'help' => '', 'readParms' => '', 'writeParms' => '', 'class' => 'left', 'thclass' => 'left',  ),
+
+	        'options'             =>   array ( 'title' => LAN_OPTIONS, 'type' => null, 'data' => null, 'width' => '10%', 'thclass' => 'center last', 'class' => 'center last', 'forced' => '1',  ),
+		);		
+		
+		protected $fieldpref = array('hero_image', 'hero_title', 'hero_description', 'hero_bullets', 'hero_button1', 'hero_class');
+		
+
+	//	protected $preftabs        = array('General', 'Other' );
+		protected $prefs = array(
+			'visibility'		=> array('title'=> LAN_VISIBILITY, 'tab'=>0, 'type'=>'userclass', 'data' => 'str', 'help'=>''),
+			'icon_pack'		=> array('title'=> "Icon Pack", 'tab'=>0, 'type'=>'method', 'data' => 'str', 'writeParms'=>array(),'help'=>''),
+			'slide_interval'    => array('title'=>'Slide Interval', 'type'=>'dropdown', 'data'=>'int', 'writeParms'=>array('optArray'=>array())),
+		);
+
+	
+		public function init()
+		{
+			// Set drop-down values (if any).
+			$r = range(1000,10000,1000);
+
+			$opts = array();
+			foreach($r as $v)
+			{
+				$opts[$v] = str_replace('000', '', $v).' second(s)';
+			}
+
+			$this->prefs['slide_interval']['writeParms']['optArray'] = $opts;
+
+		}
+
+		
+		// ------- Customize Create --------
+		
+		public function beforeCreate($new_data,$old_data)
+		{
+			$new_data = $this->processGlyph($new_data);
+
+			return $new_data;
+		}
+	
+		public function afterCreate($new_data, $old_data, $id)
+		{
+			// do something
+		}
+
+		public function onCreateError($new_data, $old_data)
+		{
+			// do something		
+		}		
+		
+		
+		// ------- Customize Update --------
+		
+		public function beforeUpdate($new_data, $old_data, $id)
+		{
+			$new_data = $this->processGlyph($new_data);
+
+			return $new_data;
+		}
+
+		private function processGlyph($new_data)
+		{
+			foreach($new_data['hero_bullets'] as $key=>$row)
+			{
+				if(!empty($row['icon']) && strpos($row['icon'],".glyph")===false)
+				{
+					$new_data['hero_bullets'][$key]['icon'] = $row['icon'].".glyph";
+				}
+
+			}
+
+			return $new_data;
+
+		}
+
+		public function afterUpdate($new_data, $old_data, $id)
+		{
+			// do something	
+		}
+		
+		public function onUpdateError($new_data, $old_data, $id)
+		{
+			// do something		
+		}		
+		
+		// left-panel help menu area. 
+		public function renderHelp()
+		{
+			$caption = LAN_HELP;
+			$text = 'Be sure to enable the hero menu on your home page using the Menu Manager.';
+
+			return array('caption'=>$caption,'text'=> $text);
+
+		}
+			
+	/*	
+		// optional - a custom page.  
+		public function customPage()
+		{
+			$text = 'Hello World!';
+			$otherField  = $this->getController()->getFieldVar('other_field_name');
+			return $text;
+			
+		}
+		
+	
+		
+		
+	*/
+			
+}
+				
+
+
+class hero_form_ui extends e_admin_form_ui
+{
+
+	function icon_pack($curVal,$mode)
+	{
+			$custom = e107::getThemeGlyphs();
+
+
+			$loaded = array();
+			foreach($custom as $val)
+			{
+				$loaded[] = $val['name'];
+			}
+
+
+			$supported = array(
+
+				'materialdesign',
+				'ionicon',
+				'weathericon',
+				'mapicon',
+				'octicon',
+				'typicon',
+				'elusiveicon',
+				'flagicon'
+			);
+
+			$opts = array(
+				'fontawesome' => "FontAwesome",
+				'glyphicon' => "Bootstrap"
+			);
+
+			foreach($supported as $gl)
+			{
+
+				$name = ucfirst($gl);
+
+				if(!in_array($gl,$loaded))
+				{
+					$gl = "__".$gl;
+				}
+
+				$opts[$gl] = $name;
+
+
+			}
+
+			$text = $this->select_open('icon_pack');
+
+			foreach($opts as $key=>$val)
+			{
+				$disabled = (strpos($key,'__')===0) ? 'disabled' : '';
+				$selected = ($curVal === $key) ? "selected" : "";
+
+				$text .= "<option value='".$key."' ".$disabled." ".$selected.">".$val."</option>\n";
+
+			}
+
+			$text .= $this->select_close();
+
+
+			return $text;
+
+	}
+	
+	// Custom Method/Function 
+	function hero_bullets($curVal,$mode)
+	{
+		$value = array();
+
+		if(!empty($curVal))
+		{
+			$value = e107::unserialize($curVal);
+		}
+
+		 		
+		switch($mode)
+		{
+			case 'read': // List Page
+				if(empty($value))
+				{
+					return null;
+				}
+
+			$tp = e107::getParser();
+
+			$text = '<table style="background-color:transparent" cellspacing="4">';
+
+				foreach($value as $row)
+				{
+					$text .= "<tr><td style='width:30px;vertical-align:top'>";
+					$text .= $tp->toIcon($row['icon']);
+					$text .= "</td><td>";
+					$text .= " ".$row['text'];
+					$text .= "</td></tr>";
+
+				}
+			$text .= "</table>";
+				return $text;
+
+			break;
+			
+			case 'write': // Edit Page
+
+				$amt = range(0,4);
+
+				$optAnimation =  array(	"bounce",    "flash",     "pulse",
+    "rubberBand",
+    "shake",
+    "headShake",
+    "swing",
+    "tada",
+    "wobble",
+"jello",
+ "bounceIn",
+    "bounceInDown",
+    "bounceInLeft",
+    "bounceInRight",
+"bounceInUp",
+"bounceOut",
+    "bounceOutDown",
+    "bounceOutLeft",
+    "bounceOutRight",
+"bounceOutUp",
+ "fadeIn",
+    "fadeInDown",
+    "fadeInDownBig",
+    "fadeInLeft",
+    "fadeInLeftBig",
+    "fadeInRight",
+    "fadeInRightBig",
+    "fadeInUp",
+"fadeInUpBig",
+ "fadeOut",
+    "fadeOutDown",
+    "fadeOutDownBig",
+    "fadeOutLeft",
+    "fadeOutLeftBig",
+    "fadeOutRight",
+    "fadeOutRightBig",
+    "fadeOutUp",
+"fadeOutUpBig",
+ "flip",
+    "flipInX",
+    "flipInY",
+    "flipOutX",
+"flipOutY",
+ "lightSpeedIn",
+"lightSpeedOut",
+ "rotateIn",
+    "rotateInDownLeft",
+    "rotateInDownRight",
+    "rotateInUpLeft",
+"rotateInUpRight",
+ "rotateOut",
+    "rotateOutDownLeft",
+    "rotateOutDownRight",
+    "rotateOutUpLeft",
+"rotateOutUpRight",
+  "hinge",
+    "jackInTheBox",
+    "rollIn",
+"rollOut",
+  "zoomIn",
+    "zoomInDown",
+    "zoomInLeft",
+    "zoomInRight",
+"zoomInUp",
+  "zoomOut",
+    "zoomOutDown",
+    "zoomOutLeft",
+    "zoomOutRight",
+"zoomOutUp",
+  "slideInDown",
+    "slideInLeft",
+    "slideInRight",
+"slideInUp",
+ "slideOutDown",
+    "slideOutLeft",
+    "slideOutRight",
+"slideOutUp"
+
+
+		);
+
+				$text = "<table class='table table-condensed table-bordered'>
+				<colgroup>
+					<col style='width:5%' />
+					<col style='width:5%' />
+					<col />
+					<col />
+					<col />
+				</colgroup>
+				<tr>
+					<th class='text-center'>Icon</th>
+					<th class='text-center'>Icon-style</th>
+					<th>Text</th>
+					<th>Animation</th>
+					<th>Delay (secs)</th>
+					</tr>";
+
+
+					$tmp = range(0,60);
+					$optDelay = array();
+
+					foreach($tmp as $val)
+					{
+						$optDelay[$val] = $val/10;
+					}
+
+
+					$optStyle = array('default', 'primary', 'success', 'info', 'warning', 'danger');
+
+				foreach($amt as $v)
+				{
+					$name = 'hero_bullets['.$v.']';
+					$val = varset($value[$v]);
+
+					$text .= "<tr>
+								<td class='text-center'>".$this->glyphPicker($name.'[icon]', $val['icon'])."</td>
+								<td>".$this->btnClass($name.'[icon_style]', $val['icon_style'])."</td>
+								<td>".$this->textarea($name.'[text]',$val['text'],1,80,array('size'=>'block-level'))."</td>
+								<td>".$this->select($name.'[animation]',$optAnimation, $val['animation'], array( 'useValues'=>1), true)."</td>
+								<td>".$this->select($name.'[animation_delay]',$optDelay, $val['animation_delay'], array('size'=>'small'), true)."</td>
+							</tr>";
+
+				}
+
+				$text .= "</table>";
+
+
+				return $text;
+			break;
+			
+			case 'filter':
+			case 'batch':
+				return  array();
+			break;
+		}
+	}
+
+
+	function glyphPicker($name,$value)
+	{
+		$ico = str_replace(".glyph", '', $value);
+
+		$pack = e107::pref('hero','icon_pack', 'fontawesome');
+
+		return '<button class="btn btn-block btn-default iconpicker" role="iconpicker" name="'.$name.'" data-iconset="'.$pack.'" data-icon="'.$ico.'"></button>';
+
+	}
+
+	function btnClass($name,$value,$options=array())
+	{
+
+
+		$text = $this->select_open($name);
+
+		$optStyle = array('default', 'primary', 'success', 'info', 'warning', 'danger');
+
+		$text .= "<option value=''>".LAN_INACTIVE."</option>";
+
+		foreach($optStyle as $s)
+		{
+			$selected = $s === $value ? "selected='selected'" : "";
+			$text .= "<option class='label-".$s."' value='".$s."' {$selected}>".$s."</option>";
+		}
+
+		$text .= "</select>";
+
+		return $text;
+
+	}
+
+
+	private function heroButtonInput($name, $val)
+	{
+
+
+				$text = "<table style='width:100%;margin:2px' cellspacing='3'>
+				<colgroup>
+					<col style='width:5%' />
+					<col />
+					<col />
+				
+				</colgroup>
+				";
+
+
+					$text .= "<tr>
+								<td class='text-center'>".$this->glyphPicker($name.'[icon]', $val['icon'])."</td>
+								<td>".$this->text($name.'[label]',$val['label'],255,array('size'=>'block-level', 'placeholder'=>'Label'))."</td>
+								<td> ".$this->text($name.'[url]',$val['url'],255,array('size'=>'block-level', 'placeholder'=>'URL'))."</td>
+								<td> ".$this->btnClass($name.'[class]', $val['class'])."</td>
+							</tr>";
+
+
+
+				$text .= "</table>";
+
+				return $text;
+
+	}
+
+
+	function renderHeroButton($value)
+	{
+		if(empty($value['label']) && empty($value['class']))
+		{
+			return null;
+		}
+
+		$icon = e107::getParser()->toIcon($value['icon']);
+
+		return "<a href='".$value['url']."' class='btn btn-sm btn-block btn-".$value['class']."'>".$icon." ".$value['label']."</a>";
+
+	}
+
+
+
+
+	
+	// Custom Method/Function 
+	function hero_button1($curVal,$mode)
+	{
+		$value = null;
+
+		if(!empty($curVal))
+		{
+			$value = e107::unserialize($curVal);
+		}
+		 		
+		switch($mode)
+		{
+			case 'read': // List Page
+
+				return $this->renderHeroButton($value);
+			break;
+			
+			case 'write': // Edit Page
+				return $this->heroButtonInput('hero_button1', $value);
+			break;
+			
+			case 'filter':
+			case 'batch':
+				return  array();
+			break;
+		}
+	}
+
+	
+	// Custom Method/Function 
+	function hero_button2($curVal,$mode)
+	{
+		$value = null;
+
+		if(!empty($curVal))
+		{
+			$value = e107::unserialize($curVal);
+		}
+		 		
+		switch($mode)
+		{
+			case 'read': // List Page
+				return $this->renderHeroButton($value);
+			break;
+			
+			case 'write': // Edit Page
+				return $this->heroButtonInput('hero_button2', $value);
+			break;
+			
+			case 'filter':
+			case 'batch':
+				return  array();
+			break;
+		}
+	}
+
+
+
+}		
+		
+		
+new hero_adminArea();
+
+require_once(e_ADMIN."auth.php");
+e107::getAdminUI()->runPage();
+
+e107::js('hero', 'js/bootstrap-iconpicker-iconset-all.min.js');
+e107::js('hero', 'js/bootstrap-iconpicker.min.js');
+
+
+require_once(e_ADMIN."footer.php");
+exit;
+
--- a/e107_plugins/hero/css/bootstrap-iconpicker.min.css
+++ b/e107_plugins/hero/css/bootstrap-iconpicker.min.css
@ -0,0 +1,11 @@
+/*!========================================================================
+* File: bootstrap-iconpicker.min.css v1.9.0 by @victor-valencia
+* https://victor-valencia.github.com/bootstrap-iconpicker
+* ========================================================================
+* Copyright 2013-2017 Victor Valencia Rico.
+* Licensed under MIT license.
+* https://github.com/victor-valencia/bootstrap-iconpicker/blob/master/LICENSE
+* ========================================================================
+*/
+
+.iconpicker .caret{margin-left:10px!important}.iconpicker{min-width:60px}.iconpicker input.search-control{margin-bottom:6px;margin-top:6px}div.iconpicker.left .table-icons{margin-right:auto}div.iconpicker.center .table-icons{margin-left:auto;margin-right:auto}div.iconpicker.right .table-icons{margin-left:auto}.table-icons .btn{min-height:30px;min-width:35px;text-align:center;padding:0;margin:2px}.table-icons td{min-width:39px}.popover{max-width:inherit!important}.iconpicker-popover{z-index:1050!important}.iconpicker-popover .search-control{margin-bottom:6px;margin-top:6px}
--- a/e107_plugins/hero/css/hero.css
+++ b/e107_plugins/hero/css/hero.css
@ -0,0 +1,523 @@
+/* css */
+
+.hero-list-icon {
+	display: table-cell;
+	vertical-align: middle
+	}
+
+li .hero-list-icon .hero-icon {
+	margin: 0 20px 0 0;
+	margin: 0 2rem 0 0
+	}
+
+.hero-icon {
+	width: 40px;
+	height: 40px;
+	font-size: 18px;
+	color: #fff;
+	border-radius: 2px;
+	display: inline-block;
+	margin: 0 5px 5px 0;
+	text-align: center;
+	line-height: 2.2
+	}
+
+.hero-icon.hero-icon-square {
+	border-radius: 0
+	}
+
+.hero-icon.hero-icon-round {
+	border-radius: 5px
+	}
+
+.hero-icon.hero-icon-circle {
+	border-radius: 50%
+	}
+
+.hero-buttons { padding-right:20px }
+
+
+.text-bold { font-weight: bold; }
+
+.hero-icon.hero-icon-xlg {
+	width: 60px;
+	height: 60px;
+	line-height: 60px;
+	font-size: 24px
+	}
+
+li .hero-list-text {
+	display: table-cell;
+	vertical-align: middle;
+	font-size: 18px;
+	font-size: 1.8rem;
+	line-height: 30px;
+	line-height: 3rem
+	}
+
+#carousel-hero.carousel {
+	position: relative;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: hidden
+	}
+
+#carousel-hero.carousel .carousel-indicators li {
+	height: 12px;
+	width: 12px;
+	border-radius: 100%;
+	background-color: #424242
+	}
+
+#carousel-hero.carousel .carousel-indicators li.active {
+	background-color: #0288d1
+	}
+
+#carousel-hero.carousel .carousel-indicators {
+	position: static;
+	width: auto;
+	display: inline-block;
+	margin: 0;
+	text-align: left;
+	}
+
+#carousel-hero.carousel .carousel-indicators li {
+	vertical-align: top;
+	display: inline-block;
+	background-color: #78909c;
+	border: none;
+	border: 0;
+	height: 3px;
+	width: 14px;
+	margin: 2px;
+	margin-top: 10px;
+	border-radius: 2px;
+	cursor: pointer
+	}
+
+#carousel-hero.carousel .carousel-indicators li.active {
+	top: 0;
+	background-color: #fff
+	}
+
+#carousel-hero.carousel .carousel-controls {
+	position: absolute;
+	left: 20px;
+	bottom: 20px;
+	width: 160px
+	}
+
+#carousel-hero.carousel .carousel-controls a {
+	display: inline-block;
+	position: static;
+	height: 20px;
+	width: 20px;
+	background: none;
+	font-size: 15px;
+	background-color: #fff;
+	color: #616161;
+	text-shadow: none;
+	border-radius: 100%;
+	opacity: .7;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+	text-align: center;
+	cursor: pointer;
+	transition: all ease .5s;
+	margin-right: 10px;
+	margin-right: 1rem
+	}
+
+#carousel-hero.carousel .carousel-controls a:hover {
+	opacity: 1;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
+	}
+
+#carousel-hero.carousel .carousel-controls a i {
+	vertical-align: top;
+	line-height: 20px;
+	font-size: 12px;
+	}
+
+#carousel-hero.carousel .carousel-controls a.right {
+	margin-right: 20px;
+	margin-right: 2rem
+	}
+
+#carousel-hero.carousel .carousel-inner {
+	overflow: visible
+	}
+
+#carousel-hero.carousel .carousel-inner .item .carousel-caption {
+	position: static;
+	text-align: left;
+	}
+
+#carousel-hero.carousel .carousel-inner .item {
+	background-color: #eee;
+	background-size: cover;
+	}
+
+#carousel-hero .hero-text-container .hero-title {
+	background-color: rgba(0, 0, 0, .4);
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+	padding: 16px;
+	padding: 1.6rem;
+	padding-left: 1.6rem;
+	margin-left: -10000px;
+	padding-left: 10000px;
+	z-index: 6;
+	margin-bottom: 40px;
+	margin-bottom: 4rem;
+	}
+
+#carousel-hero .hero-list li { padding-bottom: 15px }
+
+#carousel-hero h1, #carousel-hero h2, #carousel-hero ul.hero-list { margin-left: 20px; }
+
+#carousel-hero h2 { font-size: 1.2em}
+
+/* CAROUSEL FADE */
+.carousel-fade .carousel-inner .item {
+	-webkit-transition-property: opacity;
+	transition-property: opacity; }
+
+.carousel-fade .carousel-inner .item,
+.carousel-fade .carousel-inner .active.left,
+.carousel-fade .carousel-inner .active.right {
+	opacity: 0; }
+
+.carousel-fade .carousel-inner .active,
+.carousel-fade .carousel-inner .next.left,
+.carousel-fade .carousel-inner .prev.right {
+	opacity: 1; }
+
+.carousel-fade .carousel-inner .next,
+.carousel-fade .carousel-inner .prev,
+.carousel-fade .carousel-inner .active.left,
+.carousel-fade .carousel-inner .active.right {
+	left: 0;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0); }
+
+.carousel-fade .carousel-control {
+	z-index: 2; }
+
+/* ANIMATION */
+.animation-delay-1 {
+	-webkit-animation-delay: .1s !important;
+	animation-delay: .1s !important
+	}
+
+.animation-delay-2 {
+	-webkit-animation-delay: .2s !important;
+	animation-delay: .2s !important
+	}
+
+.animation-delay-3 {
+	-webkit-animation-delay: .3s !important;
+	animation-delay: .3s !important
+	}
+
+.animation-delay-4 {
+	-webkit-animation-delay: .4s !important;
+	animation-delay: .4s !important
+	}
+
+.animation-delay-5 {
+	-webkit-animation-delay: .5s !important;
+	animation-delay: .5s !important
+	}
+
+.animation-delay-6 {
+	-webkit-animation-delay: .6s !important;
+	animation-delay: .6s !important
+	}
+
+.animation-delay-7 {
+	-webkit-animation-delay: .7s !important;
+	animation-delay: .7s !important
+	}
+
+.animation-delay-8 {
+	-webkit-animation-delay: .8s !important;
+	animation-delay: .8s !important
+	}
+
+.animation-delay-9 {
+	-webkit-animation-delay: .9s !important;
+	animation-delay: .9s !important
+	}
+
+.animation-delay-10 {
+	-webkit-animation-delay: 1s !important;
+	animation-delay: 1s !important
+	}
+
+.animation-delay-11 {
+	-webkit-animation-delay: 1.1s !important;
+	animation-delay: 1.1s !important
+	}
+
+.animation-delay-12 {
+	-webkit-animation-delay: 1.2s !important;
+	animation-delay: 1.2s !important
+	}
+
+.animation-delay-13 {
+	-webkit-animation-delay: 1.3s !important;
+	animation-delay: 1.3s !important
+	}
+
+.animation-delay-14 {
+	-webkit-animation-delay: 1.4s !important;
+	animation-delay: 1.4s !important
+	}
+
+.animation-delay-15 {
+	-webkit-animation-delay: 1.5s !important;
+	animation-delay: 1.5s !important
+	}
+
+.animation-delay-16 {
+	-webkit-animation-delay: 1.6s !important;
+	animation-delay: 1.6s !important
+	}
+
+.animation-delay-17 {
+	-webkit-animation-delay: 1.7s !important;
+	animation-delay: 1.7s !important
+	}
+
+.animation-delay-18 {
+	-webkit-animation-delay: 1.8s !important;
+	animation-delay: 1.8s !important
+	}
+
+.animation-delay-19 {
+	-webkit-animation-delay: 1.9s !important;
+	animation-delay: 1.9s !important
+	}
+
+.animation-delay-20 {
+	-webkit-animation-delay: 2s !important;
+	animation-delay: 2s !important
+	}
+
+.animation-delay-21 {
+	-webkit-animation-delay: 2.1s !important;
+	animation-delay: 2.1s !important
+	}
+
+.animation-delay-22 {
+	-webkit-animation-delay: 2.2s !important;
+	animation-delay: 2.2s !important
+	}
+
+.animation-delay-23 {
+	-webkit-animation-delay: 2.3s !important;
+	animation-delay: 2.3s !important
+	}
+
+.animation-delay-24 {
+	-webkit-animation-delay: 2.4s !important;
+	animation-delay: 2.4s !important
+	}
+
+.animation-delay-25 {
+	-webkit-animation-delay: 2.5s !important;
+	animation-delay: 2.5s !important
+	}
+
+.animation-delay-26 {
+	-webkit-animation-delay: 2.6s !important;
+	animation-delay: 2.6s !important
+	}
+
+.animation-delay-27 {
+	-webkit-animation-delay: 2.6s !important;
+	animation-delay: 2.6s !important
+	}
+
+.animation-delay-28 {
+	-webkit-animation-delay: 2.8s !important;
+	animation-delay: 2.8s !important
+	}
+
+.animation-delay-29 {
+	-webkit-animation-delay: 2.9s !important;
+	animation-delay: 2.9s !important
+	}
+
+.animation-delay-30 {
+	-webkit-animation-delay: 3s !important;
+	animation-delay: 3s !important
+	}
+
+.animation-delay-31 {
+	-webkit-animation-delay: 3.1s !important;
+	animation-delay: 3.1s !important
+	}
+
+.animation-delay-32 {
+	-webkit-animation-delay: 3.2s !important;
+	animation-delay: 3.2s !important
+	}
+
+.animation-delay-33 {
+	-webkit-animation-delay: 3.3s !important;
+	animation-delay: 3.3s !important
+	}
+
+.animation-delay-34 {
+	-webkit-animation-delay: 3.4s !important;
+	animation-delay: 3.4s !important
+	}
+
+.animation-delay-35 {
+	-webkit-animation-delay: 3.5s !important;
+	animation-delay: 3.5s !important
+	}
+
+.animation-delay-36 {
+	-webkit-animation-delay: 3.6s !important;
+	animation-delay: 3.6s !important
+	}
+
+.animation-delay-37 {
+	-webkit-animation-delay: 3.7s !important;
+	animation-delay: 3.7s !important
+	}
+
+.animation-delay-38 {
+	-webkit-animation-delay: 3.8s !important;
+	animation-delay: 3.8s !important
+	}
+
+.animation-delay-39 {
+	-webkit-animation-delay: 3.9s !important;
+	animation-delay: 3.9s !important
+	}
+
+.animation-delay-40 {
+	-webkit-animation-delay: 4s !important;
+	animation-delay: 4s !important
+	}
+
+.animation-delay-41 {
+	-webkit-animation-delay: 4.1s !important;
+	animation-delay: 4.1s !important
+	}
+
+.animation-delay-42 {
+	-webkit-animation-delay: 4.2s !important;
+	animation-delay: 4.2s !important
+	}
+
+.animation-delay-43 {
+	-webkit-animation-delay: 4.3s !important;
+	animation-delay: 4.3s !important
+	}
+
+.animation-delay-44 {
+	-webkit-animation-delay: 4.4s !important;
+	animation-delay: 4.4s !important
+	}
+
+.animation-delay-45 {
+	-webkit-animation-delay: 4.5s !important;
+	animation-delay: 4.5s !important
+	}
+
+.animation-delay-46 {
+	-webkit-animation-delay: 4.6s !important;
+	animation-delay: 4.6s !important
+	}
+
+.animation-delay-47 {
+	-webkit-animation-delay: 4.7s !important;
+	animation-delay: 4.7s !important
+	}
+
+.animation-delay-48 {
+	-webkit-animation-delay: 4.8s !important;
+	animation-delay: 4.8s !important
+	}
+
+.animation-delay-49 {
+	-webkit-animation-delay: 4.9s !important;
+	animation-delay: 4.9s !important
+	}
+
+.animation-delay-50 {
+	-webkit-animation-delay: 5s !important;
+	animation-delay: 5s !important
+	}
+
+.animation-delay-51 {
+	-webkit-animation-delay: 5.1s !important;
+	animation-delay: 5.1s !important
+	}
+
+.animation-delay-52 {
+	-webkit-animation-delay: 5.2s !important;
+	animation-delay: 5.2s !important
+	}
+
+.animation-delay-53 {
+	-webkit-animation-delay: 5.3s !important;
+	animation-delay: 5.3s !important
+	}
+
+.animation-delay-54 {
+	-webkit-animation-delay: 5.4s !important;
+	animation-delay: 5.4s !important
+	}
+
+.animation-delay-55 {
+	-webkit-animation-delay: 5.5s !important;
+	animation-delay: 5.5s !important
+	}
+
+.animation-delay-56 {
+	-webkit-animation-delay: 5.6s !important;
+	animation-delay: 5.6s !important
+	}
+
+.animation-delay-57 {
+	-webkit-animation-delay: 5.7s !important;
+	animation-delay: 5.7s !important
+	}
+
+.animation-delay-58 {
+	-webkit-animation-delay: 5.8s !important;
+	animation-delay: 5.8s !important
+	}
+
+.animation-delay-59 {
+	-webkit-animation-delay: 5.9s !important;
+	animation-delay: 5.9s !important
+	}
+
+.animation-delay-60 {
+	-webkit-animation-delay: 6s !important;
+	animation-delay: 6s !important
+	}
+
+.animated-2x {
+	-webkit-animation-duration: .5s;
+	animation-duration: .5s
+	}
+
+.animated-3x {
+	-webkit-animation-duration: .25s;
+	animation-duration: .25s
+	}
+
+.animated-slow {
+	-webkit-animation-duration: 2s;
+	animation-duration: 2s
+	}
+
+
--- a/e107_plugins/hero/e_header.php
+++ b/e107_plugins/hero/e_header.php
@ -0,0 +1,27 @@
+<?php
+/*
+ * e107 website system
+ *
+ * Copyright (C) 2008-2014 e107 Inc (e107.org)
+ * Released under the terms and conditions of the
+ * GNU General Public License (http://www.gnu.org/licenses/gpl.txt)
+ *
+ * Related configuration module - News
+ *
+ *
+*/
+
+if (!defined('e107_INIT')) { exit; }
+
+
+if(USER_AREA) // prevents inclusion of JS/CSS/meta in the admin area.
+{
+	// @todo add check for the hero_menu being active.
+
+	e107::library('load', 'animate.css');
+	e107::css('hero', 'css/hero.css');
+
+}
+
+
+
--- a/e107_plugins/hero/hero_menu.php
+++ b/e107_plugins/hero/hero_menu.php
@ -0,0 +1,109 @@
+<?php
+/*
+ * e107 website system
+ *
+ * Copyright (C) 2008-2016 e107 Inc (e107.org)
+ * Released under the terms and conditions of the
+ * GNU General Public License (http://www.gnu.org/licenses/gpl.txt)
+ *
+ * Hero menu file.
+ *
+ */
+
+
+if (!defined('e107_INIT')) { exit; }
+
+// $sql = e107::getDB(); 				// mysql class object
+// $tp = e107::getParser(); 			// parser for converting to HTML and parsing templates etc.
+// $frm = e107::getForm(); 				// Form element class.
+// $ns = e107::getRender();				// render in theme box.
+
+//require_once("../../class2.php");
+// define('e_IFRAME', true);
+//require_once(HEADERF);
+
+$text = "";
+
+if(!empty($parm))
+{
+//	$text .= print_a($parm,true); // e_menu.php form data.
+}
+
+$data = e107::getDb()->retrieve('hero','*',"hero_class IN(".USERCLASS_LIST.") ORDER BY hero_order",true);
+
+
+$sc = e107::getScBatch('hero',true, 'hero');
+
+$template = e107::getTemplate('hero','hero','menu');
+
+
+$tp = e107::getParser();
+
+$totalSlides = count($data);
+
+$default = array('hero_total_slides'=>$totalSlides);
+
+if(!is_object($sc))
+{
+	return "Hero shortcodes failed to load";
+}
+
+$sc->setVars($default);
+
+$text = $tp->parseTemplate($template['header'],true, $sc);
+
+foreach($data as $k=>$row)
+{
+	$bullet = e107::unserialize($row['hero_bullets']);
+	$row['hero_bullets'] = $bullet;
+
+	$button1 = e107::unserialize($row['hero_button1']);
+	$row['hero_button1'] = $button1;
+
+	$button2 = e107::unserialize($row['hero_button2']);
+	$row['hero_button2'] = $button2;
+
+	$row['hero_slide_active'] = ($k == 0) ? 'active' : '';
+	$row['hero_total_slides'] = $totalSlides;
+
+	$sc->setVars($row);
+
+	$text .= $tp->parseTemplate($template['start'],true,$sc);
+
+	foreach($row['hero_bullets'] as $cnt=>$row2)
+	{
+		if(empty($row2['text']))
+		{
+			continue;
+		}
+
+		$sc->count = $cnt;
+
+
+		$text .= $tp->parseTemplate($template['item'],true,$sc);
+
+	}
+
+
+	$text .= $tp->parseTemplate($template['end'],true,$sc);
+
+
+
+}
+
+$text .= $tp->parseTemplate($template['footer'], true, $sc);
+
+e107::getRender()->tablerender(null, $text, 'hero-menu');
+
+/*
+$arr = array(
+	0 => array('caption'=>'Slide 1', 'text'=>'<div class="text-center">Slide 1 text</div>'),
+	1 => array('caption'=> 'Slide 2', 'text'=> '<div class="text-center">Slide 2 text</div>')
+);
+
+$text = e107::getForm()->carousel('my-carousel',$arr);
+
+e107::getRender()->tablerender("Core", print_a($text,true), 'hero-menu');*/
+
+//require_once(FOOTERF);
+
--- a/e107_plugins/hero/hero_setup.php
+++ b/e107_plugins/hero/hero_setup.php
@ -0,0 +1,74 @@
+<?php
+/*
+* e107 website system
+*
+* Copyright (C) 2008-2013 e107 Inc (e107.org)
+* Released under the terms and conditions of the
+* GNU General Public License (http://www.gnu.org/licenses/gpl.txt)
+*
+* Custom install/uninstall/update routines for heros plugin
+**
+*/
+
+
+if(!class_exists("hero_setup"))
+{
+	class hero_setup
+	{
+
+	    function install_pre($var)
+		{
+			// print_a($var);
+			// echo "custom install 'pre' function<br /><br />";
+		}
+
+		/**
+		 * For inserting default database content during install after table has been created by the hero_sql.php file.
+		 */
+		function install_post($var)
+		{
+			$ret = e107::getXml(true)->e107Import(e_PLUGIN."hero/xml/install.xml");
+
+			if(!empty($ret['success']))
+			{
+				e107::getMessage()->addSuccess("Default slides imported.");
+			}
+
+			if(!empty($ret['failed']))
+			{
+				e107::getMessage()->addError("Failed to import default slides.");
+			}
+
+		}
+
+		function uninstall_options()
+		{
+
+			/*$listoptions = array(0=>'option 1',1=>'option 2');
+
+			$options = array();
+			$options['mypref'] = array(
+					'label'		=> 'Custom Uninstall Label',
+					'preview'	=> 'Preview Area',
+					'helpText'	=> 'Custom Help Text',
+					'itemList'	=> $listoptions,
+					'itemDefault'	=> 1
+			);
+
+			return $options;*/
+		}
+
+
+		function uninstall_post($var)
+		{
+			// print_a($var);
+		}
+
+		function upgrade_post($var)
+		{
+			// $sql = e107::getDb();
+		}
+
+	}
+
+}
--- a/e107_plugins/hero/hero_shortcodes.php
+++ b/e107_plugins/hero/hero_shortcodes.php
@ -0,0 +1,259 @@
+<?php
+	
+
+// Hero Shortcodes file
+
+if (!defined('e107_INIT')) { exit; }
+
+class plugin_hero_hero_shortcodes extends e_shortcode
+{
+	public $count;
+
+	/**
+	* {hero_ID}
+	*/
+	public function sc_hero_id($parm=null)
+	{
+		return $this->var['hero_id'];
+	}
+
+	public function sc_hero_image($parm=null)
+	{
+		if(empty($this->var['hero_image']))
+		{
+			return null;
+		}
+
+		return e107::getParser()->replaceConstants($this->var['hero_image'], 'full');
+	}
+
+	public function sc_hero_carousel_indicators($parm=null)
+	{
+		$target = !empty($parm['target']) ? $parm['target'] : 'carousel-hero';
+		$class = !empty($parm['class']) ? $parm['class'] : '';
+		$total = (int) $this->var['hero_total_slides'];
+
+		if(empty($total))
+		{
+			return "(No Slides Found)"; // debug info
+		}
+
+		$text = '<ol class="carousel-indicators '.$class.'">';
+
+		$loop = range(0,$total-1);
+
+		foreach($loop as $c)
+		{
+			$active = ($c == 0) ? 'active' : '';
+
+			$text .= '<li data-target="#'.$target.'" data-slide-to="'.$c.'" class="'.$active.'"></li>';
+			$text .= "\n";
+		}
+
+		$text .= '                  
+                </ol>';
+
+		 return $text;
+
+
+	}
+
+	public function sc_hero_slide_active($parm=null)
+	{
+		return $this->var['hero_slide_active'];
+	}
+
+	public function sc_hero_slide_interval($parm=null)
+	{
+		return e107::pref('hero', 'slide_interval', 7500);
+	}
+
+  /* {hero_ICON} returs <i class="fa fa-stumbleupon-circle"><!-- --></i> */
+  /* {hero_ICON: raw=1}	returns database value, not able to use in template */
+  
+	public function sc_hero_icon($parm=null)
+	{
+		if(empty($this->var['hero_bullets'][$this->count]['icon']))
+		{
+			return null;
+		}
+
+		if(!empty($parm['raw']))
+		{
+			return $this->var['hero_bullets'][$this->count]['icon'];
+		}
+
+		return e107::getParser()->toIcon($this->var['hero_bullets'][$this->count]['icon']);
+	}
+
+	/**
+	 * Returns success, info, primary, warning and danger strings.
+	 * @param null $parm
+	 * @return string|null
+	 */
+	public function sc_hero_icon_style($parm=null)
+	{
+		if(empty($this->var['hero_bullets'][$this->count]['icon_style']))
+		{
+			return null;
+		}
+
+		return $this->var['hero_bullets'][$this->count]['icon_style'];
+   
+   } 
+  
+	public function sc_hero_count()
+	{
+		return $this->count;
+	}
+
+/*	public function sc_hero_url()
+	{
+		return $this->var['hero_bullets'][$this->count]['url'];
+	}*/
+
+	public function sc_hero_text()
+	{
+		return e107::getParser()->toHTML($this->var['hero_bullets'][$this->count]['text'],true,'BODY');
+	}
+
+
+	public function sc_hero_animation()
+	{
+		if(empty($this->var['hero_bullets'][$this->count]['animation']))
+		{
+			return null;
+		}
+
+		return $this->var['hero_bullets'][$this->count]['animation'];
+	}
+
+	public function sc_hero_animation_delay()
+	{
+		if(empty($this->var['hero_bullets'][$this->count]['animation_delay']))
+		{
+			return null;
+		}
+
+		return "animation-delay-".$this->var['hero_bullets'][$this->count]['animation_delay'];
+	}
+
+	/**
+	* @example {hero_TITLE}
+	* @example {hero_TITLE: enwrap=strong} // replace [ ] chars with <strong> tags.
+	*/
+	public function sc_hero_title($parm=null)
+	{
+		return $this->enwrap($this->var['hero_title'],$parm);
+	}
+	
+	private function enwrap($text, $parm=null)
+	{
+		if(empty($text))
+		{
+			return null;
+		}
+
+		$repl = array();
+
+		$class = !empty($parm['class']) ? " class='".$parm['class']."'" : "";
+
+		if(!empty($parm['enwrap']))
+		{
+			$tag = $parm['enwrap'];
+			$repl = array("<".$tag.$class.">","</".$tag.">");
+		}
+
+		if(!empty($repl))
+		{
+			$srch = array("[","]");
+			return str_replace($srch,$repl,$text);
+
+		}
+
+		return $text;
+
+	}
+
+	/**
+	* @example {hero_DESCRIPTION}
+	* @example {hero_DESCRIPTION: enwrap=span&class=text-info} // replace [ ] chars with <span> tags and apply text-info class.
+	*/
+	public function sc_hero_description($parm=null)
+	{
+		return $this->enwrap($this->var['hero_description'],$parm);
+	}
+	
+
+
+	/**
+	* {HERO_BULLETS}
+	*/
+	public function sc_hero_bullets($parm=null)
+	{
+		return $this->var['hero_bullets'];
+	}
+	
+
+	/**
+	* {hero_BUTTON1_xxxx}
+	*/
+	public function sc_hero_button1_icon($parm=null)
+	{
+		if(empty($this->var['hero_button1']['icon']))
+		{
+			return null;
+		}
+
+		return e107::getParser()->toIcon($this->var['hero_button1']['icon'],$parm);
+	}
+
+	public function sc_hero_button1_label($parm=null)
+	{
+		return e107::getParser()->parseTemplate($this->var['hero_button1']['label'], true);
+	}
+	
+	public function sc_hero_button1_url($parm=null)
+	{
+		return e107::getParser()->parseTemplate($this->var['hero_button1']['url'], true);
+	}
+
+	public function sc_hero_button1_class($parm=null)
+	{
+		return $this->var['hero_button1']['class'];
+	}
+
+
+	/**
+	* {hero_BUTTON2_xxxx}
+	*/
+
+	public function sc_hero_button2_icon($parm=null)
+	{
+		if(empty($this->var['hero_button2']['icon']))
+		{
+			return null;
+		}
+
+		return e107::getParser()->toIcon($this->var['hero_button2']['icon'],$parm);
+	}
+
+	public function sc_hero_button2_label($parm=null)
+	{
+		return e107::getParser()->parseTemplate($this->var['hero_button2']['label'], true);
+	}
+	
+	public function sc_hero_button2_url($parm=null)
+	{
+		return e107::getParser()->parseTemplate($this->var['hero_button2']['url'], true);
+	}
+
+	public function sc_hero_button2_class($parm=null)
+	{
+		return $this->var['hero_button2']['class'];
+	}
+
+
+	
+
+}
--- a/e107_plugins/hero/hero_sql.php
+++ b/e107_plugins/hero/hero_sql.php
@ -0,0 +1,12 @@
+CREATE TABLE `hero` (
+  `hero_id` int(10) NOT NULL AUTO_INCREMENT,
+  `hero_title` varchar(255) NOT NULL,
+  `hero_description` varchar(255) NOT NULL,
+  `hero_image` varchar(255) NOT NULL,
+  `hero_bullets` text NOT NULL,
+  `hero_button1` text NOT NULL,
+  `hero_button2` text NOT NULL,
+  `hero_order` tinyint(3) unsigned NOT NULL default '0',
+  `hero_class` int(5) default '0',
+  PRIMARY KEY  (hero_id)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--- a/e107_plugins/hero/images/slide1.jpg
+++ b/e107_plugins/hero/images/slide1.jpg
--- a/e107_plugins/hero/images/slide2.jpg
+++ b/e107_plugins/hero/images/slide2.jpg
--- a/e107_plugins/hero/images/slide3.jpg
+++ b/e107_plugins/hero/images/slide3.jpg
--- a/e107_plugins/hero/js/bootstrap-iconpicker-iconset-all.min.js
+++ b/e107_plugins/hero/js/bootstrap-iconpicker-iconset-all.min.js
--- a/e107_plugins/hero/js/bootstrap-iconpicker.min.js
+++ b/e107_plugins/hero/js/bootstrap-iconpicker.min.js
--- a/e107_plugins/hero/plugin.xml
+++ b/e107_plugins/hero/plugin.xml
@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<e107Plugin name="Hero" lan="" version="1.0" date="2020-12-15" compatibility="2.0" installRequired="true" >
+	<author name="e107" url="https://e107.org" />
+	<summary lan="">Home page 'Hero' area management</summary>
+	<description lan="">Image and text slider, animated bullet points for the hero area of your home page.</description>
+	<keywords>
+		<word>generic</word>
+		<word>hero</word>
+		<word>carousel</word>
+		<word>slider</word>
+	</keywords>
+	<category>content</category>
+	<copyright></copyright>
+	<adminLinks>
+		<link url="admin_config.php" description="" icon="" iconSmall="" icon128="" primary="true" >LAN_CONFIGURE</link>
+	</adminLinks>
+	<pluginPrefs>
+		<pref name='visibility'>0</pref>
+		<pref name='icon_pack'>fontawesome</pref>
+		<pref name='slide_interval'>7000</pref>
+	</pluginPrefs>
+	<mediaCategories>
+		<category type="image">Hero Images</category>
+	</mediaCategories>
+</e107Plugin>
--- a/e107_plugins/hero/templates/hero_template.php
+++ b/e107_plugins/hero/templates/hero_template.php
@ -0,0 +1,77 @@
+<?php
+
+// Template File
+// hero Template file
+
+if (!defined('e107_INIT')) { exit; }
+
+$HERO_TEMPLATE = array();
+
+$HERO_TEMPLATE['menu']['header'] 	= '<!-- Hero Menu: header -->{SETIMAGE: w=400&h=400}
+											<div id="carousel-hero" class="carousel carousel-fade slide" data-ride="carousel" data-interval="{HERO_SLIDE_INTERVAL}">
+							                <div class="carousel-inner" role="listbox">';
+
+
+$HERO_TEMPLATE['menu']['footer'] 	= '</div><div class="carousel-controls">
+						                  <!-- Controls -->
+						                  <a class="left carousel-left carousel-control animated zoomIn animation-delay-30" href="#carousel-hero" role="button" data-slide="prev">
+						                    <i class="fa fa-chevron-left fa-fw"></i>
+						                    <span class="sr-only">Previous</span>
+						                  </a>
+						                  <a class="right carousel-right carousel-control animated zoomIn animation-delay-30" href="#carousel-hero" role="button" data-slide="next">
+						                    <i class="fa fa-chevron-right fa-fw"></i>
+						                    <span class="sr-only">Next</span>
+						                  </a>
+						                  <!-- Indicators -->
+						                  {HERO_CAROUSEL_INDICATORS: target=carousel-hero&class=animated fadeInUpBig}
+						                 <!-- <ol class="carousel-indicators">
+						                    <li data-target="#carousel-hero" data-slide-to="0" class="animated fadeInUpBig animation-delay-27 active"></li>
+						                    <li data-target="#carousel-hero" data-slide-to="1" class="animated fadeInUpBig animation-delay-28"></li>
+						                    <li data-target="#carousel-hero" data-slide-to="2" class="animated fadeInUpBig animation-delay-29"></li>
+						                  </ol>-->
+						                </div>
+						              </div>';
+
+
+$HERO_TEMPLATE['menu']['start'] 	    = '<div class="carousel-item item {HERO_SLIDE_ACTIVE}" style="background-image:url({HERO_IMAGE})">
+						                  <div class="carousel-caption">
+						                    <div class="hero-text-container">
+						                      <header class="hero-title animated slideInLeft animation-delay-5">
+						                        <h1 class="animated fadeInLeft animation-delay-10 font-smoothing">{HERO_TITLE: enwrap=strong}</h1>
+						                        <h2 class="animated fadeInLeft animation-delay-12">{HERO_DESCRIPTION: enwrap=span&class=text-bold}</h2>
+						                      </header>
+						                      <ul class="hero-list list-unstyled">';
+
+$HERO_TEMPLATE['menu']['end'] 	    = ' </ul>
+					                      <div class="hero-buttons text-right">
+					                        
+					                          <a href="{HERO_BUTTON1_URL}" class="btn btn-{HERO_BUTTON1_CLASS} btn-raised animated fadeInRight animation-delay-28">
+					                            {HERO_BUTTON1_ICON} {HERO_BUTTON1_LABEL}
+					                          </a>
+					                        
+					                      </div>
+					                    </div>
+					                    </div>
+					                    </div>';
+
+
+
+$HERO_TEMPLATE['menu']['item'] 	    = '<li>
+			                            <div class="hero-list-icon animated zoomInUp {HERO_ANIMATION_DELAY}">
+			                            <span class="hero-icon hero-icon-circle hero-icon-xlg label-{HERO_ICON_STYLE} badge-{HERO_ICON_STYLE} shadow-3dp">
+			                              {HERO_ICON}
+			                            </span>
+			                            </div>
+			                            <div class="hero-list-text animated {HERO_ANIMATION} {HERO_ANIMATION_DELAY}">{HERO_TEXT}</div>
+			                        </li>';
+
+
+
+
+
+
+
+
+
+
+
--- a/e107_plugins/hero/xml/install.xml
+++ b/e107_plugins/hero/xml/install.xml
@ -0,0 +1,175 @@
+<?xml version='1.0' encoding='utf-8' ?>
+<e107Export version="2.2.0 (git)" timestamp="1541880474" >
+	<database>
+	<dbTable name="hero">
+		<item>
+			<field name="hero_id">1</field>
+			<field name="hero_title"><![CDATA[A [powerful] & [free] hero area]]></field>
+			<field name="hero_description">[Easy] to Use</field>
+			<field name="hero_bullets">[
+    {
+        "icon": "fa-sun-o.glyph",
+        "icon_style": "warning",
+        "text": "Add some bullet text",
+        "animation": "fadeInRight",
+        "animation_delay": "15"
+    },
+    {
+        "icon": "fa-font-awesome.glyph",
+        "icon_style": "success",
+        "text": "Select an Icon from FontAwesome or others",
+        "animation": "fadeInRight",
+        "animation_delay": "25"
+    },
+    {
+        "icon": "fa-adjust.glyph",
+        "icon_style": "danger",
+        "text": "Choose a Style from Bootstrap",
+        "animation": "fadeInRight",
+        "animation_delay": "35"
+    },
+    {
+        "icon": "",
+        "icon_style": "",
+        "text": "",
+        "animation": "",
+        "animation_delay": "0"
+    },
+    {
+        "icon": "",
+        "icon_style": "",
+        "text": "",
+        "animation": "",
+        "animation_delay": "0"
+    }
+]</field>
+			<field name="hero_button1">{
+    "icon": "fa-",
+    "label": "",
+    "url": "",
+    "class": ""
+}</field>
+			<field name="hero_button2">{
+    "icon": "fa-",
+    "label": "",
+    "url": "",
+    "class": ""
+}</field>
+			<field name="hero_order">0</field>
+			<field name="hero_image">{e_PLUGIN}hero/images/slide1.jpg</field>
+		</item>
+		<item>
+			<field name="hero_id">2</field>
+			<field name="hero_title">Add [emphasized] titles</field>
+			<field name="hero_description">Add a description [here]</field>
+			<field name="hero_bullets">[
+    {
+        "icon": "fa-clock-o.glyph",
+        "icon_style": "info",
+        "text": "Time it how you wish",
+        "animation": "fadeInRight",
+        "animation_delay": "35"
+    },
+    {
+        "icon": "fa-id-badge.glyph",
+        "icon_style": "warning",
+        "text": "Add a Button",
+        "animation": "fadeInRight",
+        "animation_delay": "15"
+    },
+    {
+        "icon": "fa-globe.glyph",
+        "icon_style": "success",
+        "text": "To the URL of your choice",
+        "animation": "fadeInRight",
+        "animation_delay": "20"
+    },
+    {
+        "icon": "fa-.glyph",
+        "icon_style": "",
+        "text": "",
+        "animation": "",
+        "animation_delay": "0"
+    },
+    {
+        "icon": "fa-.glyph",
+        "icon_style": "",
+        "text": "",
+        "animation": "",
+        "animation_delay": "0"
+    }
+]</field>
+			<field name="hero_button1">{
+    "icon": "fa-link",
+    "label": "Button",
+    "url": "#",
+    "class": "success"
+}</field>
+			<field name="hero_button2">{
+    "icon": "fa-",
+    "label": "",
+    "url": "",
+    "class": ""
+}</field>
+			<field name="hero_order">1</field>
+			<field name="hero_image">{e_PLUGIN}hero/images/slide2.jpg</field>
+		</item>
+		<item>
+			<field name="hero_id">3</field>
+			<field name="hero_title">Select your [Animations]</field>
+			<field name="hero_description">Use the admin area to adjust. </field>
+			<field name="hero_bullets">[
+    {
+        "icon": "fa-soccer-ball-o.glyph",
+        "icon_style": "warning",
+        "text": "Bounce In from the Left",
+        "animation": "bounceInLeft",
+        "animation_delay": "15"
+    },
+    {
+        "icon": "fa-arrow-up.glyph",
+        "icon_style": "success",
+        "text": "Zoom In Up",
+        "animation": "zoomInUp",
+        "animation_delay": "42"
+    },
+    {
+        "icon": "fa-anchor.glyph",
+        "icon_style": "danger",
+        "text": "Rotate In Down and Left",
+        "animation": "rotateInDownLeft",
+        "animation_delay": "30"
+    },
+    {
+        "icon": "",
+        "icon_style": "",
+        "text": "",
+        "animation": "",
+        "animation_delay": "0"
+    },
+    {
+        "icon": "",
+        "icon_style": "",
+        "text": "",
+        "animation": "",
+        "animation_delay": "0"
+    }
+]</field>
+			<field name="hero_button1">{
+    "icon": "fa-",
+    "label": "",
+    "url": "",
+    "class": ""
+}</field>
+			<field name="hero_button2">{
+    "icon": "fa-",
+    "label": "",
+    "url": "",
+    "class": ""
+}</field>
+			<field name="hero_order">2</field>
+			<field name="hero_image">{e_PLUGIN}hero/images/slide3.jpg</field>
+		</item>
+	</dbTable>
+	</database>
+</e107Export>