Ticket #35657: 35657-poc.diff

src/wp-includes/css/wp-embed-template.css

@@ -86 +86 @@
         margin-bottom: 20px;
 }
 
+.wp-embed-featured-image > a {
+        /*
+        Use intrinsic ratio so the height prior to the image loading.
+        The value of padding-top is calculated based on the size of the image.
+        */
+        display: block;
+        width: 100%;
+        position: relative;
+        height: 0;
+}
+
 .wp-embed-featured-image img {
         width: 100%;
         height: auto;
         border: none;
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
 }
 
 .wp-embed-featured-image.square {

src/wp-includes/embed.php

@@ -914 +914 @@
                         include "css/wp-embed-template.min.css"
                         <?php
                 }
-        ?>
+
+                $thumbnail_id = 0;
+
+                if ( has_post_thumbnail() ) {
+                        $thumbnail_id = get_post_thumbnail_id();
+                }
+
+                if ( 'attachment' === get_post_type() && wp_attachment_is_image() ) {
+                        $thumbnail_id = get_the_ID();
+                }
+
+                $aspect_ratio = 1;
+                $measurements = array( 1, 1 );
+                $image_size   = 'full'; // Fallback.
+
+                $meta = wp_get_attachment_metadata( $thumbnail_id );
+                if ( ! empty( $meta['sizes'] ) ) {
+                        foreach ( $meta['sizes'] as $size => $data ) {
+                                if ( $data['width'] / $data['height'] > $aspect_ratio ) {
+                                        $aspect_ratio = $data['width'] / $data['height'];
+                                        $measurements = array( $data['width'], $data['height'] );
+                                        $image_size   = $size;
+                                }
+                        }
+                }
+
+                /** This filter is documented in wp-includes/theme-compat/embed-content.php */
+                $image_size = apply_filters( 'embed_thumbnail_image_size', $image_size, $thumbnail_id );
+                $shape = $measurements[0] / $measurements[1] >= 1.75 ? 'rectangular' : 'square';
+
+                $padding_top = ( 100 * $measurements[1] ) / $measurements[0];
+                $image_display_width = $measurements[0] < 160 ? $measurements[0] : 160;
+
+                ?>
+                .wp-embed-featured-image > a {
+                        <?php echo safecss_filter_attr( 'padding-top:' . $padding_top . '%;' ) ?>;
+                }
+
+                <?php if ( 'square' === $shape ) : ?>
+                        .wp-embed-featured-image.square {
+                                <?php echo safecss_filter_attr( 'width:' . $image_display_width . 'px;' ) ?>;
+                        }
+                <?php endif; ?>
         </style>
         <?php
 }