everlutionsk/file-jet-bundle

There is no license information available for the latest version (v2.0.3) of this package.

Everlution FileJet bundle for Symfony framework

This package's canonical repository appears to be gone and the package has been frozen as a result.

v2.0.3 2018-03-20 14:13 UTC

Requires

• php: >=7.0
• ci/restclientbundle: ^2.0.2
• doctrine/orm: ^2.3
• symfony/config: ^2.8|^3.0|^4.0
• symfony/dependency-injection: ^2.8|^3.0|^4.0
• symfony/http-kernel: ^2.8|^3.0|^4.0
• twig/twig: ^1.0|^2.0

Unknown License

• Tomas Szabo

• symfony
• file
• bundle
• everlution
• filejet

README

Installation

composer require everlutionsk/file-jet-bundle

Enable the bundle

// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new Everlution\FileJetBundle\EverlutionFileJetBundle()
    );
}

Configure the bundle

Following configuration snippet describes how to configure the bundle.

# app/config/config.yml
everlution_file_jet:
  storages:
    - id: <STORAGE_ID>
      api_key: <API_KEY>
      name: <CUSTOM_LOCAL_NAME>
      public_url: <PUBLIC_URL> # can be obtained at filejet.io

Clear bundle's cache

When you have any problems which may be related to persisted cache try to remove it by running following command

bin/console doctrine:cache:clear everlution.file.cache

Usage

See example directory.

Image mutations

Use

{{ file_url(file, '<MUTATION>') }} in view, where file is an implementation of Everlution\FileJetBundle\Entity\File and second argument is the file mutation.

Mutation examples

Resize: sz_1000x1000_100_100 => size = 1000x1000, offset = 100x100

Crop: c_1000x1000_100_100

Relative crop: c_0.4x0.89_0.1_0.1 => same as crop, but size and offset is in %.

Fill the image: fill_200x200 => you can have smaller image and want to fill it to certain size

Position: pos_center => used with fill - position of smaller image within larger filled image (center + cardinal directions eg. southwest etc)

Background: bg_white => used with fill - background color of fill (transparent to be implemented)

Rotate: rot_90 => rotate 90, 180, 270 degrees

Basically, string before "_" represents operation and string after "_" represents arguments. Arguments are like ImageMagick's geometry.

Mutations can be chained like "sz_1000x1000,c_100x100".

ZoomCrop - sz_325x245>,bg_white,pos_center,fill_325x245 - sz_XxY> means that it will only downsize the picture (not enlarge), bg_white - adds white background (see color names), pos_center - will center the image (NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast), fill_XxY - will fill the image with background color to the specified dimmensions.

How to

Construct crop mutation

// Create cropper: https://fengyuanchen.github.io/cropperjs/
var cropper = new Cropper(element, {
      checkCrossOrigin: false,
      zoomable: false,
      aspectRatio: 1,
      responsive: true,
      viewMode: 2
    });

// Construct mutation
var cropData = cropper.getData(true);
var canvasData = cropper.getCanvasData();

var width = (cropData.width / canvasData.naturalWidth).toFixed(4);
var height = (cropData.height / canvasData.naturalHeight).toFixed(4);
var x = (cropData.x / canvasData.naturalWidth).toFixed(4);
var y = (cropData.y / canvasData.naturalHeight).toFixed(4);

var mutation = 'c_' + width + 'x' + height + '_' + x + '_' + y;

Construct advanced crop mutation with variable aspec ratio

Allows to crop image with a custom aspec ratio. Result will be padded with an empty space to match a required aspect ratio (2.5).

// Create cropper: https://fengyuanchen.github.io/cropperjs/
const cropper = new Cropper(element, {
    checkCrossOrigin: false,
    zoomable: false,
    responsive: true,
    viewMode: 2
  });
  
// Construct mutation
const mutation = crop(2.5);
   
function crop(requiredRatio: number): string {
  const cropData = cropper.getData(true);
  const canvasData = cropper.getCanvasData();

  const mutations = [
    toCropMutation(cropData, canvasData),
    ...toFillMutation(cropData, requiredRatio)
  ];

  return mutations.join(',');
}

function toCropMutation(cropData, canvasData): string {
  const width = (cropData.width / canvasData.naturalWidth).toFixed(4);
  const height = (cropData.height / canvasData.naturalHeight).toFixed(4);
  const x = (cropData.x / canvasData.naturalWidth).toFixed(4);
  const y = (cropData.y / canvasData.naturalHeight).toFixed(4);

  return 'c_' + width + 'x' + height + '_' + x + '_' + y;
}

function *toFillMutation(cropData, requiredRatio: number): IterableIterator<string> {
  const currentRatio = cropData.width / cropData.height;

  if (requiredRatio !== currentRatio) {
    yield 'pos_center';
  }

  if (requiredRatio > currentRatio) {
    // Adds left and right padding
    yield 'fill_' + (cropData.height * requiredRatio / cropData.width).toFixed(4) + 'x1.0';
  } else if (requiredRatio < currentRatio) {
    // Adds top and bottom padding
    yield 'fill_1.0x' + (cropData.width / requiredRatio / cropData.height).toFixed(4);
  }
}