Alpine Focal
Add focal point alignment of images to your Alpine 3.x components with a custom directive.
This package only supports Alpine v3.x.
About
This plugin adds a new x-focal directive to Alpine that allows to easliy align your images to keep focus on the selected part of the image.
Installation
CDN
Include the following <script> tag in the <head> of your document, just before Alpine.
<script
src="https://cdn.jsdelivr.net/npm/@lefrancois/alpine-focal@1/dist/cdn.min.js"
defer
></script>
NPM
npm install @lefrancois/alpine-focal
Add the x-focal directive to your project by registering the plugin with Alpine.
import Alpine from "alpinejs";
import Focal from "@lefrancois/alpine-focal";
Alpine.plugin(Focal);
window.Alpine = Alpine;
window.Alpine.start();
Usage
Attach the x-focal directive on an image element and enter the point (unsing px or % informations) to keep in focus while containing the image.
<div x-data>
<img
src="..."
width="400px"
height="600px"
x-focal="10% 80%"
>
</img>
</div>
Optinally you can use set the third parameter to true (x-focal="100px 100px true") to get a preview image where you can set the focal point with an easy click on the image. Note: Just copy and paste the value to the x-focal attribute of the image element in production. ;) This is just a helper for your development.
License
Copyright (c) 2021 Michael Lefrancois
Licensed under the MIT license, see LICENSE.md for details.
15 Jul 22, 2022
18 Nov 16, 2022
10 Aug 29, 2022
2 Jun 21, 2022
4 Nov 23, 2022
58 Dec 28, 2022
28 Nov 26, 2022
7.1k Jan 2, 2023
3.5k Dec 30, 2022
11 Dec 17, 2022