[Feature] Resize Images

[jasperf]

Is your feature request related to a problem? Please describe. I need to be able to resize images in the image editor. Does not seem to be possible Describe the solution you'd like Icon to click on for resizing and option to adjust width and height of the image and store edited image as a copy. Describe alternatives you've considered Alternative we considered is using other package (Image Intervention) to resize into 5 sizes on upload, but it eats up a lot of RAM (https://github.com/Intervention/image/issues/567#issuecomment-224230343 ) with many users so we would prefer a manual option.

[ctf0]

why not hook into any of the package events & do the resize through a queue for example ?

you can also use something like https://github.com/spatie/laravel-medialibrary to manipulate the file after being uploaded. i was thinking of making like a small tutorial on how to use both packages together but i haven't found time.

anyway i will try to add the feature to the current editor, hopefully it comes out as expected.

[jasperf]

@ctf0 Thanks for your feedback. Appreciate it a lot. I am going to look into that laravel media library made by Spatie. Who knows, perhaps better than Image Intervention. Did look into queues as well but in general users need the uploaded image post uploading in a certain format right away so queues are not an option. Or at least not often.

[jasperf]

Probably going to to use Dropzone instead of Image Intervention or Laravel Media Library. This as it allows browser or client side resizing. For width for example see https://www.dropzonejs.com/#config-resizeWidth . Will save us server side memory headaches. We want to use it for auto resizing on upload, but also in the media manager image editor for custom sizes.

[ctf0]

resize on upload could work if we manually used processQueue which is something i want to do later to allow removing files b4 uploading.

in editor, i couldnt get cropper to resize correctly "resize width only for now" so am not sure if it will work or we will need an extra lib for that

[jasperf]

DropzoneJS integrations with cropper libraries described at https://itnext.io/integrating-dropzone-with-javascript-image-cropper-optimise-image-upload-e22b12ac0d8a. Perhaps that can help us. Will check things out some more in the morning.

[jasperf]

in editor, i couldn't get cropper to resize correctly "resize width only for now" so am not sure if it will work or we will need an extra lib for that

I think it is because Dropzone uses soft crop by default. So you have to pick either width or height and then aspect ratio will be taken care of:

resizeWidth default: null | If set, images will be resized to these dimensions before being uploaded. If only one, resizeWidth or resizeHeight is provided, the original aspect ratio of the file will be preserved. The options.transformFile function uses these options, so if the transformFile function is overridden, these options don't do anything.

A hard crop should also be possible with setting resizeWidth and resizeHeight together.

See also https://stackoverflow.com/a/45092173/460885

[ctf0]

file preview before upload is done "will have a config to enable it" next step is to add the resize option

[jasperf]

Yeah just briefly checked the commit for preview before uploading https://github.com/ctf0/Laravel-Media-Manager/commit/a987db28222b7a7202e35e59c1b028f4b78c90da . Great work so far @ctf0 !

Was also looking into the filters used. This as we want to add filters for different sizes we want to uploaded in (Dropzone generated) such as:

• xlarge (hd, ultra hd),
• large (desktop),
• medium (tablet),
• small (mobile)

NB Thumbnails we will not show as a filter button, but they are generated as well of course NBB Filter buttons could perhaps go below the images overview instead above as it is kind of crowded there already.

Basically we want to show all large or desktop versions in media manager by default. When user clicks on a button (filter) for medium it will load medium sized versions of uploaded images. We do not want to show all versions of one uploaded image. That would just clutter the view

Did see we can filter by size already by the way. Just want to have buttons to resize by specific width or part of file name. We will add xlarge, large, medium, small to images generated on upload so we could perhaps filter by that part of the image name.

Resized custom version of a format will just be shown under the same size / format filter. So if I resize the large 1200px width image it will be loaded next to all the desktop or large images as a copy of it.

[ctf0]

am not sure but from what i understand, is that you want to have multiple versions of the same file and a way to filter them.

it would be very helpful as well if you could sketch/draw what you've described so we get a better idea of how it will look like.

keep in mind that the manager already have so many butns as you mentioned pretty much everywhere, so some UI/UX consideration would be appreciated too.

[jasperf]

We will upload and have each image uploaded in 4 sizes by Dropzone. What we would like to use is this view of the modal to filter by image version

[ctf0]

for filtration by text, why not use the search ? for filtration by dimension, it might be implemented.

[jasperf]

Filtering by dimensions or width would be what we prefer. This so we can by default load large/desktop at x px and allow for filtering by other dimensions using buttons. We only considered filtering by file name as all generated formats will get format added to file name. Basically like WordPress does with Plupload.

As you can see only one format / version of an image is shown at the time. Much better than showing all version at once.

[ctf0]

thats understandable for wp because the images will always be saved in this dimensions, but with our case the user is free to save it in anyway he/she sees fit.

however the file dimension is currently being created browser side, i couldnt find a way to get it server side with the filesystem package. so if we continued with the current logic it means we will have to read all the images "very bad for performance" to get its dims.

[jasperf]

Well perhaps we need to image generation in 4 formats on upload with Dropzone. For custom resizing of existing images perhaps somethings like Image Intervention then. II does server side work with GD. Would still safe us quite some ram for automated 4 x formats generation for each uploaded image. Only server side demand would be for custom sized/ sizing of images and that happens a lot lesss often.

[ctf0]

what i can do for now while keeping the solution as generic as possible.

• add the resize option for each file "to allow resize b4 uploading"
• any extra/post work could be done through the package events "now you can create the extra sizes/formats as you want"
• filter by dimension "unless we have a server side solution to send the info with the file instead of the current solution" it wont be possible.

[jasperf]

• Resizing before uploading is neat, though we may still look into server side options. However I agree that in the latter case (server side resizing) we should probably keep that separate.
• Package events to upload several formats on the fly sounds good and something that should work with media manager and be browser side.
• Filter by dimension, well yeah, perhaps that has to be done server side with Laravel functionality or a package like Image Intervention as well.

Thanks for all the brainstorming here and good to see the media manager can be improved with a good chunk of what we want. I guess we should write about the server side stuff: resizing when on the server; filtering by dimensions using server side functionality so others can use this too.

As a side note, do wonder how WordPress currently allows resizing of already uploaded images. Seems to be pretty memory conservative. Will look into that as soon as I can.

[ctf0]

for file manipulation on server u have 2 solutions

• b4: https://github.com/ctf0/Laravel-Media-Manager/wiki/Have-More-Control-On-Uploads#v310
• after: https://github.com/ctf0/Laravel-Media-Manager/wiki/Image-Editor#optimize-edited-images-on-save

[ctf0]

hi again, so far most of the work is done but now at the point of trying to resize each image, which proved to be hard https://stackoverflow.com/questions/20533191/dropzone-js-client-side-image-resizing

so atm we have 2 solutions for the front-end resize

• use https://www.dropzonejs.com/#config-transformFile
• or use https://www.dropzonejs.com/#config-resizeWidth

in both cases the file is resized while being added by dz, which is not what we r after.

PS: not all images can be previewed because of https://www.dropzonejs.com/#config-maxThumbnailFilesize which wont add width,height,thumbnail to the uploaded file data info as the file will need to be read inside a canvas first in order to get this data.

which atm will freeze the browser because dz doesnt use webworker for drawing the canvas

[jasperf]

@ctf0 we are working on a solution with https://github.com/DiyazY/image-square-resizer for client side resizing as we hit issues with Dropzone as well. We use a slightly tweaked version of the file https://github.com/DiyazY/image-square-resizer/blob/master/source/image-square-resizer.js as a package in media manager. We also customized our form.js file to upload images in certain formats using this package. It uses Dropzone and the Image Square Resizer to achieve this.

This all works reasonably well. The aspect ratio of images is fine. Only the quality of images it not quite there yet. Sometimes certain parts of images like lines are a bit jagged.

So we are not quite done and or happy but closer. Perhaps you can try and do the same for resizing.

[ctf0]

the problem with front end resize is the file have to be transferred to a canvas first, which will surly alter some aspects of the image, and as the image gets bigger so the alteration issues will emerge.

currently am thinking of adding like an option object that gets sent with the image, then you can either use this options to alter the image after it was uploaded through the events or after it was sent to the server but b4 its saved to disk

this will also make it easier to integrate the package with something like https://github.com/spatie/laravel-medialibrary

[ctf0]

options object will be available in next release, thanx for your contribution & for the brain storming :rocket:

[ctf0]

@jasperf hi again, am getting close to sending the extra data along with the upload but atm am facing a dump 😡 issue where the attribute is always null on the backend.

the feature under test is adding a focal point for each upload https://github.com/ctf0/Laravel-Media-Manager/blob/44b3122559fe3f3a8c80aa52ce4fd040149561df/src/resources/assets/js/modules/upload.js#L164-L168

, plz test with the demo repo and reply back with any progress.

[ctf0]

focken fixed.

[jasperf]

Glad you did . Was planning on testing tomorrow. Today swamped in some WordPress and other Laravel work..

[ctf0]

ok no prob, btw am not sure if we should have an option to allow the user to add width & height from the manager or not & if yes what UI should be added ?

[jasperf]

In general we do want and cropping as an option and the option to set the size. We just added an icon for cropping besides existing one for resizing in the media manager design view. So an extra button in the area around the image to be edited.