ctessier / nova-advanced-image-field Goto Github PK

Adding AdvancedImage::make('Photo') to my Nova resource does not work. When editing, the field is not shown. There are no errors which makes this really hard to debug. I presume this is a Nova 3.0 compatibility issue.

First things first, thanks for creating this Nova package!

Is it possible to create multiple sizes from one image upload?
I need two different sizes of the same image.

Thanks!

need abilities:

• to rename image at nova
• to set random filename instead storing the real name.
• prevent to store non alphanumeric file names (i.e. file names in non english language, with spaces ad/or other special symbols)
  Explaining

$hash = str_random(16); // dnfybfXBjZcSjuIk
$path = "/dn/"
$filename = "dnfybfXBjZcSjuIk" . $extension_from_mime_type;
$file = $path.$filename; // "/dn/dnfybfXBjZcSjuIk.PNG"

Hi
Photo cropping plugin does not display properly

• Nova 3.12
• RTL Theme: nova-rtl-theme

Hi! First of all, thanks for creating this package. It's very helpful on a project I'm working on 🙂

Unfortunately, the croppable() option is undermining the Nova dimension rules.

AdvancedImage::make('image_path') ->hideFromIndex() ->rules('image', 'dimensions:min_width=1000') ->croppable() ->resize(1000)

Now, I can upload an image with an original width of 2000px. Then I make the croppable box very, very small. When I save it, the saved image has only a width of 150px. This is understandable: the Nova rules check the dimensions on the uploaded image, not the end result after cropping and resizing. Also the resize() option doesn't make the end result viable, since by default it's instructed not to upsize.

What would be really great, is when the minWidth options of cropperjs would also be set whenever a resize() value is set. Users then cannot make the cropper smaller than the minimum dimensions.

I'm sorry I cannot contribute to the package myself. I only started developing Laravel 9 months ago. Packages and Nova are still a little bit magic to me. I looked at the code, but I also see that it requires changes to the Vue files. My Vue experience level is zero, unfortunately. I'll be patiently waiting for this improvement, hope it ends up on the backlog!

Is there a way in existence that would allow me to set the default crop area to 100% x 100% of an image? By default, the area is shrunk a bit from all four sides.

The Nova Advanced Image Field is supposed to inherit from the Nova File field.

That means the following methods should be available:

• ✅ disk
• ❓ disableDownload
• 🔴 storeOriginalName
• 🔴 storeSize
• ❓ deletable
• ❓ prunable
• ❓ path
• 🔴 storeAs
• 🔴 store
• ❓ delete
• ❓ preview
• ❓ thumbnail
• ❓ acceptedTypes

Hello! As the webp format is getting more and more popular, it'd be great to add this format to your beautiful plugin.
Additionally, I'd like to have an opportunity to store the original file as well. It's very useful in a regular CMS.

When i seed my database with an example image path the file does show in the detail view.
But when i click on edit to change the entry with my image nothing shows in the editor
Same when creating a new entry

It does show this in the source:
<div class="space-y-4"><!----><!----><dropzone files="" rounded="false" accepted-types="image/*" dusk="image-delete-link" input-dusk="image"></dropzone></div>

Running nova 4 with php8.0

path() method is not working with AdvancedImage, it's always saved on root directory with random string

AdvancedImage::make('Image') ->path('projects') ->croppable(16/9)

Is there any solution?

Thanks!

Hey :)

intervention/image v3 has been out some time now, and v2 is labeled with an end-of-life in their documentation. Are there any plans for adding support for the new version?

I've forked the repo to try fixing it - it works, but I'm not 100% confident the code is clean enough for a PR.
Link to fork with the commit

Laravel 5.8
I am trying to make crop and resize of an image and store it with spatie/laravel-medialibrary package

the code that works without AdvancedImage:

Image::make('Image 100x100', 'image')
    ->store(function (Request $request, $model) {
        // if isset then remove
        $mediaItem = $model->getMedia('shortcut')->first();
        if($mediaItem){
            $mediaItem->delete();
        }
        // saving new image
        $model->addMediaFromRequest('image')
            ->toMediaCollection('shortcut');
    })
    ->delete(function (Request $request, $model) {
        $mediaItem = $model->getMedia('shortcut')->first();
        if($mediaItem){$mediaItem->delete();}
    })
    ->preview(function () {
        return $this->getFirstMediaUrl('shortcut');
    })
    ->thumbnail(function () {
        return $this->getFirstMediaUrl('shortcut');
    })
    ->deletable(true),

The code to make crop using AdvancedImage:

AdvancedImage::make('Image', 'image')
    ->store(function (Request $request, $model) {
        // if isset then remove
        $mediaItem = $model->getMedia('shortcut')->first();
        if($mediaItem){
            $mediaItem->delete();
        }
        // saving new image
        $model->addMediaFromRequest('image')
            ->toMediaCollection('shortcut');
    })
    ->croppable(1/1)->resize(100, 100)
    
    ->delete(function (Request $request, $model) {
        $mediaItem = $model->getMedia('shortcut')->first();
        if($mediaItem){$mediaItem->delete();}
    })
    ->preview(function () {
        return $this->getFirstMediaUrl('shortcut');
    })
    ->thumbnail(function () {
        return $this->getFirstMediaUrl('shortcut');
    })
    ->deletable(true),

Frontend part working great, but store() method dont work, so I cant using it in my project.
Tried

    ->store(function (Request $request, $model) {
        Log::info( json_encode($request) );
    })

This part is not called

Is it possible to use AdvancedImage field as the avatar?

Hi,

On update when you click Delete image and then choose another image and click Save, it's throw 409 error due to this:

If the model has been updated since the retrieval, Nova will automatically respond with a 409 Conflict status code and display an error message to prevent unintentional model changes.

Hi! Everything is fine on my local computer. But the plugin doesn't want to work after uploading my finished website to the hosting.
When I'm choosing an image, the interface for cropping just doesn't appear. =( Could somebody give me a hint, please?

In node I am saving a query string with the epoch added as a query string to cause cache busting.

?16234234234

Where i would do that with this plugin?

The Nova Advanced Image field inherit from the native File field.

Inheriting from the Image field would bring the following features:

• rounded
• squared

I am getting this error. I am on windows and according to stackoverflow, this is intervention error occurs at windows. Could you help me to resolve that, please?

Thanks,

Hi

I have images saved as base64 encoded data in the db, is that supported by this field ?

I want to resize and crop image from admin panel. But i think it's not working.

AdvancedImage::make('Image','image')->croppable()->resize(624, 168),

Then i selected 700x700 px image

Is it croppable/resize area size 624x168?

When uploading images taken with phone, orientation is sometimes wrong.

I found the solution to just add "orientate()" to:
$this->image = Image::make($uploadedFile->getPathName())->orientate();

After that it works fine.

Maybe it would be good idea to include this into the package.

Example image that rotates wrong is this:

Why are you immediately closing the topic? the issue is not resolved with the problem "Encoding format (tmp) is not supported."! the problem is in the plugin, as it seems to me, and not in https://github.com/Intervention/image

You are using a package in which the error or something has changed there.

Hi there, just wondering if the upload to S3 is working with the ->path() function. it seems to throw it in the root of the bucket.

Cheers

The image thumbnail in a table view is tiny and useless. It's currently set to h-8 w-8 rounded-full which is impossible to see any detail. Any chance to use a larger default size, or give us the ability to override the thumbnail size?

Hello, is there a way to also replicate the AdvancedImage fields? Currently these are being ignored.

https://nova.laravel.com/docs/4.0/resources/#resource-replication

PS: Thanks for this HQ Nova field :)

When updating an image using:

AdvancedImage::make('Image', 'img') ->hideFromIndex() ->hideWhenCreating() ->showOnUpdating() ->croppable(16/9) ->resize(1280/720) ->disk('public') ->path('/events/events/'.$this->id) ->prunable() ->disableDownload(),

its gives me an error:

Encoding format (tmp) is not supported.

im using the GD lib and havent changed any other files. the default laravel nova image field works

Hi!
im lost.
Just now I saw that the thumbnail is not generated.
Any idea how to solve this problem?

Thanks for creating this package!

When I save form, I get this error
How to solve it? Thanks

Images size is almost twice more than the original size after upload and also the quality is worse.

Code:
AdvancedImage::make('Photo')->croppable()->resize(1500, 900)

Please have a look what is the issue.
It's a very necessary package, I love it :)

Thank You !!!

Version: 1.0.2

use Ctessier\NovaAdvancedImageField\AdvancedImage;

I want to use this to get the original file name

AdvancedImage::make('Photo', 'Image_Path') ->disk('public_Photo') ->croppable(1024 / 1024) ->resize(1024, 1024) ->storeOriginalName('Image_Original_Name'),

normal work
AdvancedImage::make('Photo', 'Image_Path') ->disk('public_Photo') ->storeOriginalName('Image_Original_Name'),

failure
AdvancedImage::make('Photo', 'Image_Path') ->disk('public_Photo') ->croppable(1024 / 1024) ->storeOriginalName('Image_Original_Name'),

failure
AdvancedImage::make('Photo', 'Image_Path') ->disk('public_Photo') ->resize(1024, 1024) ->storeOriginalName('Image_Original_Name'),

Seeing some errors and not displaying correctly.

help text structure changed in new nova vue default field and needs to update to show again

Can you confirm this is compatible with S3 file systems using the ->disk('s3') function as so:

Image::make('Logo URL', 'logo_url')->disk('s3'),

Thank you!

If image have .JPG instead .jpg this throw error in Create/Edit mode.

v1.1 (~Q2 2020)

• Add possibility to switch between gd and imagick as the Image driver ➡️ #43
• Upgrade dependencies (e.g. vuecropper-js) ➡️ #40

v1.2 (~Q3 2020)

• Improve inheritance with the File and Image fields ➡️ #48, #49

v1.3 (~Q2 2021)

• Implement avatar ➡️ #65

v2.0 (~Q4 2022)

• Nova 4 support ➡️ #80, #83

v2.1 (~Q3 2023)

• Image encode in other format ➡️ #108

v2.2 (~Q4 2023)

• Add possibility to disable zoom while cropping (#75)
• Add possibility to perform custom transformations on the Image via a transform(Image $image) method for instance

Apologies for asking what seems like a support question here, but I have installed nova-advanced-image-field and I cannot see any ability to crop my image. Is ther a JavaScript compiling process which is missing from the installation instructions?

    public function fields(Request $request)
    {
        return [
            AdvancedImage::make('Image', 'file')
                ->croppable()
                ->disk('s3')
                ->path('data/photos/large')
        ];
    }

Get the "Encoding format (tmp) is not supported" error when uploading.

When i try to upload svg files with this uploader, it gives format error.

Encoding format () is not supported. {"userId":21,"exception":"[object] (Intervention\\Image\\Exception\\NotSupportedException(code: 0): Encoding format () is not supported. at /var/www/vendor/intervention/image/src/Intervention/Image/AbstractEncoder.php:173) [stacktrace] #0 /var/www/vendor/intervention/image/src/Intervention/Image/AbstractDriver.php(79): Intervention\\Image\\AbstractEncoder->process(Object(Intervention\\Image\\Image), '', NULL) #1 /var/www/vendor/intervention/image/src/Intervention/Image/Image.php(121): Intervention\\Image\\AbstractDriver->encode(Object(Intervention\\Image\\Image), '', NULL) #2 /var/www/vendor/intervention/image/src/Intervention/Image/Image.php(146): Intervention\\Image\\Image->encode('', NULL) #3 /var/www/vendor/ctessier/nova-advanced-image-field/src/TransformableImage.php(136): Intervention\\Image\\Image->save() #4 /var/www/vendor/ctessier/nova-advanced-image-field/src/AdvancedImage.php(66): Ctessier\\NovaAdvancedImageField\\AdvancedImage->transformImage(Object(Illuminate\\Http\\UploadedFile), Object(stdClass))

@ctessier Can you tell me why the package is not working anymore? I'm using the latest version of Nova.

Hello!
I'm asking to make follow abilities:

• check for allowed mime types [optional, turnable]. it can be readable resource property (array)
• save uploaded and verified mime result into additional field of the same table [optional, turnable]

i.e. result:
id | filename | mime
1 | Image.jpg | image/jpeg

this feature is usable when used non listed disk storages and/or custom file download algorithms.

When using the code

AdvancedAvatar::make('Photo')->croppable(9/12)

I see an error: "Encoding format (tmp) is not supported."

what tell me?

I am using the plugin for an image per record and now have to save multipule images per record.
Is there a way with this plugin to do that?

Hi,

I am receiving the following JS errors on the frontend after installing this extension:

edit:1 Access to fetch at 'https://rent-roll-devour-bucket-a1.s3.ap-southeast-2.amazonaws.com/GKoOPfXlm7VkXjYG3djViQylols2qUhYax8TvCVE.png' from origin 'https://dev1.rrdevours.monster' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
rent-roll-devour-bucket-a1.s3.ap-southeast-2.amazonaws.com/GKoOPfXlm7VkXjYG3djViQylols2qUhYax8TvCVE.png:1 Failed to load resource: net::ERR_FAILED
advanced-image-field:2 Uncaught (in promise) TypeError: Failed to fetch
at advanced-image-field:2:277471
at u (advanced-image-field:2:270715)
at Generator._invoke (advanced-image-field:2:270468)
at Generator.next (advanced-image-field:2:271078)
at Kr (advanced-image-field:2:275952)
at a (advanced-image-field:2:276156)
at advanced-image-field:2:276217
at new Promise ()
at advanced-image-field:2:276096
at Proxy.fetchPreviewImage (advanced-image-field:2:277655)

Any input you have on why this could be happening would be much appreciated.

Thank you!

Code for Resource is:

AdvancedImage::make('Logo URL', 'logo_url')->disk('s3'),

Thanks for such a great package.

Can we use watermark api as in "Intervention Image"?

Example:
$img->insert('public/watermark.png');

When cropping an image the scroll will enlarge or shrink the image.
Is it possible to turn this off?
It looks like it may be the zoomable = false or maybe :zoomable = "false" ??
perhaps in FormField.vue

<vue-cropper
     v-if="field.croppable"
         v-show="imgSrc"
         class="mb-4"
         ref='cropper'
         :view-mode="1"
         :aspect-ratio="field.aspectRatio || NaN"
         :src="imgSrc"
       >
</vue-cropper>