Watermarking support about glide HOT 14 CLOSED

Yes, this definitely needs to be added. I do see some challenges with it being configured at the Server level, even though I agree that's maybe the place to do it. The challenge is when images are scaled to different sizes. A watermark may look great at 500x500, but may be totally messed up at 100x100.

I'm going to do some experimenting with this. Once again, I want to reference the very well thought out Imgix API. They do offer this via their HTTP API. Here are the parameters:

• mark - watermark image URL
• markalign - watermark aligment mode
• markalpha - watermark alpha
• markfit - watermark image fit mode
• markh - watermark image height
• markpad - watermark padding
• markscale - watermark scale
• markw - watermark image width
• markx - mark x
• marky - mark y

That's obviously a very complex, very powerful API. I'm not sure how much of this Glide can offer, as some of it depends on what Intervention offers. But it's a good reference nonetheless.

from glide.

One solution I thought of (briefly, and without really understanding the inner workings of Glide, so it may be a horrible idea) is to allow the factory to accept a few watermark configurations, and allow the HTTP API to dictate which one to use.

Something like:

ServerFactory::create([
    'source' => 'path/to/source/folder',
    'cache' => 'path/to/cache/folder',
    'watermarks' => [
      'logo' => ['w' => 10, 'h' => 10, 'p' => 'bottom-right'],
      'overlay' => ['w' => '100%', 'h' => '100%, 'fit' => 'crop']
    ]
]);

Then choose the watermark in the URL. /img/myimg.jpg?w=100&h=100&watermark=logo

from glide.

That's not a bad idea either. I will be honest with you though, a big goal for me with Glide has been to make all operations available via the HTTP API. This makes Glide very simple to use, as all the image manipulations are done in the same place. I can see the benefit of having some "preassigned" manipulations. It's just a question of whether this should be baked into Glide, or added at the application level.

from glide.

Also, while I think of it, I'd recommend that Statamic offer some type of template helper to output image URLs. This can be especially helpful for automatically securing images with HTTP signatures.

{{ image file="cat.jpg" w="500" }}

And that would output something like this:

<img src="http://example.com/img/cat.jpg?w=500&token=af3dc18fc6bfb2afb521e587c348b904">

You could give users the option to enable/disable signatures (maybe depending on the environment), but I'd strongly recommend using HTTP signatures. I know for myself I have them disabled when doing local development, but I enable them in production.

from glide.

I agree that everything should be done with the HTTP API, since that's really the benefit to Glide.

I suppose we could be doing the watermarking part on the app level. Glide can perform the manipulations and cache an image without displaying it, right? Just use makeImage()? We'd need to get what Glide creates, manipulate it further ourselves, then render it.

...and yup, we already have plans for that tag :)

from glide.

Okay sweet! If you have plans for a tag like that, then maybe that's how you could handle the preassigned data. For example, in your application config:

_default_image_manipulations:
    - mark_src: logo.png
    - mark_w: 50
    - mark_h: 50
    - mark_pos: bottom-right

Then, when you generate the image URL using the new template tag, it automatically adds the default image manipulations to it. To output an image with the defaults you just do this:

{{ image file="cat.jpg" w="500" }}

But in reality, it's actually doing this:

{{ image file="cat.jpg" w="500" mark_src="logo.png" mark_w="50" mark_h="50" mark_pos="bottom-right" }}

The point being, there are lots of ways to skin this cat. This approach would mean that Statamic can still just interact with the HTTP API (via this new template tag), which is nice and easy. You could even get fancy with it by allowing different default image manipulations in the site configuration. For example:

_default_image_manipulations:
    - watermark:
        - mark_src: logo.png
        - mark_w: 50
        - mark_h: 50
        - mark_pos: bottom-right
    - black_and_white:
        - filt: greyscale

{{ image file="cat.jpg" implements="watermark" }}

And you could even allow for overriding at this point, by adding additional parameters after whatever default it implements:

{{ image file="cat.jpg" implements="watermark" w="500" }}

You get the idea.

from glide.

Some design ideas and notes:

Define the available watermarks using a Flysystem instance in the same way the source and cache are defined:

// With strings:
$server = League\Glide\ServerFactory::create([
    'source' => 'path/to/source/folder',
    'cache' => 'path/to/cache/folder',
    'watermarks' => 'path/to/watermarks/folder',
]);

// With objects
$server = League\Glide\ServerFactory::create([
    'source' => new Filesystem(new Local('path/to/source/folder')),
    'cache' => new Filesystem(new Local('path/to/cache/folder')),
    'watermarks' => new Filesystem(new Local('path/to/watermarks/folder')),
]);

Then the watermark URL can simply be a filename that references an image in the watermarks folder/filesystem. Like:

/img/kayaks.jpg?mark=logo.png

Also, I'm thinking we'll use the following API for the initial release of this:

• mark - the filename the watermark
• markw - the width of the watermark (optional)
• markh - the height of the watermark (optional)
• markpos - the position of the watermark (optional, bottom-right default)
• markx - the horizontal offset of the watermark (optional)
• marky - the vertical offset of the watermark (optional)

from glide.

Making some progress on this! I've got this working locally:

img/kayaks.jpg?w=1000&mark=billabong.png&markw=200&markx=25&marky=25&markpos=top-right

from glide.

Woo!

On Jun 15, 2015, at 7:47 PM, Jonathan Reinink [email protected] wrote:

Making some progress on this! I've got this working locally:

img/kayaks.jpg?w=1000&mark=billabong.png&markw=200&markx=25&marky=25&markpos=top-right

—
Reply to this email directly or view it on GitHub.

from glide.

I'm thinking I'll add two more options: markscale and markpad. Here's the full watermark api:

• mark
  • The filename the watermark
  • Example: &mark=logo.png
  • Must be found in the predefined watermarks filesystem
  • Can include a subfolder in the url, example: &mark=/logos/logo.png
• markw
  • The width of the watermark
  • Value is in pixels if it's a number (ie. markw=300)
  • Value is a percentage of the main image's width if followed with a w (ie. markw=30w)
  • Value is a percentage of the main image's height if followed with a h (ie. markw=30h)
• markh
  • The height of the watermark
  • Value is in pixels if it's a number (ie. markh=300)
  • Value is a percentage of the main image's width if followed with a w (ie. markh=30w)
  • Value is a percentage of the main image's height if followed with a h (ie. markh=30h)
• markfit
  • How the image is fitted to its target dimensions
  • Available options:
    • contain (default)
    • max
    • stretch
    • crop (same as crop-center)
    • crop-top-left
    • crop-top
    • crop-top-right
    • crop-left
    • crop-center
    • crop-right
    • crop-bottom-left
    • crop-bottom
    • crop-bottom-right
    • crop-face (future face recognition feature)
    • crop-50-50 (future focal point feature)
• markpos
  • The position of the watermark
  • Available options:
    • top-left
    • top
    • top-right
    • left
    • center
    • right
    • bottom-left
    • bottom
    • bottom-right (default)
• markx
  • The horizontal offset of the watermark
  • Value is in pixels if it's a number (ie. markx=15)
  • Value is a percentage of the main image's width if followed with a w (ie. markx=2w)
  • Value is a percentage of the main image's height if followed with a h (ie. markx=2h)
• marky
  • The vertical offset of the watermark
  • Value is in pixels if it's a number (ie. marky=15)
  • Value is a percentage of the main image's width if followed with a w (ie. marky=2w)
  • Value is a percentage of the main image's height if followed with a h (ie. marky=2h)
• markpad
  • The horizontal and vertical offset of the watermark
  • When enabled the markx and marky are ignored
  • Value is in pixels if it's a number (ie. markpad=15)
  • Value is a percentage of the main image's width if followed with a w (ie. markpad=2w)
  • Value is a percentage of the main image's height if followed with a h (ie. markpad=2h)

I'd like to also offer markalpha, but I've tested this an it's brutally slow. Like 10+ seconds for a basic watermark. Even Intervention warns about this. I think I'm going to leave this feature out for now.

from glide.

Double thumbs up! 👍 👍

from glide.

Gents, if you have a second, I'd love your feedback on this proposed image API change for the next release: #75. I've also updated the watermark API above to reflect these changes, most notably I've added the new markfit option.

I hate making breaking changes like this, but this is why Glide hasn't hit the 1.0 release yet. I really want to be able to flush it out before really locking it it long term. I think with these changes we're getting very close to that.

from glide.

I've removed the markscale option in favour of a pretty awesome new method of setting watermark dimensions via the markw, markh, markx, marky and markpad options. It works like this:

• The value is pixels if it's a number (ie. markw=300)
• The value is a percentage of the main image's width if followed with a w (ie. markw=30w)
• The value is a percentage of the main image's height if followed with a h (ie. markw=30h)

This gives tons of flexibility to use either fixed dimensions, or scaled dimensions based on the parent image. I kept the markpad option as a convience, instead of having to write out both markx and marky.

from glide.

Closing this ticket. The watermarks functionality is complete and has been merged into the master branch and will be tagged shortly when I release v1.0! Hopefully not long now.

Also, see the docs for this feature here.

from glide.