VichUploaderBundle and AvalancheImagineBundle

Question

I use VichUploaderBundle for upload my media files and I want to use AvalancheImagineBundle to create thumbs in my templates. How it should be done?

I have this right now:

<td><img src="{{ vich_uploader_asset(entity, 'image') | apply_filter('my_thumb')}}" alt="{{ entity.nombre }}" /></td>

But the output is:

<img src="/app_dev.php/media/cache/my_thumb/images/uploads/392158_10150441208223772_580903771_8591661_774015725_n.jpg" alt="Froga"/>

this is my config.yml:

# Vich Uploader
vich_uploader:
    db_driver: orm
    twig: true
    gaufrette: false # set to true to enable gaufrette support
    storage: vich_uploader.storage.file_system
    mappings:
        uploads:
            uri_prefix: /images/uploads
            upload_destination: %kernel.root_dir%/../web/images/uploads
            namer: ~ # specify a file namer service id for this entity, null default
            directory_namer: ~ # specify a directory namer service id for this entity, null default
            delete_on_remove: true # determines whether to delete file upon removal of entity
            inject_on_load: true # determines whether to inject a File instance upon load

avalanche_imagine:
    source_root:  %kernel.root_dir%/../web/images/uploads
    web_root:     %kernel.root_dir%/../web/images/uploads
    cache_prefix: media/cache
    driver:       gd
    filters:
        my_thumb:
            type:    thumbnail
            options: { size: [120, 90], mode: outbound, quality: 100, format: png }

Any help or clue?

Answer 1

If the problem you are having is that no image is being displayed, then I had the same issue.

In order to solve it I ensured that within my config.yml, the source_root and web_root options of avalanche_imagine were set to %kernel.root_dir%/../web (or your web root). Here is the relevant snippet from my config.yml:

#Uploads
knp_gaufrette:
    adapters:
        article_adapter:
            local:
                directory: %kernel.root_dir%/../web/images/articles
    filesystems:
        article_image_fs:
            adapter:    article_adapter
vich_uploader:
    db_driver: orm
    gaufrette: true
    storage: vich_uploader.storage.gaufrette
    mappings:
        article_image:
            uri_prefix: /images/articles
            upload_destination: article_image_fs
            namer: vich_uploader.namer_uniqid

#images
avalanche_imagine:
    filters:
        article_list:
            type:    thumbnail
            options: { size: [100, 100], mode: outbound }
    source_root:  %kernel.root_dir%/../web
    web_root:     %kernel.root_dir%/../web
    cache_prefix: cache