Skip to content

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

License

Notifications You must be signed in to change notification settings

lefrancois/alpine-focal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Copyright (c) 2021 Michael Lefrancois

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published