Dedicated component for objects (images) focal point

components/02_ContentShape/focalPoint/_focalPoint.styl

@@ -0,0 +1,54 @@
+/**
+ * This mixins helps you positioning objects (i.e. images, videos) to a 'focal point'.
+ * A focal point is a manual choosen point in an object that will be in the center of the cropped object.
+ * If the object is not cropped, the focal point does not apply. Best used with RV-AspectRatio.
+ * The focal point is given in percentages relative to the objects size.
+ 
+ * To set the focal point either use one the the predefined classes or set them using inline CSS:
+ * class="RV-FocalPoint" style="--focalX: 44%; --focalY: 16.66%"
+ * 
+ */
+RV-FocalPoint--upperHalf()
+	+RV-Block--modifier()
+		RV-CSSParameter({
+			focalY: 25%
+		})
+
+RV-FocalPoint--lowerHalf()
+	+RV-Block--modifier()
+		RV-CSSParameter({
+			focalY: 75%
+		})
+
+RV-FocalPoint--leftHalf()
+	+RV-Block--modifier()
+		RV-CSSParameter({
+			focalX: 25%
+		})
+
+RV-FocalPoint--rightHalf()
+	+RV-Block--modifier()
+		RV-CSSParameter({
+			focalX: 75%
+		})
+
+RV-FocalPoint(focalX=50%, focalY=50%)
+	RV-CSSParameter({
+		focalX: focalX,
+		focalY: focalY
+	})
+	
+	height 100%
+	width 100%
+	object-fit cover
+	object-position --focalX --focalY
+
++RV-Block('RV-FocalPoint')
+	RV-FocalPoint()
+	
+	RV-FocalPoint--upperHalf()
+	RV-FocalPoint--lowerHalf()
+	RV-FocalPoint--leftHalf()
+	RV-FocalPoint--rightHalf()	
+
+	

components/02_ContentShape/focalPoint/focalPoint.config.json

@@ -0,0 +1,4 @@
+{
+	"name": "focalPoint",
+	"title": "Focal Point"
+}

components/02_ContentShape/focalPoint/focalPoint.hbs

@@ -0,0 +1,22 @@
+
+<div>
+	<div class="RV-AspectRatio RV-AspectRatio--4to3">
+		<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%"  src="{{ path '/images/landscape.jpeg'}}"/>
+	</div>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%"  src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 47%"  src="{{ path '/images/hasi01.png'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint RV-FocalPoint--upperHalf" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--1to2">
+	<img class="RV-FocalPoint RV-FocalPoint--rightHalf" src="{{ path '/images/landscape.jpeg'}}"/>
+</div>