diff --git a/assets/js/shortcake-bakery.js b/assets/js/shortcake-bakery.js index ac55218..ee5f511 100644 --- a/assets/js/shortcake-bakery.js +++ b/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')); } }); diff --git a/composer.json b/composer.json index 4ec213a..de82e1b 100644 --- a/composer.json +++ b/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": { diff --git a/inc/shortcodes/class-giphy.php b/inc/shortcodes/class-giphy.php index 1ecc5ca..d8e435c 100644 --- a/inc/shortcodes/class-giphy.php +++ b/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 ); diff --git a/inc/shortcodes/class-googledocs.php b/inc/shortcodes/class-googledocs.php index 0e7e410..b633d54 100644 --- a/inc/shortcodes/class-googledocs.php +++ b/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 ) : '' ) . ''; } diff --git a/inc/shortcodes/class-infogram.php b/inc/shortcodes/class-infogram.php index dd9943f..9b82abd 100644 --- a/inc/shortcodes/class-infogram.php +++ b/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 diff --git a/inc/shortcodes/class-instagram.php b/inc/shortcodes/class-instagram.php index 320f655..a3dc5ab 100644 --- a/inc/shortcodes/class-instagram.php +++ b/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 = '#
]+>.+(?=
)\n?(]+src="//platform\.instagram\.com/[^>]+>)?#'; + /** + * 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 = '#
]+>.+(?=
)\n?(]+src="//platform\.instagram\.com/[^>]+>)?#'; 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( '', - 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( '', + esc_url( sprintf( 'https://instagram.com/p/%s/embed/', $photo_id ) ), + esc_attr( $height ) ); } diff --git a/inc/shortcodes/class-shortcode.php b/inc/shortcodes/class-shortcode.php index 25ea2cc..a2b5083 100644 --- a/inc/shortcodes/class-shortcode.php +++ b/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; } } diff --git a/inc/shortcodes/class-soundcloud.php b/inc/shortcodes/class-soundcloud.php index d73cfec..4f64ffc 100644 --- a/inc/shortcodes/class-soundcloud.php +++ b/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 ); diff --git a/inc/shortcodes/class-vine.php b/inc/shortcodes/class-vine.php index a486e87..62a0f21 100644 --- a/inc/shortcodes/class-vine.php +++ b/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 ); } diff --git a/tests/test-image-comparison.php b/tests/test-image-comparison.php index 6bb109b..ba753be 100644 --- a/tests/test-image-comparison.php +++ b/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 ) { diff --git a/tests/test-instagram-shortcode.php b/tests/test-instagram-shortcode.php index 3051a84..623eb00 100644 --- a/tests/test-instagram-shortcode.php +++ b/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( '', apply_filters( 'the_content', $post->post_content ) ); + $this->assertContains( '', 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( '', apply_filters( 'the_content', $post->post_content ) ); + $this->assertContains( '', 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 = <<assertEquals( $expected_content, $transformed_content ); } + + public function test_embed_reversal_with_non_standard_ratio() { + $old_content = <<

A photo posted by 渡辺直美 (@watanabenaomi703) on

+ + + bananas after +EOT; + + $expected_content = <<assertEquals( $expected_content, $transformed_content ); + } }