Giter VIP home page Giter VIP logo

craft-focuspoint's Introduction

Focus point field type for Craft CMS

A plugin for Craft CMS based on jQuery FocusPoint (https://github.com/jonom/jquery-focuspoint). This create a new field type "Focus Point" where you can choose coordinates on an image for the focus point. It's a good way to use the same field/image for multiple crops or responsive images.

Requirements

Tested on Craft 2.5 and 2.6. No other specific requirement.

How to install

Download the latest release and unzip the focuspoint folder in the plugins directory. Install it via the administration plugins page.

How to use

Create a new field with the type "Focus Point". On an entry (or any content), choose coordinates for each uploaded assets on the field.

In your template, you can access the focus point data this way (you should load jQuery FocusPoint javascript on the front-end and initialize it) :

{% set image = entry.image.first() %}
<div class="focuspoint"
	data-focus-x="{{ image.focusX }}"
	data-focus-y="{{ image.focusY }}"
	data-image-w="{{ image.width }}"
	data-image-h="{{ image.height }}">
	<img src="{{ image.url }}">
</div>

Alternatively, you can use it in combination with Imager (https://github.com/aelvan/Imager-Craft) without the need to load any javascript :

{% set image = entry.image.first() %}
{% set transformedImage = craft.imager.transformImage(image, {
    width: 800,
    height: 600,
    mode: 'crop',
    position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%'
}) %}
<img src="{{ transformedImage.url }}">

or as a background image in css :

{% set image = entry.image.first() %}
<div style="background-image: url('{{ image.url }}');
    background-size: cover;
    background-position: {{ image.focusPctX }}% {{ image.focusPctY }}%;">
</div>

Screenshots

Edit field

Edit Focus point popup

craft-focuspoint's People

Contributors

aaronwaldon avatar engram-design avatar smcyr avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.