How to make the click to enlarge work

[allanmontix]

Question
Hello,

When checking the "Click to enlarge" box the img HTML is rendered with the following attributes:

• data-alt-override="true"
• data-htmlarea-file-table="sys_file"
• data-htmlarea-file-uid="[number]"
• data-htmlarea-zoom="true"
• data-title-override="true"

Unfortunately the image won't open in an lightbox / popup.
Adding the styles.content.textmedia.linkWrap.lightboxEnabled = 1 to the root constants doesn't seem to help.

Is there anything else to add to make this work?

Environment

• TYPO3 version: 11.5.33
• PHP version: 8.1.26
• Extension version: 11.0.11

Documentation
Have you checked the readme/documentation?

• Yes, but I couldn't find anything helpful

[jonaseberle]

Hi @allanmontix, you'll have to implement a lightbox yourself in TYPO3.

See https://stackoverflow.com/questions/55915638/how-to-do-an-integration-of-a-lightbox-in-typo3

Is your problem specific to images in the RTE? Does it work for you in plain fluid_styled_content elements?

[allanmontix]

Hello @jonaseberle

Yes the problem is specific for images in RTE. There's a lightbox plugin present for the enlarge to click option in textmedia elements and thats working.

But those are working with different HTML:

<a href="[link to bigger image]" class="jnlightbox" rel="lightbox[lb27554]" data-lightbox="lightbox-27554">                        
<img class="image-embed-item img-responsive" src="[link to small image]" width="200" height="200" loading="lazy" alt=""></a>

The HTML generated in RTE by this plugin is only the img tag:

<img data-alt-override="true" data-htmlarea-file-table="sys_file" data-htmlarea-file-uid="23787" data-htmlarea-zoom="true" data-title-override="true" src="[link to small image]" width="250" height="332">

The settings in the stackoverflow link you gave where already enabled

[jonaseberle]

I see. Sorry, I haven't checked myself before. I have the same output in v10 and v11.

It seems you have to react to the data-htmlarea-zoom property.

[DanYouCan]

I can confirm with TYPO3 V12.4.9 PHP8.2, that even if you have a lightbox installed and configured, TYPO3 dosen't render the image with an a-tag on the frontend. Also lazy loading is missing.

The RTE source is:
<img src="/fileadmin/dateien/bilder/beispiele/Chrysanthemum.jpg" data-htmlarea-file-uid="3" data-htmlarea-file-table="sys_file" width="300" height="225" title="Ein Testbild" alt="Testbild" data-title-override="true" data-alt-override="true" data-htmlarea-zoom="true">

The rendered frontend HTML is:
<img src="/fileadmin/dateien/bilder/beispiele/Chrysanthemum.jpg" data-htmlarea-file-uid="3" data-htmlarea-file-table="sys_file" width="300" height="225" title="Ein Testbild" alt="Testbild" data-title-override="true" data-alt-override="true" data-htmlarea-zoom="true" style="">

[the-andyman]

I have the same problems.
Tested on TYPO3 CMS 12.4.13 with PHP Version 8.2.17 and rte_ckeditor_image version 12.0.1. Also tested with PHP 8.3.4. Imagelightbox and click enlarge is working fine with normal images.

Images from RTE get rendered in frontend like this::
<img class="img-fluid" src="/fileadmin/images/2024-test-image.jpg" data-htmlarea-file-uid="62" data-htmlarea-file-table="sys_file" width="824" height="527" title="" alt="test image" data-title-override="true" data-alt-override="true" data-htmlarea-zoom="true" style="">

The links are missing and don't get rendered.

[pixelbreit]

After updating to TYPO3 12.4.14 and updating the rte_ckeditor_image extension to version 12.0.1, all links in my images have disappeared. I also tried the latest version from the repository.
With TYPO3 10 LTS and the extension version 10.2.5 everything still worked.
I have been using the otherwise great extension for a long time and always without any problems.

What could be the problem with the disappeared links in the images?
Perhaps this is related to the switch to CKEditor 5?
Does anyone have a solution to the problem?

[DanYouCan]

Is there a fix or workaround to get back the click enlarge function? Thanks in advance for some information on the state.

[pixelbreit]

If I insert the following Typoscript code into my setup file, the Imagelightbox and clickenlage works with the images in the RTE.

lib.parseFunc_RTE {
	tags.img = TEXT
	tags.img {
		current = 1
		preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingController->renderImageAttributes
	}
	tags.a = TEXT
	tags.a {
		current = 1
		preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageLinkRenderingController->renderImages
	}
	nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
		class.default = img-fluid
		allparams.unset = 1
		data-htmlarea-file-uid.unset = 1
		data-htmlarea-file-table.unset = 1
		data-htmlarea-zoom.unset = 1
		data-htmlarea-clickenlarge.unset = 1
		data-title-override.unset = 1
		data-alt-override.unset = 1
	}
}
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList := addToList(img)
```
Maybe this works for you too.

[DanYouCan]

If I insert the following Typoscript code into my setup file, the Imagelightbox and clickenlage works with the images in the RTE.

lib.parseFunc_RTE {
	tags.img = TEXT
	tags.img {
		current = 1
		preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageRenderingController->renderImageAttributes
	}
	tags.a = TEXT
	tags.a {
		current = 1
		preUserFunc = Netresearch\RteCKEditorImage\Controller\ImageLinkRenderingController->renderImages
	}
	nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
		class.default = img-fluid
		allparams.unset = 1
		data-htmlarea-file-uid.unset = 1
		data-htmlarea-file-table.unset = 1
		data-htmlarea-zoom.unset = 1
		data-htmlarea-clickenlarge.unset = 1
		data-title-override.unset = 1
		data-alt-override.unset = 1
	}
}
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList := addToList(img)

Maybe this works for you too.

Thank you pixelbreit for your code snipped. This works like a charm.