Fix height calculations for Instagram responsive embeds

assets/js/shortcake-bakery.js

@@ -30,9 +30,11 @@
 				parentWidth = parent.innerWidth;
 			}
 
+			var heightAdjust = el.data('height-adjust') ? el.data('height-adjust') : 0;
+
 			var trueHeight = el.data('true-height') ? el.data('true-height') : 360;
 			var trueWidth = el.data('true-width') ? el.data('true-width') : 640;
-			var newHeight = ( parentWidth / trueWidth ) * trueHeight;
+			var newHeight = ( ( parentWidth / trueWidth ) * trueHeight ) + heightAdjust;
 			$(this).css('height', newHeight + 'px' ).css('width', parentWidth + 'px');
 			$(this).trigger('shortcake-bakery-responsive-resize');
 		});
@@ -46,7 +48,9 @@
 				if ( el.attr('height') && el.attr('width')
 					&& ! el.data('true-width') && ! el.data('true-height')
 					&& -1 === el.attr('height').indexOf('%') && -1 === el.attr('width').indexOf('%') ) {
-					el.data('true-height', el.attr('height'));
+
+					var heightAdjust = el.data('height-adjust') ? el.data('height-adjust') : 0;
+					el.data('true-height', el.attr('height') - heightAdjust);
 					el.data('true-width', el.attr('width'));
 				}
 			});

composer.json

@@ -7,7 +7,7 @@
     }
   ],
   "require-dev": {
-    "squizlabs/php_codesniffer": "2.3.4",
+    "squizlabs/php_codesniffer": "^2.6",
     "wp-coding-standards/wpcs": "dev-master"
   },
   "scripts": {

inc/shortcodes/class-giphy.php

@@ -59,7 +59,7 @@ public static function reversal( $content ) {
 						$width_and_or_height .= ' ' . sanitize_key( $attr ) . '="' . (int) $iframe->attrs[ $attr ] . '"';
 					}
 				}
-				$replacement = '[' . self::get_shortcode_tag() . ' url="' . esc_url_raw( 'http://giphy.com/gifs/' . $embed_id ) . '"'  . $width_and_or_height . ']';
+				$replacement = '[' . self::get_shortcode_tag() . ' url="' . esc_url_raw( 'http://giphy.com/gifs/' . $embed_id ) . '"' . $width_and_or_height . ']';
 				$replacements[ $replacement_key ] = $replacement;
 			}
 			$content = self::make_replacements_to_content( $content, $replacements );

inc/shortcodes/class-googledocs.php

@@ -232,7 +232,8 @@ public static function callback( $attrs, $content = '' ) {
 				array_keys( $additional_attributes ),
 				function( $attribute_string, $attr_key ) use ( $additional_attributes ) {
 					return $attribute_string . sanitize_key( $attr_key ) . '="' . esc_attr( $additional_attributes[ $attr_key ] ) . '" ';
-				} ) : '' ) . '>' .
+				}
+			) : '' ) . '>' .
 			( $inner_content ? esc_html( $inner_content ) : '' ) .
 			'</iframe>';
 	}

inc/shortcodes/class-infogram.php

@@ -2,8 +2,7 @@
 
 namespace Shortcake_Bakery\Shortcodes;
 
-class Infogram extends Shortcode
-{
+class Infogram extends Shortcode {
 
 	/**
 	 * Turn embed code into a proper shortcode

inc/shortcodes/class-instagram.php

@@ -15,6 +15,12 @@ public static function get_shortcode_ui_args() {
 					'type'         => 'text',
 					'description'  => esc_html__( 'URL to an Instagram', 'shortcake-bakery' ),
 				),
+				array(
+					'label'        => esc_html__( 'Ratio', 'shortcake-bakery' ),
+					'attr'         => 'ratio',
+					'type'         => 'text',
+					'description'  => esc_html__( 'Ratio of the image\'s height to width as a percentage. (For example, the ratio of a 16:9 image would be 56.25).', 'shortcake-bakery' ),
+				),
 			),
 		);
 	}
@@ -25,12 +31,24 @@ public static function reversal( $content ) {
 			return $content;
 		}
 
-		$needle = '#<blockquote class="instagram-media.+<a href="(https://(www\.)?instagram\.com/p/[^/]+/)"[^>]+>.+(?=</blockquote>)</blockquote>\n?(<script[^>]+src="//platform\.instagram\.com/[^>]+></script>)?#';
+		/**
+		 * Explanation of regex:
+		 *
+		 * [1] vertical padding value on image div (should be doubled because it's applied to top and bottom
+		 * [2] full match of embed URL
+		 * [3] www or not www
+		 * [4] script tag, if provided
+		 */
+		$needle = '#<blockquote class="instagram-media.+padding:([0-9.]+)% 0;.+<a href="(https://(www\.)?instagram\.com/p/[^/]+/)"[^>]+>.+(?=</blockquote>)</blockquote>\n?(<script[^>]+src="//platform\.instagram\.com/[^>]+></script>)?#';
 		if ( preg_match_all( $needle, $content, $matches ) ) {
 			$replacements = array();
 			$shortcode_tag = self::get_shortcode_tag();
 			foreach ( $matches[0] as $key => $value ) {
-				$replacements[ $value ] = '[' . $shortcode_tag . ' url="' . esc_url_raw( $matches[1][ $key ] ) . '"]';
+
+				$ratio = round( floatval( $matches[1][ $key ] ) * 2, 4 );
+				$replacements[ $value ] = '[' . $shortcode_tag . ' url="' . esc_url_raw( $matches[2][ $key ] ) . '"' .
+					( ( 100 !== intval( $ratio ) ) ? ' ratio="' . esc_attr( $ratio ) . '"' : '' ) .
+					']';
 			}
 			$content = self::make_replacements_to_content( $content, $replacements );
 		}
@@ -67,8 +85,15 @@ public static function callback( $attrs, $content = '' ) {
 			return '';
 		}
 
-		return sprintf( '<iframe class="shortcake-bakery-responsive" src="%s" width="612" height="710" frameborder="0" scrolling="no"></iframe>',
-			esc_url( sprintf( 'https://instagram.com/p/%s/embed/', $photo_id ) )
+		$image_ratio = ( ! empty( $attrs['ratio'] ) ) ? floatval( $attrs['ratio'] ) : 100.0;
+
+		// Instagram embeds are a 48px header and footer, plus the responsive image section
+		// (the embed has a 8px negative bottom margin, so we account for that here as well.)
+		$height = 48 + round( 612 * ( $image_ratio / 100 ) ) + 48;
+
+		return sprintf( '<iframe data-height-adjust="96" class="shortcake-bakery-responsive" src="%s" width="612" height="%s" frameborder="0" scrolling="no"></iframe>',
+			esc_url( sprintf( 'https://instagram.com/p/%s/embed/', $photo_id ) ),
+			esc_attr( $height )
 		);
 	}
 

inc/shortcodes/class-shortcode.php

@@ -74,7 +74,7 @@ protected static function parse_url( $url, $component = -1 ) {
 		if ( $added_protocol && $ret ) {
 			if ( -1 === $component && isset( $ret['scheme'] ) ) {
 				unset( $ret['scheme'] );
-			} else if ( PHP_URL_SCHEME === $component ) {
+			} elseif ( PHP_URL_SCHEME === $component ) {
 				$ret = '';
 			}
 		}
@@ -149,13 +149,13 @@ protected static function parse_tag_attributes( $text ) {
 			foreach ( $match as $m ) {
 				if ( ! empty( $m[1] ) ) {
 					$atts[ $m[1] ] = stripcslashes( $m[2] );
-				} else if ( ! empty( $m[3] ) ) {
+				} elseif ( ! empty( $m[3] ) ) {
 					$atts[ $m[3] ] = stripcslashes( $m[4] );
-				} else if ( ! empty( $m[5] ) ) {
+				} elseif ( ! empty( $m[5] ) ) {
 					$atts[ $m[5] ] = stripcslashes( $m[6] );
-				} else if ( isset( $m[7] ) && strlen( $m[7] ) ) {
+				} elseif ( isset( $m[7] ) && strlen( $m[7] ) ) {
 					$atts[ $m[7] ] = null;
-				} else if ( isset( $m[8] ) ) {
+				} elseif ( isset( $m[8] ) ) {
 					$atts[ $m[8] ] = null;
 				}
 			}

inc/shortcodes/class-soundcloud.php

@@ -70,7 +70,7 @@ public static function callback( $attrs, $content = '' ) {
 		}
 
 		// Use the track URL in the API request. It will be redirected to the proper track ID
-		$embed_url = 'https://w.soundcloud.com/player/?url=' . urlencode( $attrs['url'] );
+		$embed_url = 'https://w.soundcloud.com/player/?url=' . rawurlencode( $attrs['url'] );
 		$height = 166;
 		if ( ! empty( $attrs['type'] ) && 'visual' === $attrs['type'] ) {
 			$embed_url = add_query_arg( 'visual', 'true', $embed_url );

inc/shortcodes/class-vine.php

@@ -57,7 +57,7 @@ public static function reversal( $content ) {
 				} else {
 					$autoplay = '';
 				}
-				$replacements[ $iframe->original ] = '[' .  self::get_shortcode_tag() . ' url="' . esc_url_raw( $replacement_url ) . '" type="' . $type . '"' . $autoplay . ']';
+				$replacements[ $iframe->original ] = '[' . self::get_shortcode_tag() . ' url="' . esc_url_raw( $replacement_url ) . '" type="' . $type . '"' . $autoplay . ']';
 			}
 			$content = self::make_replacements_to_content( $content, $replacements );
 		}

tests/test-image-comparison.php

@@ -51,7 +51,7 @@ public function test_post_display() {
 	 */
 	private function insert_attachment( $parent_post_id = 0, $image = null, $post_fields = array() ) {
 
-		$filename = rand_str().'.jpg';
+		$filename = rand_str() . '.jpg';
 		$contents = rand_str();
 
 		if ( $image ) {

tests/test-instagram-shortcode.php

@@ -5,13 +5,13 @@ class Test_Instagram_Shortcode extends WP_UnitTestCase {
 	public function test_post_display() {
 		$post_id = $this->factory->post->create( array( 'post_content' => '[instagram url="https://instagram.com/p/3QcZmWP5To/"]' ) );
 		$post = get_post( $post_id );
-		$this->assertContains( '<iframe class="shortcake-bakery-responsive" src="https://instagram.com/p/3QcZmWP5To/embed/" width="612" height="710" frameborder="0" scrolling="no"></iframe>', apply_filters( 'the_content', $post->post_content ) );
+		$this->assertContains( '<iframe data-height-adjust="96" class="shortcake-bakery-responsive" src="https://instagram.com/p/3QcZmWP5To/embed/" width="612" height="708" frameborder="0" scrolling="no"></iframe>', apply_filters( 'the_content', $post->post_content ) );
 	}
 
 	public function test_post_display_with_www() {
 		$post_id = $this->factory->post->create( array( 'post_content' => '[instagram url="https://www.instagram.com/p/3QcZmWP5To/"]' ) );
 		$post = get_post( $post_id );
-		$this->assertContains( '<iframe class="shortcake-bakery-responsive" src="https://instagram.com/p/3QcZmWP5To/embed/" width="612" height="710" frameborder="0" scrolling="no"></iframe>', apply_filters( 'the_content', $post->post_content ) );
+		$this->assertContains( '<iframe data-height-adjust="96" class="shortcake-bakery-responsive" src="https://instagram.com/p/3QcZmWP5To/embed/" width="612" height="708" frameborder="0" scrolling="no"></iframe>', apply_filters( 'the_content', $post->post_content ) );
 	}
 
 	public function test_embed_reversal_v4() {
@@ -50,7 +50,7 @@ public function test_embed_reversal_v6() {
 		$expected_content = <<<EOT
 		apples before
 
-		[instagram url="https://www.instagram.com/p/_r_r_FkHxE/"]
+		[instagram url="https://www.instagram.com/p/_r_r_FkHxE/" ratio="75.2591"]
 
 		bananas after
 EOT;
@@ -103,4 +103,27 @@ public function test_embed_reversal_example_without_script() {
 		$transformed_content = str_replace( '\"', '"', $transformed_content ); // Kses slashes the data
 		$this->assertEquals( $expected_content, $transformed_content );
 	}
+
+	public function test_embed_reversal_with_non_standard_ratio() {
+		$old_content = <<<EOT
+		apples before
+
+		<blockquote class="instagram-media" data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:33.2407407407% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/BJcSHUTgAI0/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A photo posted by 渡辺直美 (@watanabenaomi703)</a> on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-08-23T06:55:49+00:00">Aug 22, 2016 at 11:55pm PDT</time></p></div></blockquote>
+<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
+
+		bananas after
+EOT;
+
+		$expected_content = <<<EOT
+		apples before
+
+		[instagram url="https://www.instagram.com/p/BJcSHUTgAI0/" ratio="66.4815"]
+
+		bananas after
+EOT;
+
+		$transformed_content = wp_filter_post_kses( $old_content );
+		$transformed_content = str_replace( '\"', '"', $transformed_content ); // Kses slashes the data
+		$this->assertEquals( $expected_content, $transformed_content );
+	}
 }