Work around sanitizer corrupting post thumbnail img; add thumbnail ex…

…ists check
xwp · Jan 30, 2018 · d26f628 · d26f628
1 parent 518c1f8
commit d26f628
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 24 deletions.
diff --git a/inc/template-tags.php b/inc/template-tags.php
@@ -124,3 +124,20 @@ function ampconf_branding_tag() {
 		echo esc_html( ( is_front_page() && is_home() ) ? 'h1' : 'p' );
 	}
 endif;
+
+/**
+ * Get the post thumbnail for AMP.
+ *
+ * There is a problem with the AMP sanitizer that is not properly converting img into amp-img,
+ * so this is a workaround to preempt the sanitizer.
+ *
+ * @see the_post_thumbnail()
+ *
+ * @param string|array $size Optional. Image size to use. Accepts any valid image size, or
+ *                           an array of width and height values in pixels (in that order).
+ *                           Default 'post-thumbnail'.
+ * @param string|array $attr Optional. Query string or array of attributes. Default empty.
+ */
+function ampconf_the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) {
+	echo str_replace( '<img ', '<amp-img ', get_the_post_thumbnail( null, $size, $attr ) ) . '</amp-img>'; // WPCS: xss ok.
+}
diff --git a/templates/entry/default.php b/templates/entry/default.php
@@ -7,11 +7,13 @@
 
 ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>>
-	<figure class="entry__thumbnail">
-		<a href="<?php the_permalink(); ?>">
-			<?php the_post_thumbnail( 'ampconf-335x225' ); ?>
-		</a>
-	</figure><!-- .entry__thumbnail -->
+	<?php if ( has_post_thumbnail() ) : ?>
+		<figure class="entry__thumbnail">
+			<a href="<?php the_permalink(); ?>">
+				<?php ampconf_the_post_thumbnail( 'ampconf-335x225' ); ?>
+			</a>
+		</figure><!-- .entry__thumbnail -->
+	<?php endif; ?>
 
 	<header class="entry__header">
 		<?php get_template_part( 'templates/entry/meta/date' ); ?>

diff --git a/templates/entry/featured.php b/templates/entry/featured.php
@@ -7,15 +7,16 @@
 
 ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class( 'entry entry--featured' ); ?>>
-	<figure class="entry__thumbnail">
-		<a href="<?php the_permalink(); ?>">
-			<?php the_post_thumbnail( 'ampconf-375x225' ); ?>
-			<?php the_post_thumbnail( 'ampconf-1040x400' ); ?>
-		</a>
-	</figure><!-- .entry__thumbnail -->
+	<?php if ( has_post_thumbnail() ) : ?>
+		<figure class="entry__thumbnail">
+			<a href="<?php the_permalink(); ?>">
+				<?php ampconf_the_post_thumbnail( 'ampconf-1040x400' ); ?>
+			</a>
+		</figure><!-- .entry__thumbnail -->
+	<?php endif; ?>
 
 	<header class="entry__header">
-		<?php get_template_part( 'templates/entry/meta/date.php' ); ?>
+		<?php get_template_part( 'templates/entry/meta/date' ); ?>
 		<?php the_title( '<h2 class="entry__title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
 	</header><!-- .entry__header -->
 

diff --git a/templates/entry/full.php b/templates/entry/full.php
@@ -7,15 +7,16 @@
 
 ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class( 'entry entry--featured' ); ?>>
-	<figure class="entry__thumbnail">
-		<a href="<?php the_permalink(); ?>">
-			<?php the_post_thumbnail( 'ampconf-375x225' ); ?>
-			<?php the_post_thumbnail( 'ampconf-1040x400' ); ?>
-		</a>
-	</figure><!-- .entry__thumbnail -->
+	<?php if ( has_post_thumbnail() ) : ?>
+		<figure class="entry__thumbnail">
+			<a href="<?php the_permalink(); ?>">
+				<?php ampconf_the_post_thumbnail( 'ampconf-1040x400' ); ?>
+			</a>
+		</figure><!-- .entry__thumbnail -->
+	<?php endif; ?>
 
 	<header class="entry__header">
-		<?php get_template_part( 'templates/entry/meta/date.php' ); ?>
+		<?php get_template_part( 'templates/entry/meta/date' ); ?>
 		<?php the_title( '<h2 class="entry__title">', '</h2>' ); ?>
 	</header><!-- .entry__header -->
 

diff --git a/templates/entry/slim.php b/templates/entry/slim.php
@@ -7,11 +7,13 @@
 
 ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class( 'entry entry--slim' ); ?>>
-	<figure class="entry__thumbnail">
-		<a href="<?php the_permalink(); ?>">
-			<?php the_post_thumbnail( 'ampconf-280x188' ); ?>
-		</a>
-	</figure><!-- .entry__thumbnail -->
+	<?php if ( has_post_thumbnail() ) : ?>
+		<figure class="entry__thumbnail">
+			<a href="<?php the_permalink(); ?>">
+				<?php ampconf_the_post_thumbnail( 'ampconf-280x188' ); ?>
+			</a>
+		</figure><!-- .entry__thumbnail -->
+	<?php endif; ?>
 
 	<header class="entry__header">
 		<?php get_template_part( 'templates/entry/meta/date' ); ?>