How to configure LiipImagineBundle to use a dynamic image stored in S3 as watermark?

[anacicconi]

Hello,

I'm using LiipImagineBundle, KnpGaufretteBundle and AWS SDK for PHP in a project. Everything works fine. However, I want to add a watermark filter and I can't manage to make it work. The path for the image used as watermark must be dynamic and it is stored on S3.

What is the best way to do it?

In the past, with an older version of Liip, I was informing a null path for the image in the configuration and extending the ImagineController to set a new configuration to the filter. Ex:

filter_sets:
    photo_high:
        watermark:
            image: ~

$filterConfig = $this->filterManager->getFilterConfiguration();
$config = $filterConfig->get($filter);
$config['filters']['watermark']['image'] = $this->dataManager->find('establishment_watermark', $watermarkPath);
$filterConfig->set($filter, $config);

I was on version v.0.21.1. Now, I updated to the version 1.3.

[makasim]

It looks like you need a dynamic filter, If so there is such a feature in the bundle, It was added in this PR #313

There is not a dedicated chapter in the documentation. Is it what you are looking for?

[anacicconi]

Hello Makasim,

Thanks for your answer. I saw in another site someone using this runconfig on Twig. I tried to use it but it doesn't work.

I did something like this:

{% set runtimeConfig = {"watermark": {"size": 1, "image": 'http://' ~ amazon_s3_media_url ~ '/establishment/' ~ establishment.watermarkPath, "position": 'bottom' }} %}
{% set url_photo_medium = photo.imagepath | imagine_filter('photo_high', runtimeConfig) %} 
<img src="{{ url_photo_medium }}" alt="">

Is it available on the version of Liip I'm using? It's the 1.3. For the image, I'm using the complete S3 URL. Is it right? And what should I inform in the config.yml? I tried with the image null:

filter_sets:
    photo_high:
        watermark:
            image: ~

[anacicconi]

The way I used to do dynamic filters in the past was similar to this post. I was extending the ImagineController and adding the value for the filters inside like this developper did. We don't do it anymore?

http://iswwwup.com/t/08955e0401a8/image-dynamic-filter-with-liipimaginebundle.html

[makasim]

Is it available on the version of Liip I'm using? It's the 1.3.

Yes it available since 1.0.

I tried to use it but it doesn't work.

What exactly does not work

[anacicconi]

Actually, I dump the runtimeConfig and the values are ok but the watermark is not applied. I wonder if it is because I'm using images from S3. The original image and the image used as watermark are on S3.

[makasim]

It does not matter what loaders\resolvers you are using, it must work

[anacicconi]

Ok, I'll keep trying. Thanks.

[anacicconi]

Makasim, just another question. Sorry for disturbing. I think I didn't understand how to fill the runtimeConfig. In the config.yml, I have:

filter_sets:
    photo_high:
            data_loader:    stream.shooting
            quality:        70
            filters:
                relative_resize: { widen: 1600 }
                watermark:       { image: ~ }

The loader stream.shooting is well defined on my service.yml and works for other filters without watermark. This is the service:

headoo.liip_imagine.binary.loader.stream.shooting:
          class: '%liip_imagine.binary.loader.stream.class%'
          arguments:
            - 'gaufrette://shooting/'
          tags:
            - { name: 'liip_imagine.binary.loader', loader: 'stream.shooting' }

Then in the Twig, I have:

{% set runtimeConfig = {"photo_high": {"image": 'http://' ~ amazon_s3_media_url ~ '/establishment/' ~ establishment.watermarkPath, "position": 'bottom' }} %}
{% set url_photo_medium = photo.imagepath | imagine_filter('photo_high', runtimeConfig) %}

But it seems that something is missing. How could Liip know that the "image" path and the "position" must be used for the watermark?

[makasim]

try this one

{% set watermark = "http://" ~ amazon_s3_media_url ~ "/establishment/" ~ establishment.watermarkPath %}
{% set runtimeConfig = {"watermark": {"image": watermark, "position": "bottom" }} %}
{% set url_photo_medium = photo.imagepath | imagine_filter("photo_high", runtimeConfig) %}

You can put a debuger break point to this line to https://github.com/liip/LiipImagineBundle/blob/master/Controller/ImagineController.php#L157 to see what is going on under the hood.

[anacicconi]

I tried but there's no way to make it work. It seems that, since I upgraded to the version 1.3 of Liip with a custom loader, the watermark filter doesn't work anymore. I stopped trying to make it work with a dynamic filter and I'm trying only to add a watermark from the config file. It doesn't work neither. For example:

photo_high:
        data_loader:    stream.shooting
        quality:        70
        filters:
            watermark:
                image: ../web/images/features1.jpg
                size: 0.5
                position: bottom

An then:

{% set url_photo_medium = photo.imagepath | imagine_filter('photo_high') %}

I tried many paths for the image with images that I know that exist in S3 or in my server. I can't understand what I'm doing wrong.

[makasim]

It seems work only for local files, https://github.com/liip/LiipImagineBundle/blob/master/Imagine/Filter/Loader/WatermarkFilterLoader.php#L32

I think it is not right

[anacicconi]

Yes, I saw that. So I tried to use local images as watermark but it still doesn't work. Maybe the image that will receive the watermark can't be on S3 neither. But this would be strange as the other filters work with S3 images.

[anacicconi]

Should I create another issue or edit the subject of this issue to see if someone knows why the watermark is not working?

I just created an empty controller and I'm making some more tests directly on the controller.

// I find my image
$image = $this->container->get('liip_imagine.data.manager')->find('photo_high', $photo->getPath());

// I get the config for my filter
$filterConfig = $this->container->get('liip_imagine.filter.configuration');
$config = $filterConfig->get('photo_high');

If I do a var_dump of the config of the filter, the image is null for the watermark:

array(11) { ["data_loader"]=> string(15) "stream.shooting" ["quality"]=> int(70) ["filters"]=> array(1) { ["watermark"]=> array(3) { ["image"]=> NULL ["size"]=> float(0.5) ["position"]=> string(6) "bottom" } } ["jpeg_quality"]=> NULL ["png_compression_level"]=> NULL ["png_compression_filter"]=> NULL ["format"]=> NULL ["animated"]=> bool(false) ["cache"]=> NULL ["default_image"]=> NULL ["post_processors"]=> array(0) { } }

// I add a image to my watermark
$config['filters']['watermark']['image'] = 'https://www.google.com/logos/doodles/2015/olga-cossettinis-117th-birthday-5667193748455424-hp2x.jpg';

// I set the new config for my filter
$filterConfig->set('photo_high', $config);

If I do a var_dump of the new config of the filter, the image is there:

array(11) { ["data_loader"]=> string(15) "stream.shooting" ["quality"]=> int(70) ["filters"]=> array(1) { ["watermark"]=> array(3) { ["image"]=> string(99) "https://www.google.com/logos/doodles/2015/olga-cossettinis-117th-birthday-5667193748455424-hp2x.jpg" ["size"]=> float(0.5) ["position"]=> string(6) "bottom" } } ["jpeg_quality"]=> NULL ["png_compression_level"]=> NULL ["png_compression_filter"]=> NULL ["format"]=> NULL ["animated"]=> bool(false) ["cache"]=> NULL ["default_image"]=> NULL ["post_processors"]=> array(0) { } }

// So I apply the filter
$this->container->get('liip_imagine.filter.manager')->applyFilter($image, 'photo_high');

// I store the filtered image
$cacheManager->store($result, $photo->getPath(), 'photo_high');

But the image is stored without the watermark. I really don't know what is happening.

[makasim]

@anacicconi the url https://www.google.com/logos/doodles/2015/olga-cossettinis-117th-birthday-5667193748455424-hp2x.jpg is not accepted by current implementation of watermark filter.

It works only with local files right now, Look at this line: https://github.com/liip/LiipImagineBundle/blob/master/Imagine/Filter/Loader/WatermarkFilterLoader.php#L32

The filter has to be patched to accept urls as water mark images.

[makasim]

The image must be something like "images/features1.jpg" which is added to rootPath (the root to your app folder, if I remember it correctly)

[anacicconi]

Humm... I Also tried it but my images were on the web folder. So I was doing ../web/images/features1.jpg. I will try to move one to the app folder and see if it works. Thanks.

[anacicconi]

@makasim, after some time trying, I was able to use the runtimeconfig on Twig. It was a problem of configuration too. However, now I have to the same problem on a controller and I'm not able to make it work. I followed the code you suggested on #313 and I keep getting "Signed url does not pass the sign check for path". The hash seems to be ok. Did I miss something?

$browserPath = $this->container->get('liip_imagine.cache.manager')->getBrowserPath(
    $photo->getPath(),
    $filter,
    array(
        'watermark' => array(
            'image' => //image path,
             'position' => //image position
           )
        )
 );

$content = file_get_contents($browserPath);

[makasim]

looks good, maybe a bug

[anacicconi]

No, it's not a bug @makasim. Actually, it's not possible to do what I was trying to do (file_get_contents) on the browserPath. I need the filter to be applied before the display so I can get the content. The only solution I found is to do:

$filterConfig = $this->container->get('liip_imagine.filter.configuration');
$config = $filterConfig->get($filter);
$config['filters']['watermark']['image'] = $watermarkPath;
$config['filters']['watermark']['position'] = $watermarkPosition?:"bottom";
$filterConfig->set($filter, $config);
$this->container->get('liip_imagine.controller')->filterAction($request, $photo->getPath(), $filter);
$browserPath = $this->container->get('liip_imagine.cache.manager')->getBrowserPath($photo->getPath(), $filter);
$content = file_get_contents($browserPath);

Otherwise, for the display, the runtimeConfig works great.