Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make a chunk of markup AMP-ready
<?php
# Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
# http://creativecommons.org/publicdomain/zero/1.0/
function ampify($html='') {
# Replace img, audio, and video elements with amp custom elements
$html = str_ireplace(
['<img','<video','/video>','<audio','/audio>'],
['<amp-img','<amp-video','/amp-video>','<amp-audio','/amp-audio>'],
$html
);
# Add closing tags to amp-img custom element
$html = preg_replace('/<amp-img(.*?)>/', '<amp-img$1></amp-img>',$html);
# Whitelist of HTML tags allowed by AMP
$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>');
return $html;
}
?>
@firejune

This comment has been minimized.

Copy link

@firejune firejune commented Jun 21, 2016

Fixing self close images.

$html = preg_replace('/<amp-img(.*?)\/?>/', '<amp-img$1></amp-img>',$html);
@thomsnicol

This comment has been minimized.

Copy link

@thomsnicol thomsnicol commented Aug 29, 2016

Hi,

I'm tyring to implement this script in wordpress but some how this is not working in my theme, i have placed in my media.php file also i tried to use in function.php but did not work either. could you help me to give bit information that how to can i implement?

Thanks
thoms

@qamaruldinhamza

This comment has been minimized.

Copy link

@qamaruldinhamza qamaruldinhamza commented Mar 22, 2017

I also want to do same task in wordpress, can anyone help, please?

@laocoi

This comment has been minimized.

Copy link

@laocoi laocoi commented Apr 11, 2017

I have a problem with add width and height value for image on AMP. Can anyone please tell me how to do it?

Old code:

<img src="/url-img1.jpg" with="728"></img>
<img src="/url-img2.jpg" with="640"></img>

And in AMP version:

<amp-img src="/url-img1.jpg" width="{widht-of-image}" height="{height-of-image}" layout="responsive"></amp-img>
<amp-img src="/url-img2.jpg" width="{widht-of-image}" height="{height-of-image}" layout="responsive"></amp-img>
@dimaslanjaka

This comment has been minimized.

Copy link

@dimaslanjaka dimaslanjaka commented Apr 29, 2017

How it works ?.

@savankaneriya

This comment has been minimized.

Copy link

@savankaneriya savankaneriya commented Apr 2, 2018

thanks , it helped alot .

@rahulkhosla

This comment has been minimized.

Copy link

@rahulkhosla rahulkhosla commented Apr 21, 2018

I Googled' it and found this for anyone wanting to use it for WordPress.

Nice job Adactio, seems like you got the credit too!

@Stefany93

This comment has been minimized.

Copy link

@Stefany93 Stefany93 commented Jul 26, 2018

^^ Is there a node.js equivalent to this? I need it for my Gruntfile. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment