Code Monkey home page Code Monkey logo

focalpointfield-craft's Introduction

Focal Point Field plugin for Craft CMS 3.x

A utility plugin for migrating the Craft 2 focal point field to the native Craft 3 functionality.

Screenshot

Requirements

This plugin requires Craft CMS 3.0.0-beta.23 or later.

Installation

To install the plugin, follow these instructions.

  1. Open your terminal and go to your Craft project:

     cd /path/to/project
    
  2. Then tell Composer to load the plugin:

     composer require aelvan/focal-point-field
    
  3. In the Control Panel, go to Settings → Plugins and click the “Install” button for Focal Point Field.

Focal Point Field Overview

-Insert text here-

Configuring Focal Point Field

-Insert text here-

Using Focal Point Field

-Insert text here-

Focal Point Field Roadmap

Some things to do, and ideas for potential features:

  • Release it

Brought to you by André Elvan

focalpointfield-craft's People

Contributors

aelvan avatar benjamminf avatar davidhellmann avatar wbrowar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

focalpointfield-craft's Issues

Craft 3?

I presume given native focal points you're not planning on porting this one?

I don't suppose there is any migration stuff for taking existing set focal point data and translating that to C3?

Using w/ Solspace Calendar

I am using Solspace Calendar and have an image field added to my calendar data model, which receives access to your focal point plugin. I am using Solspace's event.json output to access the event data, but I am not seeing the focal point data in the json output. I realize since this involves another plugin, you may not know for sure, but do you have a gut feeling if that data may not be accessible to the Calendar plugin? I will be checking with Solspace as well.

Feature request: Transform image preview

Inside the element editor modals, it would be great if Focal Point could display a transformed image (i.e. 500px width) instead of the original image (which can be huge).

Focal Point Field to big

Hey,

you set the max-width for the image to 300px but the wrapper is bigger an so, the focus point is not really useful. Can you fix that? I did it with custom css for now.

cheers, david

image

image / file type recognition

First, thanks for an amazing plugin. This is so much nicer then selecting the crop position out of a dropdown menu.

I found a small issue. It looks like you (or Craft) checks the file type to determine if the asset is an actual image. I have tested it with a couple of images and it looks like that only lowercase file extensions get recognised. So an image with the name myimage.JPG won't work and I get the message "This is not an image". Simply changing it to myimage.jpg works as expected.

Cheers.

Syntax for Using FocalPointField

Hello André,
Thanks a lot for developing and sharing imager/focalPoint as free plugins! The combination would be very handy for me but I´m having trouble finding the right spot and syntax for the FocalPointField. I tried my "... position: 'my-fpf-fieldname', but if I put it there once I get errors, and included twice it is ignored. (Entering % values works.) Sorry if I miss something obvious!
Wolfram

Position syntax using FPF with Imager and Eager Loaded Images

I'm having trouble getting the correct syntax for my FPF field when I'm using it with Imager with eager-loaded images. Specifically, I'm not sure what follows "position: " because this doesn't seem to work:

{% set image = entry.projectFeatureImage[0] ?? null %}
{% set transformedImages = craft.imager.transformImage(image, [
	{ width: 1200 },
	{ width: 720 },
	{ width: 290 }
	], {
		format: 'jpg',
		ratio: 3/4,
		allowUpscale: false,
		mode: 'crop',
		position: image.focalPointField,
		interlace: true
	}) %}

When I test out {{ image.focalPointField }}, it outputs the correct percentages that I set for my image positions (e.g. '30% 40%'). However, it doesn't seem to work within the Imager code syntax. Any guidance would be great!

Clear transform cache after image is replaced

I don't know if this is something you can fix, but I noticed that when I replaced an image in Assets, the image doesn't update in the Focal Point field. When I cleared the cache it was then updated.

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.