Giter Club home page Giter Club logo

acf-image-crop's Introduction

ACF-Image-Crop

Basic proof of concept of an ACF image field with user-crop. It still needs a lot of testing.

When setting up the field, you are able to pre-define dimensions/aspect ratio, that the user can crop the image to right in the displayed image. This field is an extension of the original image-field, and should behave in the same way as the original image field except for the cropping option.

The field uses the imgareaselect jquery cropping plugin for the front-end crop functionality.

##Installation

  1. Create a folder called "fields" in your theme folder (if not already created) and copy the image-crop.php and lib-folder into it.*

  2. Add the following code to your functions.php:

    if( function_exists( 'register_field' ) ){
        register_field('ImageCrop', dirname(__File__) . '/fields/image_crop.php');
    }

*If you choose to use another location for the field, be sure to set the "pathToFields"-variable of image_crop.php in line 36 correspondingly

##Usage When setting up a field, chose the crop type you would like to use:

Fixed: the aspect ratio is locked to the specified dimensions. The user is able to select a bigger area, which will be scaled down to the specified dimensions after the crop. Variable height/width: One dimension is fixed to the specified size, while the other can be selected between the min and max specified. Leave blank for no min/max. Free: The user can freely crop the image as desired.

In the edit screens when an image is selected, a crop button will appear after the image. When pressed the image can be cropped based on the selected settings. When the post is saved, the image is cropped based on the users cropping. If the user doesn't crop the image, no changes will be made.

acf-image-crop's People

Contributors

andersthorborg 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.