Images with links wrong rendering

[timofo]

Hello. I am using TYPO3 10.4.12 and rte_ckeditor_image 10.1.0.
When i insert an image with a link on the image, the frontend rendering is wrong.
without link:

<p class="text-center">
    <img src="/fileadmin/_processed_/9/4/xxx.png" width="300" height="180">
</p>

with link:

<p class="text-center">
    <a href="https://www.domain.de" target="_blank" rel="noreferrer"></a>
</p>
<p>
    <a href="https://www.domain.de" target="_blank" rel="noreferrer">
        <img src="/fileadmin/_processed_/9/4/xxx.png" width="300" height="180">
    </a>
</p>

The link is rendered 2 times. 1 time without any content and the second time with the image in it. But without the class text-center.
The source code in RTE looks good:

<p class="text-center">
    <a href="https://www.domain.de" target="_blank">
        <img alt="" data-htmlarea-file-table="sys_file" data-htmlarea-file-uid="90" height="180" src="http://www.domain.de/fileadmin/_processed_/9/4/xxx.png" title="" width="300" />
    </a>
</p>

[timofo]

Sorry but this problem is not solved.

For this in editor:

<p class="text-center">
    <a href="t3://page?uid=1">
        <img alt="" data-alt-override="true" data-htmlarea-file-table="sys_file" data-htmlarea-file-uid="103" data-title-override="true" height="89" src="xyz.png" title="" width="90" />
    </a>
</p>

You get as output:

<p class="text-center">
    <a href="/"></a>
</p>
<p>
    <a href="/"><img src="xyz.png" width="90" height="89"></a>
</p>
<p></p>

1 paragraph with an empty link
1 paragraph with correct link but without class text-centrer
1 total empty paragraph

I have used the latest code from github master.
Have you tested this? Or i am doing something wrong?

[Abdull]

I agree with @timofo. Using current dev-master, this issue is not fixed yet.

Please reopen this issue.

Our TYPO3 system experiences the same "double-link" rendering when migrating from TYPO3 9 to TYPO3 10, causing problems with CSS rendering (double margins because of double <p>).

Current workaround is to deactivate the t3x-rte_ckeditor_image extension.

[nitori]

It seems an additional paragraph is rendered inside the link of the image.
Which causes issues if the whole thing is already inside a paragraph.

The actual source code output seems to be something along the line of:

<p>
    <a href="...">
        <p>
            <img src="...."/>
        </p>
    </a>
</p>

Since <p> nested inside of <p> is not allowed by HTML standard, the Browser is showing it in the Dev Tools in the Elements browser as three separate paragraphs:

<p>
    <a href="..."></a>
</p>
<p>
    <a href="...">
            <img src="...."/>
    </a>
</p>
<p></p>

Edit:
I found a workaround:

lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList := addToList(img)

By adding img tag to the list of encapsTagList, basically having the parseFunc pretend img tags are wrapping tags, it's not adding an additional wrapper around the image.

Not sure if this is the correct approach, seems wrong to me.

[Abdull]

(sorry for reposting the following - initially, I commented it in the wrong issue #119, now it is in the correct issue #112)

@vellip 's merge request vellip@097735a (i.e., changing lib.parseFunc to lib.parseFunc_RTE) fixed this issue for us.

That merge request got merged, but a day later it got reverted.

@mcmulman , is there a reason you reverted it?

Otherwise it would be great to change lib.parseFunc to lib.parseFunc_RTE again.

As a workaround, require the specific commit before aforementioned revert commit (see https://github.com/netresearch/t3x-rte_ckeditor_image/commits/master ):

"netresearch/rte-ckeditor-image": "dev-master#58e8b6ac7b603551864b40b217e6f56a0e5b24ca",

The problem then just is: click on image on enlarge does not work anymore!

[timofo]

"The problem then just is: click on image on enlarge does not work anymore!"
I think this is not a problem. If i click on an image with a link on it, i expect to follow the link OR a larger version of the image! You can't have both. :-) It's normal behavior.

[mcmulman]

@Abdull @vellip
Changing lib.parseFunc to lib.parseFunc_RTE just disables the frontend image parser in my test case.
So it returns the image with all it's backend attributes.
That's not what we want.

Do you have other experiences?

The problem comes from TYPO3 content parser itself which recently returns all content with surrounding p tags.
I couldn't find a simple solution so far.

[mcmulman]

Two solutions:

1. Disable image wrapper:
   lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList := addToList(img)
   But this needs to be added manually to TS Setup as WIP: [BUGFIX] #112: Remove wrapping p-tag from images via TS #129 doesn't work
2. Remove wrapper via PHP parser: [BUGFIX] #112: Remove wrapping p-tag from images #130

[timofo]

Solution 1 with:
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList := addToList(img)
in my sitepackage works fine.
So we have to add this in future on our own?

[wtfred]

Hello there, sorry to up a closed issue but i ran into this after migrating to TYPO3 10.4 and upgrading rte_ckeditor_images to 10.1.0

None of the fix listed here is working for me.

• solution 1 with lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList := addToList(img) is not working
• solution 2 with "Remove wrapper via PHP parser" is not working
• combination of both is not working
• using dev-master is not working as it seems not to be compatible with TYPO3 10.4 (something about missing class TypolinkSoftReferenceParser)

Only things that works is to replace lib.parseFunc by lib.parseFunc_RTE in Configuration/Typoscript/ImageRendering/setup.txt but as already pointed "it returns the image with all it's backend attributes, That's not what we want."

What can i do to get my links back on TYPO3 10.4?
If the fix is already somewhere on the repository, could you point me the commit i need to use? (and maybe you could tag a release 10.1.1 with the fix?)
If not, what could i do?

Thanks!

[Abdull]

...
As a workaround, require the specific commit before aforementioned revert commit (see https://github.com/netresearch/t3x-rte_ckeditor_image/commits/master ):

"netresearch/rte-ckeditor-image": "dev-master#58e8b6ac7b603551864b40b217e6f56a0e5b24ca",

The problem then just is: click on image on enlarge does not work anymore!

Due to an odd design choice by Composer (1, 2) my previously suggested workaround of using "netresearch/rte-ckeditor-image": "dev-master#58e8b6ac7b603551864b40b217e6f56a0e5b24ca" does not work as of now for TYPO3 10.x installations, as rte-ckeditor-image's master branch has recently removed TYPO3 10 support.

My new workaround is to use "netresearch/rte-ckeditor-image": "dev-issue-112_remove-wrapping-p-tag", as that branch still allows TYPO3 10, at least at the moment of this writing.

[wtfred]

@CybotTM

Imo, regex should be updated:

t3x-rte_ckeditor_image/Classes/Controller/ImageLinkRenderingController.php

Line 72 in ef9164e

$imgSearchPattern = '/<p\><img(?=.*src).*?\/><\/p>/';

To:
$imgSearchPattern = '/<p\>.*<img(?=.*src).*?\/>.*<\/p>/';

Else it does not fix links for contents like <p>My text <img src="xxxx" /></p> or <p><img src="xxxx" /> My text</p>

[Gitsko]

The problem should be fixed with version 11.0.14.