@lefrancois/alpine-focal NPM

Alpine Focal

Add focal point alignment of images to your Alpine 3.x components with a custom directive.

GitHub Build size Brotli

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

Licensed under the MIT license, see LICENSE.md for details.

@everything-registry/sub-chunk-541

1.0.0

3 years ago