Add data-* attributes to link with html elements

Question

When trying to add data-* attributes with HTML elements on a typolink, something in the parsing htmlspecialchars the whole link.

At first I thought that COA was the issue (which seems odd, since the code worked until now) and I switched to use TEXT elements and even tore down all my wraps in order to try and get control over what is rendered how but with no use. I also tried to replace it with a FLUIDTEMPLATE but it changes nothing.

With COA


lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject = COA
lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject {

    10 = TEXT
    10 {
        field = uid
        noTrimWrap = | data-gallery="ce|" data-toggle="lightbox"|
    }
    20 = COA
    20 {
        stdWrap.noTrimWrap = | data-footer="|"|

        10 = TEXT
        10 {
            data = file:current:publicUrl
            wrap = <a class='downloadlink' href='|' target='_blank'>Download</a>
            if.isFalse.field = tx_emboss_lightbox_hidedownload
            if.isTrue.data = file:current:publicUrl
        }

        20 = TEXT
        20 {
            data = file:current:description
            wrap = <p class='caption'>|</p>
            if.isFalse.field = tx_emboss_lightbox_hidecaption
            if.isTrue.data = file:current:description
        }

        30 = TEXT
        30 {
            data = file:current:creator
            wrap = <p class='author'>|</p>
            if.isFalse.field = tx_emboss_lightbox_hideauthor
            if.isTrue.data = file:current:creator
        }
    }
    30 = TEXT
    30 {
        data = file:current:title
        noTrimWrap = | data-title="|"|
        if.isTrue >
        if.isTrue.data = file:current:title
        if.isFalse.field = tx_emboss_lightbox_hidetitle
    }
    40 = TEXT
    40 {
        value = true
        noTrimWrap = | data-showcount="|"|
        if.isFalse.field = tx_emboss_lightbox_hideimagecount
    }
}

Without COA

lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject {

    10 = TEXT
    10 {
        field = uid
        noTrimWrap = | data-gallery="ce|" data-toggle="lightbox" |
    }

    11 = TEXT
    11.value = data-footer="

    12 = TEXT
    12 {
        data = file:current:publicUrl
        wrap = <a class='downloadlink' href='|' target='_blank'>Download</a>
        if.isFalse.field = tx_emboss_lightbox_hidedownload
        if.isTrue.data = file:current:publicUrl
    }

    13 = TEXT
    13 {
        data = file:current:description
        wrap = <p class='caption'>|</p>
        if.isFalse.field = tx_emboss_lightbox_hidecaption
        if.isTrue.data = file:current:description
    }

    14 = TEXT
    14 {
        data = file:current:creator
        wrap = <p class='author'>|</p>
        if.isFalse.field = tx_emboss_lightbox_hideauthor
        if.isTrue.data = file:current:creator
    }

    15 = TEXT
    15.value = "

    30 = TEXT
    30 {
        data = file:current:title
        noTrimWrap = | data-title="|"|
        if.isTrue >
        if.isTrue.data = file:current:title
        if.isFalse.field = tx_emboss_lightbox_hidetitle
    }
    40 = TEXT
    40 {
        value = true
        noTrimWrap = | data-showcount="|"|
        if.isFalse.field = tx_emboss_lightbox_hideimagecount
    }
}

With FLUIDTEMPLATE

lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject = FLUIDTEMPLATE
lib.contentElement.settings.media.popup.linkParams.ATagParams.postCObject {
    file = EXT:emboss_lightbox/Resources/Private/Standalone/GalleryImage.html
    dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
    dataProcessing.10 {
        # the field name where relations are set
        # + stdWrap
        files.data = file:current:uid

        # The target variable to be handed to the ContentObject again, can be used
        # in Fluid e.g. to iterate over the objects. defaults to "files" when not defined
        # + stdWrap
        as = images
    }
}

Fluid

<f:spaceless>data-gallery="ce{field:uid}" data-toggle="lightbox" data-footer="<f:if condition="{data.tx_emboss_lightbox_hidedownload} != true"><f:if condition="{images.0.publicUrl}"><a href='{images.0.publicUrl}' target='_blank'>Download</a></f:if></f:if><f:if condition="{data.tx_emboss_lightbox_hidecaption} != true"><f:if condition="{images.0.description}"><p class='caption'>{images.0.description}</p></f:if></f:if><f:if condition="{data.tx_emboss_lightbox_hideauthor} != true"><f:if condition="{images.0.creator}"><p class='author'>{images.0.creator}</p></f:if></f:if>" data-title="{images.0.title}" data-showcount="true"</f:spaceless>

Fluid(readable) This version put me off, since all my newlines turned into <p>&nbps;</p>


    <f:spaceless>
        data-gallery="ce{field:uid}" data-toggle="lightbox" data-footer="
        <f:if condition="{data.tx_emboss_lightbox_hidedownload} != true">
            <f:if condition="{images.0.publicUrl}">
                <a href='{images.0.publicUrl}' target='_blank'>Download</a>
            </f:if>
        </f:if>
        <f:if condition="{data.tx_emboss_lightbox_hidecaption} != true">
            <f:if condition="{images.0.description}">
                <p class='caption'>{images.0.description}</p>
            </f:if>
        </f:if>
        <f:if condition="{data.tx_emboss_lightbox_hideauthor} != true">
            <f:if condition="{images.0.creator}">
                <p class='author'>{images.0.creator}</p>
            </f:if>
        </f:if>" data-title="{images.0.title}" data-showcount="true"</f:spaceless>

The expected output would be something like this:

    <a href="link to image" title="image title" data-gallery="cexyz" data-toggle="lightbox" data-footer="<a href='path to publicUrl'>Download</a><p class='caption'>Some description with possible html in it too</p><p class='author'>Some author</p>" data-title="image title" data-showcount="true"><img src="Someimage.jpg"></a>

Instead I get this:

    &lt;a href=&quot;link to image&quot; title=&quot;image title&quot; data-gallery=&quot;cexyz&quot; data-toggle=&quot;lightbox&quot; data-footer=&quot;&lt;a href='path to publicUrl'&gt;Download&lt;/a&gt;&lt;p class='caption'&gt;Some description with possible html in it too&lt;/p&gt;&lt;p class='author'&gt;Some author&lt;/p&gt;&quot; data-title=&quot;image title&quot; data-showcount=&quot;true&quot;&gt;<img src="Someimage.jpg">&lt;/a&gt;

Did you try to use inline f:if for setting values into tag attributes? — Thomas Löffler
I don't see how this would be helping. The editors add an image in the RTE and then link it with some attribute so we know we have to wrap it. I can't expect the editors to set data-* Tags themselves, especially when I can all information from the wrapped image :-/ EDIT: I've just seen that my online fluid was not displayed right, I fixed it now, I hope this is clearer. — CDRO

Bernd Wilke πφ Bernd Wilke πφ · Accepted Answer · 2019-08-09T05:19:52

As you show at the end your problem are not the data attributes but the whole link. that part is not covered with your code you included. I assume you just need a <f:format.raw> tag around your link.

Maybe even your whole CE is affected and you didn't noticed yet as there were no other special characters in the text.

Add data-* attributes to link with html elements

1 Answers