TYPO3 RTE convert <img> to <amp-img>

Question

I have a TYPO3 version 6.2 website and I am working on a AMP version.

I use a condition in URL to load different versions of the same TYPO3 page depending if the page version request is AMP or not.

Regular version of the page :

https://www.novethic.fr/actualite/environnement/climat/isr-rse/rencontre-avec-danone-un-des-rares-francais-a-aligner-sa-strategie-sur-l-objectif-2-c-145150.html

AMP version of the page

https://www.novethic.fr/amp/actualite/environnement/climat/isr-rse/rencontre-avec-danone-un-des-rares-francais-a-aligner-sa-strategie-sur-l-objectif-2-c-145150.html

Everything works fine except if my page contains image inserted in the RTE

In this case I would need to convert <img> to <amp-img>for images inserted in the RTE when the version asked is AMP.

I already have a global var condition to load custom TS when AMP version is called.

But no idea how to convert <img> to <amp-img> Any idea on how to achieve that?

Answer 1

if it is only a replacement of the tag name you could try to use a (conditioned) string replacement on one of these levels:

• the whole page.
  you could do a stdWrap.replacement, but that might not work on cached content

• the page content in fluid.
  just use a viewhelper to replace text of rendered content. that even could be a typoscript VH:
  (<f:cObject typoscriptObjectPath="lib.img2ampimg">{content}</f:cObject>)

• the page content in typoscript.
  depending wether you render your content with TS you might add stdWrap.replacement there:

.

page { 
    10 = FLUIDTEMPLATE
    10 {
        :
        variables {
            content < styles.content.get
            :
        }
    }
}

[--your amp condition--]
    page.10.variables.content.stdWrap.replacement {
        1.search = <img
        2.replace = <amp-img
    }
[global]

Answer 2

Maybe this could be achieved with the extension "Content Replacer", https://extensions.typo3.org/extension/replacer

Answer 3

I've solved it as Bernd Wilke suggested , but directly in my fluid template :

<f:if condition="{f:cObject(typoscriptObjectPath:'lib.conditionamp')} == 1">
 <f:then>
    <v:format.replace substring="<img " replacement="<amp-img layout=\"responsive\"">
        <f:format.html>{article.corpsDeTexte}</f:format.html>
    </v:format.replace>
 </f:then>
 <f:else>
    <f:format.html>{article.corpsDeTexte}</f:format.html>
 </f:else>
</f:if>

Thanks again for your help :)