- Issue created by @rigoucr
- Merge request !43WORKAROUND: Decoding HTML entities at the End of the processing for EntityEmbedFilter. → (Open) created by rigoucr
- Status changed to Needs review
9 months ago 11:11pm 19 July 2024
When using the drupal core Responsive images formart , over a media item that is being embed into the Ckeditor, all the images URLS into the SRCSET property are printing the html entity & instear of the symbol '& '.
I wasn't aware of this behavior until last week , when one of our client mentioned to us that : once they have done a update over the Crop settings of one their Media Images, the image "disappear" from all WYSIWYG fields and that the image was referenced using entity embed .
We started our research and the image started to disappear becase the image derivates were clear by the crop module, Which is the correct behavior because a new image needs to generate in the next request , but the new set of derivate images were never generated by the next request of the page .
So , we started to take a more close look over the rendered html for the embed image and had this :
<img loading="lazy" srcset="/sites/default/files/styles/half_075x/public/photo/facebook-reunites-teacher-students-1.jpg?h=4d3fea13&amp;itok=d3x133Qo 337w, /sites/default/files/styles/half/public/photo/facebook-reunites-teacher-students-1.jpg?h=4d3fea13&amp;itok=jJnKvmr6 450w, /sites/default/files/styles/half_1_5x/public/photo/facebook-reunites-teacher-students-1.jpg?h=4d3fea13&amp;itok=q-YZ1eX2 675w, /sites/default/files/styles/half_2x/public/photo/facebook-reunites-teacher-students-1.jpg?h=4d3fea13&amp;itok=P_5Zrvee 900w" sizes="100vw" width="900" height="600" class="image" src="/sites/default/files/styles/half/public/photo/facebook-reunites-teacher-students-1.jpg?h=4d3fea13&itok=jJnKvmr6" alt="dfg" title="dfg">
As you can see over code snippet, all images are currently instead of printing the And (&) as symbol to concatenate the next query param is printing &
And then we check the browser console and we were getting a 404 response when trying to get the image from one of those URLS.
So, basically the images derivates are not being created/rendered because the image URL is not correct because it has & instead of & .
- Drupal 10.2.6
- Enable and configure cores responsive image styles
- Configure your image view mode to use the Responsive image style format
- Go and create a new node and embed your media image using the image style using the cores responsive image style
- Save the node
- You can simply go to your file folder and delete the derivate image for your image style or you can take the long route and install cron api + image_widget_crop and configure those and make them available for your style and the , set a new crop for your image
- Go To your node full display, and the image there shouldn't be rendering
- If you inspected page the HTML , you should see a "&" instead of "&" for concatenating the images query params .
Find a way to decode those html entities and make the system render the images again.
I'm providing a workaround over merge request , it is currently working for me .
Needs review
1.6
Code