AMP: Funzione php per convertire tag html e immagini nel corrispettivo formato AMP

In questa guida utile di oggi vi propongo una comoda funzione php per convertire img e tag html nei corrispettivi tag per AMP

Che cos’è AMP?

Per chi non lo conoscesse AMP è la denominazione acronimo di Accelerated Mobile Pages. E’ un progetto nato in forza a Google e si pone l’obbiettivo di migliorare l’esperienza di navigazione – in un primo periodo solo prettamente editoriale – in ambito mobile.

Di fatto grazie a una serie di accorgimenti l’utente – passando da google – atterra su una pagina “ad hoc” creata per amp che viene passata direttamente dalla velocissima cache di Google. Tutto questo si va a sommare alla famosa “corsa al mobile” intrapresa ormai da tutti i progetti web editoriali e non.

Problema

Tornando all’articolo in questione, come saprete amp necessita di una struttura tag diversa da quella html per il rendering – ad esempio – delle immagini. Se per esempio in html abbiamo il tag <img> in amp quest’ultimo diventa: <amp-img></amp-img>. Come fare – dato un testo preso da un editor qualsiasi (CKeditor, WordPress, TinyMce etc) a cambiare automaticamente il tag?

Soluzione

Ecco una comoda funzione che di fatto:

• Sostituisce i tag html con le relativi controparti AMP
• Mantiene eventuali classi o id
• Fa lo strip dello stile inline di quasiasi elemento html (lo stile inline invalida amp)
• Permette di personalizzare i tag in whitelist da non filtrare

          function TrgAmp($html){
               //Custom DEV @Riccardo Mel 
               //Crea tag di apertura amp-img e sostituisci il corrispondente tag NON AMP
               $html = str_ireplace(
                    ['<img','<video','/video>','<audio','/audio>'],
                    ['<amp-img','<amp-video','/amp-video>','<amp-audio','/amp-audio>'],
                    $html
                );

                # Crea il tag di chiusura amp-img
                $html = preg_replace('/<amp-img(.*?)>/', '<amp-img layout="responsive" width="300" height="250" $1></amp-img>', $html);           
                
                # Whitelist tag - filtro iframe, embed script etc
                $html = strip_tags($html,'<h1><h2><h3><h4><h5><h6><a><p><ul><ol><li><blockquote><q><cite><ins><del><strong><em><code><pre><svg><table><thead><tbody><tfoot><th><tr><td><dl><dt><dd><article><section><header><footer><aside><figure><time><abbr><div><span><hr><small><br><amp-img><amp-audio><amp-video><amp-ad><amp-anim><amp-carousel><amp-fit-rext><amp-image-lightbox><amp-instagram><amp-lightbox><amp-twitter><amp-youtube>');
                
                //Elimino stile inline a paragrafi, intestazioni e immagini
                return preg_replace('/(<[^>]+) style=".*?"/i', '$1', $html);
            }//Function

          echo TrgAmp($html); // Per richiamare la funzione

Approfondimenti e link utili

1. Documentazione ufficiale amp
2. Tester online ufficiale per validazione amp
3. Documentazione tag amp image

Questo articolo ti è stato utile? Condividilo!