Skip to content

Instantly share code, notes, and snippets.

@adactio adactio/ampify.php
Last active Oct 15, 2019

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

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

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

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

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

commented Apr 29, 2017

How it works ?.

@savankaneriya

This comment has been minimized.

Copy link

commented Apr 2, 2018

thanks , it helped alot .

@rahulkhosla

This comment has been minimized.

Copy link

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

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
You can’t perform that action at this time.