Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
⚠️ Do not use. This is an anti-pattern! See https://github.com/ampproject/amphtml/issues/21912#issuecomment-617995565
<?php
/**
* AMP WebP Img Wrapper
*
* @package AMP_WebP_Img_Wrapper
* @author Weston Ruter, Google
* @link https://gist.github.com/westonruter/332abdb2adefc6b204ad6fcc1beecedf
* @license GPL-2.0-or-later
* @copyright 2019 Google Inc.
*
* @wordpress-plugin
* Plugin Name: AMP WebP Img Wrapper
* Plugin URI: https://gist.github.com/westonruter/332abdb2adefc6b204ad6fcc1beecedf
* Description: Wrap all generated amp-img elements with another amp-img that points to a WebP.
* Version: 0.1
* Author: Weston Ruter, Google
* Author URI: https://weston.ruter.net/
* License: GNU General Public License v2 (or later)
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Gist Plugin URI: https://gist.github.com/westonruter/332abdb2adefc6b204ad6fcc1beecedf
*/
namespace AMP_WebP_Img_Wrapper;
/**
* Filter sanitizers.
*
* @param array $sanitizers Sanitizers.
* @return array Sanitizers.
*/
function filter_sanitizers( $sanitizers ) {
require_once __DIR__ . '/class-sanitizer.php';
return array_merge(
$sanitizers,
[
__NAMESPACE__ . '\Sanitizer' => [],
]
);
}
add_filter( 'amp_content_sanitizers', __NAMESPACE__ . '\filter_sanitizers' );
<?php
/**
* Sanitizer
*
* @package AMP_WebP_Img_Wrapper
*/
namespace AMP_WebP_Img_Wrapper;
use AMP_Base_Sanitizer;
use DOMElement;
use DOMXPath;
/**
* Class Sanitizer
*/
class Sanitizer extends AMP_Base_Sanitizer {
/**
* Sanitize.
*/
public function sanitize() {
$xpath = new DOMXPath( $this->dom );
/**
* Element.
*
* @var DOMElement $amp_img
*/
foreach ( $xpath->query( '//amp-img' ) as $amp_img ) {
$src = $amp_img->getAttribute( 'src' );
$webp_src = $this->rewrite_webp_img_url( $src );
$srcset = $amp_img->getAttribute( 'srcset' );
$webp_srcset = $this->rewrite_webp_img_url( $srcset );
if ( $src !== $webp_src || $srcset !== $webp_srcset ) {
$webp_amp_img = $amp_img->cloneNode( false );
if ( $webp_src ) {
$webp_amp_img->setAttribute( 'src', $webp_src );
}
if ( $webp_srcset ) {
$webp_amp_img->setAttribute( 'srcset', $webp_srcset );
}
$amp_img->parentNode->replaceChild( $webp_amp_img, $amp_img );
$webp_amp_img->appendChild( $amp_img );
$amp_img->setAttribute( 'fallback', '' );
}
}
}
/**
* Rewrite non-WebP img URL to be WebP.
*
* @param string $src Image src for non-WebP image.
* @return string WebP image URL.
*/
private function rewrite_webp_img_url( $src ) {
return preg_replace(
'/(?<=\.)(jpg|jpeg|png|gif)(?=$|\?|,|\s)/',
'webp',
(string) $src
);
}
}
@westonruter

This comment has been minimized.

Copy link
Owner Author

@westonruter westonruter commented Apr 4, 2020

@mlim18

This comment has been minimized.

Copy link

@mlim18 mlim18 commented May 18, 2020

Hey Weston, I have installed this, but it seems to have broke the my logo in my header, which is now showing at a much smaller size... I think the fallback dimensions for it are off... I have deactivated and deleted the plugin, but it still looks like it is rewriting it to be WebP. Any thoughts or suggestions on how to fix this?

@westonruter

This comment has been minimized.

Copy link
Owner Author

@westonruter westonruter commented May 18, 2020

@mlim18 You probably have some template partials that are being cached in transients. Try deleting all transients or flushing your object cache if you have a persistent one.

@mlim18

This comment has been minimized.

Copy link

@mlim18 mlim18 commented May 18, 2020

I will try that out. Thanks!

@westonruter

This comment has been minimized.

Copy link
Owner Author

@westonruter westonruter commented Jun 2, 2020

Update: This is an anti-pattern which should not be used! See ampproject/amphtml#21912 (comment)

The amp-img docs that used it as an example has been removed: ampproject/amphtml#28655

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