Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Watermarks supported on Sharp? #3

Open
justinholtweb opened this issue Jan 3, 2023 · 1 comment
Open

Watermarks supported on Sharp? #3

justinholtweb opened this issue Jan 3, 2023 · 1 comment

Comments

@justinholtweb
Copy link

justinholtweb commented Jan 3, 2023

Recently converted a site from Imgix to AWS Sharp using this handler and just noticed that the watermarks I have defined in my transform params are not working on the AWS transformed image versions.

I call the transform as follows:
{% set tinyWatermark = { mark: 'https://d30bqq6to3czbc.cloudfront.net/general/JLI-Watermark.png', 'mark-scale': 5, 'mark-pad': 50, 'mark-alpha': 50, 'cs': 'srgb' } %} {% set smallWatermark = { mark: 'https://d30bqq6to3czbc.cloudfront.net/general/JLI-Watermark.png', 'mark-scale': 10, 'mark-pad': 50, 'mark-alpha': 50, 'cs': 'srgb' } %} {% set largeWatermark = { mark: 'https://d30bqq6to3czbc.cloudfront.net/general/JLI-Watermark.png', 'mark-scale': 20, 'mark-pad': 50, 'mark-alpha': 50, 'cs': 'srgb' } %} {% set sizes = [ { width: settings.maxWidth | default(3000) }, { width: settings.interval | default(500) } ] %} {% if settings.watermark ?? null %} {% if settings.watermark == 'large' %} {% set sizes = [ { width: settings.maxWidth | default(3000), transformerParams: largeWatermark }, { width: settings.interval | default(500), transformerParams: largeWatermark } ] %} {% endif %} {% if settings.watermark == 'small' %} {% set sizes = [ { width: settings.maxWidth | default(3000), transformerParams: smallWatermark }, { width: settings.interval | default(500), transformerParams: smallWatermark } ] %} {% endif %} {% if settings.watermark == 'tiny' %} {% set sizes = [ { width: settings.maxWidth | default(3000), transformerParams: tinyWatermark }, { width: settings.interval | default(500), transformerParams: tinyWatermark } ] %} {% endif %} {% endif %} {% set focalPoint = settings.image.getFocalPoint() %} {% set transformSettings = { position: focalPoint, jpegQuality: 80 } | merge(settings.extra | default({})) %} {%- if craft.imager.serverSupportsWebp() and craft.imager.clientSupportsWebp() -%} {% set transformSettings = transformSettings | merge({ format: 'webp' }) %} {%- endif -%} {%- set transformedImage = craft.imager.transformImage(settings.image, sizes, transformSettings, { fillTransforms: true, fillInterval: settings.interval | default(250), resizeFilter: 'box', instanceReuseEnabled: true }) -%} {% set objectPosition = (focalPoint.x * 100) ~ '% ' ~ (focalPoint.y * 100) ~ '%' %} {% set myAttributes = { draggable: false, data: { 'object-fit': settings.objectFit ?? 'cover', 'object-position': settings.objectPosition ?? objectPosition ?? 'center', 'original-width': settings.image.width, 'original-height': settings.image.height, }, alt: settings.image.title, class: settings.class | default(''), srcset: craft.imager.srcset(transformedImage), sizes: settings.width | default('100vw'), style: { 'object-fit': settings.objectFit ?? 'cover', 'object-position': settings.objectPosition ?? objectPosition ?? 'center', 'transform-origin': objectPosition ?? '50% 50%', } } %} <img {{ attr(myAttributes) }}/>

Looking at the Sharp documentation it looks like it supports Compositing images but I can't determine how the params should be edited to send the right configurations settings to Sharp.
https://sharp.pixelplumbing.com/api-composite

I can see these current params being logged in the Lambda job logs. An example:
2023-01-03T15:33:23.886Z 9156c0a6-dcaa-4940-a5ee-59361d65b262 INFO { requestType: 'Default', bucket: 'jli-images', key: 'general/LCE_LvgtoDngRm.jpg', edits: { resize: { width: 2750, position: 'center', fit: 'cover' }, withMetadata: true, toFormat: 'webp', webp: { quality: 80 }, mark: 'https://d30bqq6to3czbc.cloudfront.net/general/JLI-Watermark.png', 'mark-scale': 10, 'mark-pad': 50, 'mark-alpha': 50, cs: 'srgb' }, contentType: 'image/webp', lastModified: 'Sat, 31 Dec 2022 12:53:57 GMT', cacheControl: 'max-age=31536000,public', originalImage: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff e1 01 ea 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 0c 01 06 00 03 00 00 00 01 00 02 ... 1095346 more bytes>, headers: undefined, outputFormat: 'webp' }

@boboldehampsink
Copy link

+1 for watermark support - it should be possible but it seems it is not (yet) built into this transformer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants