CKEditor field, embedded image, transform broken on the frontend _sometimes_

[johndwells]

I'm experiencing a really weird bug, and I can't figure out the exact pattern: I have a CKEditor field that allows images, and an asset transform rule defined. If I take an image that is hosted on a Servd volume, and embed it into the CKEditor field and choose the asset transform rule, the image will render broken on the front end. Not 100% all of the time, but most of the time, and always with revisions / live previews.

Steps to reproduce:

1. Create Servd filesystem
2. Create Asset volume using Servd filesystem
3. Create Asset Transform of any kind (e.g. Crop, width 640, auto format, etc)
4. Create CKEditor Config with "Insert Image" button available in toolbar
5. Create CKEditor field
   a. Use config from step 4
   b. Allow assets in volume from step 2
   c. Allow transforms from step 3
6. Create Section, place field from step 5 in layout
   a. Make sure the section has URLs and points to a template that renders the field from step 5
7. Create new entry
8. Open live preview
9. Add image into CKEditor field, note that Live Preview will render the image OK
10. Click on the image in the field, and then select the asset transform from the context dropdown

Expected Results:

After selecting the image transform for the embedded image, the Live Preview should be updated to render the image, transformed. The image URL should be something like:

https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&h=452&auto=compress%2Cformat&fit=crop&dm=1651074586&s=05e307b47dcc8fd70ea9c63fd59dc8f9

Actual Results:

The image is broken.

The image's URL contains duplicate transform param groups:

https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&h=452&auto=compress%2Cformat&fit=crop&dm=1651074586&s=05e307b47dcc8fd70ea9c63fd59dc8f9?w=640&auto=compress%2Cformat&fit=crop&dm=1651074586&s=3b5c88a52bf19308e3e2f1a8683886f4

If I manually manipulate the URL to remove the duplicates, both versions can work:

https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&h=452&auto=compress%2Cformat&fit=crop&dm=1651074586&s=05e307b47dcc8fd70ea9c63fd59dc8f9

https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&auto=compress%2Cformat&fit=crop&dm=1651074586&s=3b5c88a52bf19308e3e2f1a8683886f4

Note a subtle difference between the 2 transform param groups: the first contains width & height, whereas the second only contains width. This particular transform was defined to only change the width, so the height is "auto". So in the first param group, the height is calculated based on the image's original dimensions; in the 2nd param group, the height has been omitted.

Note also that:

• The image is also broken if viewing the preview in a separate tab
• Once I save my draft, the image sometimes renders fine on the front-end
• Once the image starts rendering fine on the frontend, it will continue to render fine as I make more edits
• There appears to be no difference if the draft is for a published or unpublished entry, or a revision

Environment & Versions:

PHP 8.1.27
Craft Pro 4.9.5
CKEditor 3.8.3
Servd Assets and Helpers 3.5.12
Servd Assets V3 Platform

[johndwells]

One other thing - this project has Imager-X installed, version 4.4.0.

…

On Sun, Jun 2, 2024, 8:59 AM John D Wells Jr ***@***.***> wrote: I'm experiencing a really weird bug, and I can't figure out the exact pattern: I have a CKEditor field that allows images, and an asset transform rule defined. If I take an image that is hosted on a Servd volume, and embed it into the CKEditor field and choose the asset transform rule, the image will render broken on the front end. Not 100% all of the time, but most of the time, and always with revisions / live previews. Steps to reproduce: 1. Create Servd filesystem 2. Create Asset volume using Servd filesystem 3. Create Asset Transform of any kind (e.g. Crop, width 640, auto format, etc) 4. Create CKEditor Config with "Insert Image" button available in toolbar 5. Create CKEditor field a. Use config from step 4 b. Allow assets in volume from step 2 c. Allow transforms from step 3 6. Create Section, place field from step 5 in layout a. Make sure the section has URLs and points to a template that renders the field from step 5 7. Create new entry 8. Open live preview 9. Add image into CKEditor field, note that Live Preview will render the image OK 10. Click on the image in the field, and then select the asset transform from the context dropdown Expected Results: After selecting the image transform for the embedded image, the Live Preview should be updated to render the image, transformed. The image URL should be something like: https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&h=452&auto=compress%2Cformat&fit=crop&dm=1651074586&s=05e307b47dcc8fd70ea9c63fd59dc8f9 Actual Results: The image is broken. The image's URL contains *duplicate* transform param groups: https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&h=452&auto=compress%2Cformat&fit=crop&dm=1651074586&s=05e307b47dcc8fd70ea9c63fd59dc8f9?w=640&auto=compress%2Cformat&fit=crop&dm=1651074586&s=3b5c88a52bf19308e3e2f1a8683886f4 If I manually manipulate the URL to remove the duplicates, both versions can work: https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&h=452&auto=compress%2Cformat&fit=crop&dm=1651074586&s=05e307b47dcc8fd70ea9c63fd59dc8f9 https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&auto=compress%2Cformat&fit=crop&dm=1651074586&s=3b5c88a52bf19308e3e2f1a8683886f4 *Note a subtle difference between the 2 transform param groups: the first contains width & height, whereas the second only contains width. This particular transform was defined to only change the width, so the height is "auto". So in the first param group, the height is calculated based on the image's original dimensions; in the 2nd param group, the height has been omitted.* Note also that: - The image is also broken if viewing the preview in a separate tab - Once I save my draft, the image *sometimes* renders fine on the front-end - Once the image starts rendering fine on the frontend, it will continue to render fine as I make more edits - There appears to be no difference if the draft is for a published or unpublished entry, or a revision Environment & Versions: PHP 8.1.27 Craft Pro 4.9.5 CKEditor 3.8.3 Servd Assets and Helpers 3.5.12 Servd Assets V3 Platform — Reply to this email directly, view it on GitHub <#80>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABAXXXKQNYCFRT2IHDGAC3ZFMQKTAVCNFSM6AAAAABIVC2AT2VHI2DSMVQWIX3LMV43ASLTON2WKOZSGMZDSNRXGE2TKOA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[johndwells]

I've disabled Imager-X, and the issue persists. On Sun, Jun 2, 2024 at 10:10 AM John D Wells Jr ***@***.***> wrote:

…

One other thing - this project has Imager-X installed, version 4.4.0. On Sun, Jun 2, 2024, 8:59 AM John D Wells Jr ***@***.***> wrote: > I'm experiencing a really weird bug, and I can't figure out the exact > pattern: I have a CKEditor field that allows images, and an asset transform > rule defined. If I take an image that is hosted on a Servd volume, and > embed it into the CKEditor field and choose the asset transform rule, the > image will render broken on the front end. Not 100% all of the time, but > most of the time, and always with revisions / live previews. > Steps to reproduce: > > 1. Create Servd filesystem > 2. Create Asset volume using Servd filesystem > 3. Create Asset Transform of any kind (e.g. Crop, width 640, auto > format, etc) > 4. Create CKEditor Config with "Insert Image" button available in > toolbar > 5. Create CKEditor field > a. Use config from step 4 > b. Allow assets in volume from step 2 > c. Allow transforms from step 3 > 6. Create Section, place field from step 5 in layout > a. Make sure the section has URLs and points to a template that > renders the field from step 5 > 7. Create new entry > 8. Open live preview > 9. Add image into CKEditor field, note that Live Preview will render > the image OK > 10. Click on the image in the field, and then select the asset > transform from the context dropdown > > Expected Results: > > After selecting the image transform for the embedded image, the Live > Preview should be updated to render the image, transformed. The image URL > should be something like: > > > https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&h=452&auto=compress%2Cformat&fit=crop&dm=1651074586&s=05e307b47dcc8fd70ea9c63fd59dc8f9 > Actual Results: > > The image is broken. > > The image's URL contains *duplicate* transform param groups: > > > https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&h=452&auto=compress%2Cformat&fit=crop&dm=1651074586&s=05e307b47dcc8fd70ea9c63fd59dc8f9?w=640&auto=compress%2Cformat&fit=crop&dm=1651074586&s=3b5c88a52bf19308e3e2f1a8683886f4 > > If I manually manipulate the URL to remove the duplicates, both versions > can work: > > > https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&h=452&auto=compress%2Cformat&fit=crop&dm=1651074586&s=05e307b47dcc8fd70ea9c63fd59dc8f9 > > > https://project-slug.transforms.svdcdn.com/production/uploads/image.jpg?w=640&auto=compress%2Cformat&fit=crop&dm=1651074586&s=3b5c88a52bf19308e3e2f1a8683886f4 > > *Note a subtle difference between the 2 transform param groups: the first > contains width & height, whereas the second only contains width. This > particular transform was defined to only change the width, so the height is > "auto". So in the first param group, the height is calculated based on the > image's original dimensions; in the 2nd param group, the height has been > omitted.* > > Note also that: > > - The image is also broken if viewing the preview in a separate tab > - Once I save my draft, the image *sometimes* renders fine on the > front-end > - Once the image starts rendering fine on the frontend, it will > continue to render fine as I make more edits > - There appears to be no difference if the draft is for a published or > unpublished entry, or a revision > > Environment & Versions: > > PHP 8.1.27 > Craft Pro 4.9.5 > CKEditor 3.8.3 > Servd Assets and Helpers 3.5.12 > Servd Assets V3 Platform > > — > Reply to this email directly, view it on GitHub > <#80>, or > unsubscribe > < https://github.com/notifications/unsubscribe-auth/AABAXXXKQNYCFRT2IHDGAC3ZFMQKTAVCNFSM6AAAAABIVC2AT2VHI2DSMVQWIX3LMV43ASLTON2WKOZSGMZDSNRXGE2TKOA> > . > You are receiving this because you are subscribed to this thread.Message > ID: ***@***.***> > — Reply to this email directly, view it on GitHub <#80 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABAXXS5U7Y7AYIDK6YEECDZFMYWFAVCNFSM6AAAAABIVC2AT2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBTHA4TGNRTGA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- ▂ *ONE DARNLEY ROAD* *John D Wells* Technical Director Unit 12, 39 Gransden Avenue London, E8 3QA +44 (0) 208 5259 292 onedarnleyroad.com instagram <https://www.instagram.com/onedarnleyroad/> linkedin <https://uk.linkedin.com/company/one-darnley-road> twitter <http://twitter.com/onedarnleyroad>

[mattgrayisok]

Bit later than usual, but just an update to let you know we're looking into this currently as it has been reported a couple more times recently.

[mattgrayisok]

I believe I've tracked this down to an issue with the way CKEditor is storing image URLs with query params in the database. I've therefore continued the discussion over here:

craftcms/ckeditor#336

[mattgrayisok]

As per the linked CKEditor issue this should now be resolved.