Skip to content

Instantly share code, notes, and snippets.

@westonruter
Last active May 18, 2022 19:30
Show Gist options
  • Save westonruter/8db0c662b68bba2e1bb980d41cf81636 to your computer and use it in GitHub Desktop.
Save westonruter/8db0c662b68bba2e1bb980d41cf81636 to your computer and use it in GitHub Desktop.
<?php
/**
* AMP Flickity Converter plugin initialization file.
*
* @package AMP_Flickity_Converter
* @author Weston Ruter, Google
* @link https://gist.github.com/westonruter/8db0c662b68bba2e1bb980d41cf81636
* @license GPL-2.0-or-later
* @copyright 2020 Google Inc.
*
* @wordpress-plugin
* Plugin Name: AMP Flickity Converter
* Plugin URI: https://gist.github.com/westonruter/8db0c662b68bba2e1bb980d41cf81636
* Description: Automatically convert markup intended for Flickity to amp-carousel.
* 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/8db0c662b68bba2e1bb980d41cf81636
*/
namespace AMP_Flickity_Converter;
add_filter(
'amp_content_sanitizers',
function ( $sanitizers ) {
require_once __DIR__ . '/class-sanitizer.php';
// Merge so it runs before the image sanitizer.
return array_merge(
[ __NAMESPACE__ . '\Sanitizer' => [] ],
$sanitizers
);
}
);
<?php
/**
* AMP Flickity Converter plugin initialization file.
*
* @package AMP_Flickity_Converter
*/
namespace AMP_Flickity_Converter;
use AMP_Base_Sanitizer;
use DOMElement;
/**
* Sanitizer that converts Flickity to amp-carousel.
*/
class Sanitizer extends AMP_Base_Sanitizer {
/**
* Sanitize.
*/
public function sanitize() {
foreach ( $this->dom->xpath->query( '//div[ @data-flickity ]' ) as $element ) {
$this->convert_element( $element );
}
}
/**
* Convert element.
*
* @param DOMElement $element Element.
*/
public function convert_element( DOMElement $element ) {
$config = json_decode( $element->getAttribute( 'data-flickity' ), true );
$height = 400;
if ( preg_match( '/height:(\d+)px/', $element->getAttribute( 'style' ), $matches ) ) {
$height = (int) $matches[1];
}
// Code specific to CoBlocks Carousel Gallery.
$has_lightbox = false !== strpos( $element->parentNode->getAttribute( 'class' ), 'has-lightbox' );
$amp_carousel = $this->dom->createElement( 'amp-carousel' );
$amp_carousel->setAttribute( 'layout', 'fixed-height' );
$amp_carousel->setAttribute( 'height', (string) $height );
// @todo More of the $config should be copied.
$amp_carousel->setAttribute( 'loop', '' );
if ( ! empty( $config['autoPlay'] ) ) {
$amp_carousel->setAttribute( 'autoplay', '' );
$amp_carousel->setAttribute( 'delay', (string) $config['autoPlay'] );
}
// @todo Are all of these appropriate?
$amp_carousel->setAttribute( 'class', $element->getAttribute( 'class' ) );
$items = $this->dom->xpath->query( './div[ contains( @class, "coblocks-gallery--item" ) ]', $element );
/**
* Item.
*
* @var DOMElement $item
*/
foreach ( $items as $item ) {
$item->setAttribute( 'style', "height:{$height}px" );
$img = $item->getElementsByTagName( 'img' )->item( 0 );
if ( $img ) {
$img->setAttribute( 'layout', 'fill' );
$img->setAttribute( 'object-fit', 'cover' );
if ( $has_lightbox ) {
$img->setAttribute( 'lightbox', '' );
}
}
$amp_carousel->appendChild( $item );
}
$element->parentNode->replaceChild( $amp_carousel, $element );
}
}
@westonruter
Copy link
Author

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