everlutionsk / file-jet-bundle
Everlution FileJet bundle for Symfony framework
Installs: 939
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 3
Language:JavaScript
Type:everlution-bundle
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
This package is not auto-updated.
Last update: 2022-10-12 15:21:27 UTC
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); } }