No processed files are generated (backend and frontend)

[bigahuna]

Bug description

If an image is added inside the backend editor, after saving the element, the generated html looks like this:

CKEditor <img class="" src="/fileadmin/user_upload/myorgimage.jpg" data-htmlarea-file-uid="126" data-htmlarea-file-table="sys_file" width="500" height="312" title="" alt="" data-title-override="true" data-alt-override="true">

But from my understanding, the src-attribute should be something like this instead: src="/fileadmin/_processed_/7/c/csm_myorgimage_21d544ce31.jpg"

Because the src is not a link to a processed image, the rendering in the frontend does not use a processed image either. The same content rendered in the frontend looks like this:

Frontend <img class="" src="/fileadmin/user_upload/Bilder_Banner/About_1_6x1_1MB.jpg" data-htmlarea-file-uid="126" data-htmlarea-file-table="sys_file" width="500" height="312" title="" alt="" data-title-override="true" data-alt-override="true" style="">

In netresearch/rte-ckeditor-image/Classes/Controller/ImageRenderingController.php in line 81 there is the following condition

if ($imageSource !== $systemImage->getPublicUrl()) {}

Because $imageSource and $systemImage->getPublicUrl() are both /fileadmin/user_upload/myorgimage.jpg, we will never get a processed image here.

We took a look into netresearch/rte-ckeditor-image/Resources/Public/JavaScript/Plugins/typo3image.js and found this code

$.extend(filteredAttr, {
    src: urlToRelative(getImg.url),
    width: getImg.processed.width || getImg.width,
    height: getImg.processed.height || getImg.height,
    fileUid: img.uid,
    fileTable: table
});

If we change src: urlToRelative(getImg.url), to src: urlToRelative(getImg.processed.url),, at least the image will be saved as a processed file (getImg.processed contains all the data of the correct processed file) in the Ckeditor. I do not know what other side effects this will trigger... This also creates a processed file in the frontend.

Steps to reproduce To reproduce the problem:

• add a image inside the backend editor, set an individual size (smaller then the original) and save
• look at the generated source code inside the editor and check if the image path links to a fileadmin/_processed image or to the original, not processed file
• open the same page in the frontend and look at the path of the image and check if it links to a fileadmin/_processed image

Expected behavior If a image is added in the Ckeditor and an individual size (smaller then the original) is set, the image should be processed and an image with the new size should be created inside fileadmin/_processed

Environment

• TYPO3 version: v12.4.14
• PHP version: php 8.1, php 8.2, php 8.3
• Extension version: v12.0.1

Documentation Have you checked the readme/documentation?

• [X ] Yes, but I couldn't find anything helpful

[bigahuna]

To make sure that it is not some configuration issue on the first site, we updated another project to TYPO3 v12 and there is the same behaviour. Images inserted in the Ckeditor are not processed. There are links to the original file with some attributes. This was working without any issues with TYPO3 v11 but it is not working after an update to TYPO3 v12.

Frontend <img class="" src="/fileadmin/user_upload/myimage.png" data-htmlarea-file-uid="434" data-htmlarea-file-table="sys_file" width="500" height="454" title="" alt="" data-title-override="true" data-alt-override="true" style="">

Backend (source of Ckeditor) <img class="" src="/fileadmin/user_upload/myimage.png" data-htmlarea-file-uid="434" data-htmlarea-file-table="sys_file" width="500" height="454" title="" alt="" data-title-override="true" data-alt-override="true">

Is there anything to consider regarding configuration outside of the official documentation here https://github.com/netresearch/t3x-rte_ckeditor_image ?

Regards, Mike

[bigahuna]

Hey all,

I'm just looking for any feedback if the described behaviour is normal or not. I updated 4 sites to TYPO3 v12 and none of them is working as expected. If I'm the only one that does not get processed files anymore, I know that I have to keep on searching our side. Any reaction at all would be appreciated.

Regards Mike

[CybotTM]

Hi @bigahuna,

thanks for your report, we are lagging resources currently. We will look into this ASAP. Sorry for the delay.

[Gitsko]

Hi @bigahuna, I can confirm that no processed files are used in the FE and backend, unfortunately I could not find out the exact reason.

[bigahuna]

Thanks for looking into this. I will try to help and also search for the reason.

One more thing to take into consideration for existing image relations: Lets say you have a large site with i.e. 20.000 files inside fileadmin/_processed and during or after the update to TYPO3 v12 you delete the temporary files in fileadmin/_processed with the Maintenance Tool ("Remove Temporary Assets"). After this, none of the rte_ckeditor_image - images will be recreated. So after such a routine maintenance task you end up with thousands of missing relations to fileadmin/_processed/ and the only thing you can do is to restore the _processed folder from a backup to get the old relations back.

This does not happen if you add new relations after the update, because the new relations do not generate processed files but point to the original files instead.

Regards and thanks for your work!! Mike

[bigahuna]

I created a draft that fixes at least the processing in the frontend. As far as I can see it is no problem if there are no processed files linked in the CKeditor. But because I'm not too deep into this extension, I need some expert reviews and input about optimizing stuff.

About the updates:

inside the ImageRenderingController (line 81) class is this check: if ($imageSource !== $systemImage->getPublicUrl()) {}

But both, $imageSource and $systemImage->getPublicUrl() always contain links to the original file (fileadmin/user_upload/...) and never to the processed one, even if there is a processed file. I do not know if this changed with TYPO3 v12 or if there is something else I'm missing.

With the update we can delete files inside fileadmin/_processed_ and they will always be recreated with the next frontend page load. Also if we change width or height inside the CKeditor, there will be a new file created in fileadmin/_processed_. If we change the width and height back, the previous file will be used without any recreation.

The update can be found here: https://github.com/bigahuna/t3x-rte_ckeditor_image/tree/No-processed-files-are-generated

Should I create a PR or is it to early for this and I better wait for feedback?

Thanks and sorry if I write too much or if I commit bad code...

Regards and have a nice weekend! Mike

[Gitsko]

Hi @bigahuna , thank you very much for your commitment and for finding a solution. Please create a PR so that we can test the whole thing better.