Compress and scale images used by Banner module. Change ACTIVECLASS to ACTIVE-CLASS.

Author: ChristopherWerby

README.md

@@ -16,7 +16,7 @@ There's a set of starter files for modules at [app/modules-starter/][4]. You can
 
 Other than Pipsqueak’s logo, Code Modules is open source under the MIT license.
 
-Below are just the notes for the Sample Website.  The links above should be of more interest.
+Below are just the notes for the creation of the Sample Website.  The links above should be of more interest.
 
 
 
@@ -355,6 +355,10 @@ _Begin Date - 2021-09-06_
 _Begin Date - 2021-09-07_
 
 *	Open GitHub repo.
+*	Change ACTIVECLASS variable to ACTIVE-CLASS.
+*	Banner module is using images from originals/ subfolder.
+	*	Compress and scale images
+	*	Use new image names in Banner module items.
 *	Code Modules is released.
 
 

app/modules/markup/banner/entry.shtml

@@ -1,8 +1,8 @@
 <!-- #bbinclude "templates/#TEMPLATE#.shtml" 
 #bbincludeoptions#="inline=true"
 #MODULE# 		= "banner"
-#ACTIVECLASS#	= ''
-#IMAGE-PATH#	= '/images/slides/originals'
+#ACTIVE-CLASS#	= ''
+#IMAGE-PATH#	= '/images/slides'
 #ID#			= 'carouselBanner'
 -->
 <!-- end bbinclude -->

app/modules/markup/banner/items/blue-fiber-optic.shtml

@@ -3,7 +3,7 @@
 #TITLE#			= 'Plumb Your Tech'
 #DESCRIPTION#	= 'Pipe Your Data Throughout Your Website Using Code Modules'
 #ALT-TITLE#		= 'Blue Fiber Optic Strands by JJ Ying via Unsplash'
-#IMAGE#			= '2020-08-17-Blue_Fiber_Optic_Strands-by_JJ_Ying_via_Unsplash-iPhoneSE-RCV-4032x3024.jpg'
+#IMAGE#			= '2020-08-17-Blue_Fiber_Optic_Strands-by_JJ_Ying_via_Unsplash-iPhoneSE-scaled-40-2500x1875.jpg'
 #ATTRIBUTION#	= 'Blue Fiber Optic Strands by JJ Ying - jj-ying-8bghKxNU1j0-unsplash.jpg'
 -->
 <!-- end bbinclude -->

app/modules/markup/banner/items/camera-and-lenses.shtml

@@ -3,7 +3,7 @@
 #TITLE#			= 'Systematize Your Markup'
 #DESCRIPTION#	= 'Plug In Modules to All of Your Web Pages'
 #ALT-TITLE#		= 'Camera and Lenses by Lucas Favre via Unsplash'
-#IMAGE#			= '2018-05-15-Camera_Gear_Layout-by_Lucas_Favre_via_Unsplash-Sony_ILCE_6000-cropped-no_meta-scaled-UNC-2500x2003.jpg'
+#IMAGE#			= '2018-05-15-Camera_Gear_Layout-by_Lucas_Favre_via_Unsplash-Sony_ILCE_6000-cropped-no_meta-scaled-40-2500x2011.jpg'
 #ATTRIBUTION#	= 'Camera Gear Layout by Lucas Favre via Unsplash'
 -->
 <!-- end bbinclude -->

app/modules/markup/banner/items/laptop.shtml

@@ -3,7 +3,7 @@
 #TITLE#			= 'Play the 2001 Theme Music'
 #DESCRIPTION#	= 'Isolate Your Data Through Module Encapsulation'
 #ALT-TITLE#		= 'Laptop Opening by Ales Nesetril via Unsplash'
-#IMAGE#			= '2018-07-11-Laptop-by_Ales_Nesetril_via_Unsplash-EOS_70D-RCV-4846x3431.jpg'
+#IMAGE#			= '2018-07-11-Laptop-by_Ales_Nesetril_via_Unsplash-EOS_70D-scaled-40-2500x1770.jpg'
 #ATTRIBUTION#	= 'Laptop by Ales Nesetril - ales-nesetril-Im7lZjxeLhg-unsplash.jpg'
 -->
 <!-- end bbinclude -->

app/modules/markup/banner/items/plasma-ball.shtml

@@ -3,7 +3,7 @@
 #TITLE#			= 'Orb of Power'
 #DESCRIPTION#	= 'Feel Module Power Coursing Through Your Workflow'
 #ALT-TITLE#		= 'Orb of Power by Ramón Salinero via Unsplash'
-#IMAGE#			= '2017-05-29-Orb_of_Power-Human_Hand_Holding_Plasma_Ball-by_Ramon_Salinero_via_Unsplash-EOS_700D-RCV-5184x3456.jpg'
+#IMAGE#			= '2017-05-29-Orb_of_Power-Human_Hand_Holding_Plasma_Ball-by_Ramon_Salinero_via_Unsplash-EOS_700D-scaled-40-2500x1666.jpg'
 #ATTRIBUTION#	= 'Orb of Power - ramon-salinero-vEE00Hx5d0Q-unsplash.jpg'
 -->
 <!-- end bbinclude -->

app/modules/markup/banner/lists/default.shtml

@@ -1,7 +1,7 @@
 <!-- #bbinclude "/markup/#MODULE#/items/plasma-ball.shtml"
 #bbincludeoptions#="inline=true"
 #ORDER#			= '0'
-#ACTIVECLASS#	= 'active'
+#ACTIVE-CLASS#	= 'active'
 -->
 <!-- end bbinclude -->
 <!-- #bbinclude "/markup/#MODULE#/items/laptop.shtml"

app/modules/markup/banner/types/nav.shtml

@@ -1 +1 @@
-#INDENT#<li data-target="##ID#" data-slide-to="#ORDER#" class="#ACTIVECLASS#"></li>
+#INDENT#<li data-target="##ID#" data-slide-to="#ORDER#" class="#ACTIVE-CLASS#"></li>

app/modules/markup/banner/types/parts/top.shtml

@@ -1,2 +1,2 @@
-					<div class="carousel-item #ACTIVECLASS#" style="background-image: url('#IMAGE-PATH#/#IMAGE#')">
+					<div class="carousel-item #ACTIVE-CLASS#" style="background-image: url('#IMAGE-PATH#/#IMAGE#')">
 						<div class="carousel-caption d-none d-md-block">