Dedicated component for objects (images) focal point

This commit is contained in:
reverend 2021-03-09 12:40:23 +01:00
parent 04905e9e7a
commit bf86048cb5
3 changed files with 80 additions and 0 deletions

View File

@ -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()

View File

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

View File

@ -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>