You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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' }
The text was updated successfully, but these errors were encountered:
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' }
The text was updated successfully, but these errors were encountered: