jb_crop_image_ajax

[ghost]

Hey there, I really like your bundle, because there is no other bundle, that is working for me, instead of yours.. :)

So my question is, how to get jb_crop_image_ajax working? It throws me an exception if I add it like this:

        ->add('image', 'jb_crop_image_ajax', array(
            'img_width' => 400,
            'endpoint' => 'gallery',
                'crop_options' => array(
                'aspect-ratio' => 1,
                'set-select' => "[5,5,20,20]"
            )
        ))

An exception has been thrown during the rendering of a template ("Unable to generate a URL for the named route "jb_image_crop_endpoint" as such route does not exist.") in JbFileUploaderBundle:Form:fields.html.twig at line 91.

And another question: In the documentation of the standard image upload it says, original images will go to /uploads folder and edited are going to /media. How can I configure that all uploads will be resized to, for example 400x300 and placed in the /media folder and in the DB the edited image will be pointed? At the moment, no images are placed in /media and the DB entry points to the originals in /uploads.

Thank you :)

[jbouzekri]

Hi, Thanks for using my bundle.

I think I missed a step in the installation process documentation. You should load the routing.yml file to add the jb_image_crop_endpoint route.

in app/config/routing.yml, add :

jb_fileupload_crop:
    resource: "@JbFileUploaderBundle/Resources/config/routing.yml"

For your question about the file storage, this bundle cannot store both croped and original pictures in the same folder as the 2 will have the same name. In another project I have original in and uploads folder and croped in upload/croped (so not the really same folder but in the same folder tree).

Moreover, this bundle does not store resized image as it is the work of the LiipImagineBundle which is installed with my bundle to resize when displaying these images. However It provides validation to verify that croped image ratio matches 400/300 so you will have a stored croped image of a good ratio and no problem when resizing with Liip Bundle.

Could you provide your configuration in config.yml for knp_gaufrette, oneup_uploader, liip_imagine and jb_file_uploader keys. I could give you pointers about a good configuration to meet your needs.

[ghost]

Wow thanks for your fast answer.. :)

Okay now I understand, I thought images would be manipulated by LiipImagineBundle after upload, for example making thumbnails out of it. Doesn't it take much more performance to resize the images everytime they are displayed, especially if there are a lot of images, than to resize them once after upload? Regarding to that, what is LiipImagineBundle needed for in the current configuration and do you have any idea how I could resize an image automaticly to 400x300 after the user has cropped it to 4:3 ratio? I really have to watch performance of my app.

Thanks mate, I'll provide my configs tomorrow, 'caus I'm allready in my bed :)

EDIT: I don't have to provide you my configs. I copied them from your "Getting started" documentation, nothing changed.. :)

[ghost]

Nevermind, I just read it in the documentation of LiipImageBundle. Should be good enough.. ;)

"Behind the scenes, the bundles applies the filter(s) to the image on the first request and then caches the image to a similar path. On the next request, the cached image would be served directly from the file system."

But I'm still curious about your pointers for my configuration.. :)

[ghost]

Hey me again, Jcrop is working now, with the routing added. But after pressing "cofirm" I'm getting an error, because it looks for the original image in the /web folder and not in the /web/uploads folder where the image is.

Source image not found in "../web/54f43caced5ef.JPG"

[jbouzekri]

Yeah, I think I missed some more documentation for the crop side of things. I am preparing a full configuration based on the getting started one. I will post it here in around 15 minutes.

[ghost]

Cool, thank you so much :)

[jbouzekri]

knp_gaufrette:
    stream_wrapper: ~
    adapters:
        image:
            local:
                directory: %kernel.root_dir%/../web/uploads
                create: true
        croped:
            local:
                directory: %kernel.root_dir%/../web/uploads/croped
                create: true
    filesystems:
        image:
            adapter: image
            alias: image_filesystem
        croped:
            adapter: croped
            alias: croped_filesystem

oneup_uploader:
    mappings:
        gallery:
            frontend: blueimp
            storage:
                type: gaufrette
                filesystem: gaufrette.image_filesystem
                stream_wrapper: gaufrette://image/

liip_imagine:
    loaders:
        stream.image_filesystem:
            stream:
                wrapper: gaufrette://image/
        stream.croped_filesystem:
            stream:
                wrapper: gaufrette://croped/
    filter_sets:
        original: ~
        thumb_from_original:
            data_loader: stream.image_filesystem
            quality: 75
            filters:
                thumbnail: { size: [120, 90], mode: outbound }
        thumb_from_croped:
            data_loader: stream.croped_filesystem
            quality: 75
            filters:
                thumbnail: { size: [120, 90], mode: outbound }

jb_file_uploader:
    resolvers:
        upload:
            assets:
                directory: uploads
        croped:
            assets:
                directory: uploads/croped
    croped_fs: croped
    croped_resolver: croped
    endpoints:
        gallery:
            upload_resolver: upload
            upload_validators: {}
            crop_validators: {}

[jbouzekri]

So this is a full configuration working for croped. As you can see it extends a little the one from Getting started.

These are the difference :

• 2 Knp gaufrette filesystems : image (original upload) and croped (croped image)
• 2 loaders in Liip bundle : one for original and one for croped
• 2 example of filters : the thumb_from_original resize from the original one and thumb_from_croped resizes from the croped one
• in jb_file_uploader, we configures 2 resolvers one for croped and one for original and we configured the gaufrette filesystem storing the croped one and the resolver to be used to generate the url for the croped one.

Did you have any issues after using this configuration ?

[ghost]

I'm still getting the Source image not found error with your config because it's still looking in the /web folder for the original image.

[jbouzekri]

Are you editing an existing entity with the image already saved ? Can you reset and test again beacause I just tested it and it works fine for me.

[jbouzekri]

From what I see this "Source image not found" comes from LiipImagineBundle. Can you post your configuration for this bundle ?

[ghost]

Hmm no I'm creating a new entity and I just installed LiipImageBundle like this: http://symfony.com/doc/master/bundles/LiipImagineBundle/installation.html and took your configuration from above.

liip_imagine:
    loaders:
        stream.image_filesystem:
            stream:
                wrapper: gaufrette://image/
        stream.croped_filesystem:
            stream:
                wrapper: gaufrette://croped/
    filter_sets:
        original: ~
        thumb_from_original:
            data_loader: stream.image_filesystem
            quality: 75
            filters:
                thumbnail: { size: [120, 90], mode: outbound }
        thumb_from_croped:
            data_loader: stream.croped_filesystem
            quality: 75
            filters:
                thumbnail: { size: [120, 90], mode: outbound }

I'm selecting an image, I can see its preview and crop it, and after clicking "confirm" I'm getting this error in a red box upon the image: Source image not found in "/home/user/symfony-projects/demo/app/../web/54f45ca0bb7aa.jpg"

[jbouzekri]

I think I know what happens. Could you add this at the start of liip_imagine :

liip_imagine:
    data_loader: stream.image_filesystem

[ghost]

Hey, now it works. Thank you very much! :)

[jbouzekri]

Nice, I will update my crop documentation to add the missing configuration and example. Do not hesitate to come back to me if you meet any more difficulties. Have a nice day.