Merge pull request #846 from afuna/too-large-media-bug-841

Handle large media (images, iframes)
dreamwidth · Jul 27, 2014 · 6ce0e33 · 6ce0e33
2 parents c6c4f11 + 717f674
commit 6ce0e33
Show file tree

Hide file tree

Showing 16 changed files with 133 additions and 17 deletions.
diff --git a/cgi-bin/LJ/EmbedModule.pm b/cgi-bin/LJ/EmbedModule.pm
@@ -567,6 +567,12 @@ sub module_iframe_tag {
         $height = MAX_HEIGHT if $height > MAX_HEIGHT;
     }
 
+    my $wrapper_style = "max-width: $width" . ($width_unit || "px") . "; max-height: " . MAX_HEIGHT . "px;";
+
+    # this is the ratio between
+    my $padding_based_on_aspect_ratio = $height / $width * 100;
+    my $ratio_style = "padding-top: $padding_based_on_aspect_ratio%";
+
     # safari caches state of sub-resources aggressively, so give
     # each iframe a unique 'name' and 'id' attribute
     # append a random string to the name so it can't be targetted by links
@@ -576,8 +582,8 @@ sub module_iframe_tag {
                     ? '<div><a href="' . $url . '">' .  $linktext . '</a></div>' : '';
     my $auth_token = LJ::eurl(LJ::Auth->sessionless_auth_token('embedcontent', moduleid => $moduleid, journalid => $journalid, preview => $preview,));
     my $iframe_link = qq{http://$LJ::EMBED_MODULE_DOMAIN/?journalid=$journalid&moduleid=$moduleid&preview=$preview&auth_token=$auth_token};
-    my $iframe_tag = qq {<iframe src="$iframe_link" }
-        . qq{width="$width$width_unit" height="$height$height_unit" allowtransparency="true" frameborder="0" class="lj_embedcontent" id="$id" name="$name"></iframe>}
+    my $iframe_tag = qq {<div class="lj_embedcontent-wrapper" style="$wrapper_style"><div class="lj_embedcontent-ratio" style="$ratio_style"><iframe src="$iframe_link" }
+        . qq{width="$width$width_unit" height="$height$height_unit" allowtransparency="true" frameborder="0" class="lj_embedcontent" id="$id" name="$name"></iframe></div></div>}
         . qq{$direct_link};
 
     my $remote = LJ::get_remote();

diff --git a/cgi-bin/LJ/Poll.pm b/cgi-bin/LJ/Poll.pm
@@ -1219,13 +1219,13 @@ sub render {
                 if ($do_table) {
                     $results_table .= "<tr valign='middle'><td align='right'>$item</td><td>";
                     $results_table .= LJ::img( 'poll_left', '', { style => 'vertical-align:middle' } );
-                    $results_table .= "<img src='$LJ::IMGPREFIX/poll/mainbar.gif' style='vertical-align:middle' height='14' width='$width' alt='' />";
+                    $results_table .= "<img src='$LJ::IMGPREFIX/poll/mainbar.gif' style='vertical-align:middle; height: 14px;' height='14' width='$width' alt='' />";
                     $results_table .= LJ::img( 'poll_right', '', { style => 'vertical-align:middle' } );
                     $results_table .= "<b>$count</b> ($percent%) $answered</td></tr>";
                 } else {
                     $results_table .= "<p>$item<br /><span style='white-space: nowrap'>";
                     $results_table .= LJ::img( 'poll_left', '', { style => 'vertical-align:middle' } );
-                    $results_table .= "<img src='$LJ::IMGPREFIX/poll/mainbar.gif' style='vertical-align:middle' height='14' width='$width' alt='' />";
+                    $results_table .= "<img src='$LJ::IMGPREFIX/poll/mainbar.gif' style='vertical-align:middle; height: 14px;' height='14' width='$width' alt='' />";
                     $results_table .= LJ::img( 'poll_right', '', { style => 'vertical-align:middle' } );
                     $results_table .= "<b>$count</b> ($percent%) $answered</span></p>";
                 }

diff --git a/htdocs/stc/lj_base.css b/htdocs/stc/lj_base.css
@@ -1,4 +1,19 @@
+.lj_embedcontent-wrapper {
+    overflow: hidden;
+}
+.lj_embedcontent-ratio {
+    position: relative;
+    height: 0;
+    /* this technique requires a padding top, but we calculate that dynamically and put it inline */
+}
+
 iframe.lj_embedcontent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
     border: 0;
 }
 

diff --git a/htdocs/tools/embedcontent.bml b/htdocs/tools/embedcontent.bml
@@ -42,7 +42,7 @@ _c?>
     )->{content};
 
     return qq {
-        <html><head><style type="text/css">html, body { background-color:transparent; padding:0; margin:0; border:0; overflow:hidden; }</style></head><body>$content</body></html>
+        <html><head><style type="text/css">html, body { background-color:transparent; padding:0; margin:0; border:0; overflow:hidden; } iframe, object, embed { width: 100%; height: 100%;}</style></head><body>$content</body></html>
     };
 }
 _code?>
diff --git a/styles/abstractia/layout.s2 b/styles/abstractia/layout.s2
@@ -539,6 +539,7 @@ function EntryPage::print_comment (Comment c) {
 
 function Page::print_default_stylesheet() {
     var string medium_media_query = generate_medium_media_query();
+    var string large_media_query = generate_large_media_query();
 
     var string page_background = generate_background_css ($*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background);
     var string header_background = generate_background_css ($*image_background_header_url, $*image_background_header_repeat, $*image_background_header_position, $*color_header_background);
@@ -1211,6 +1212,15 @@ q {
 .entry-content ul:first-child li, .entry-content ol:first-child li {
     list-style-position: inside;
 }
+/* To constrain the width and prevent layout breaking */
+.entry-content img, .comment-content img {
+    max-width: 100%;
+    height: auto;
+}
+
+@media $large_media_query {
+    .entry-content img, .comment-content img { max-width: none; }
+}
 
 .entry .tag,.footer .multiform-checkbox {
     width: 98%;

diff --git a/styles/bases/layout.s2 b/styles/bases/layout.s2
@@ -333,6 +333,7 @@ function Page::print()
 function Page::print_default_stylesheet()
 {
 var string medium_media_query = generate_medium_media_query();
+var string large_media_query = generate_large_media_query();
 
 var string sidebar_position = "";
 var string sidebar_position_opposite = "";
@@ -541,6 +542,16 @@ ul ul {list-style: circle;}
 .entry-content a img:hover {border-color: $*color_entry_link_hover; }
 .entry-content .userpic, #comments .userpic {background: $*color_entry_background;}
 
+/* To constrain the width and prevent layout breaking */
+.entry-content img, .comment-content img {
+    max-width: 100%;
+    height: auto;
+}
+
+@media $large_media_query {
+    .entry-content img, .comment-content img { max-width: none; }
+}
+
 /* ====================== HEADER ======================= */
 
 #header {

diff --git a/styles/blanket/layout.s2 b/styles/blanket/layout.s2
@@ -245,6 +245,7 @@ propgroup customcss {
 
 function Page::print_default_stylesheet () {
     var string medium_media_query = generate_medium_media_query();
+    var string large_media_query = generate_large_media_query();
 
     var string page_colors = generate_color_css( $*color_page_text, $*color_page_background, new Color );
 
@@ -673,6 +674,16 @@ h3.entry-title a {
     list-style-position: inside;
     }
 
+/* To constrain the width and prevent layout breaking */
+.entry-content img, .comment-content img {
+    max-width: 100%;
+    height: auto;
+}
+
+@media $large_media_query {
+    .entry-content img, .comment-content img { max-width: none; }
+}
+
 .metadata {
     margin: 2em 0 0;
     }

diff --git a/styles/brittle/layout.s2 b/styles/brittle/layout.s2
@@ -326,6 +326,7 @@ function prop_init() {
 
 function Page::print_default_stylesheet() {
     var string medium_media_query = generate_medium_media_query();
+    var string large_media_query = generate_large_media_query();
 
     var string sidebar_position = "";
     var string sidebar_position_opposite = "";
@@ -561,6 +562,16 @@ li.page-separator { display: none; }
 
 .entry-content { margin: 10px 0 0 0; }
 
+/* To constrain the width and prevent layout breaking */
+.entry-content img, .comment-content img {
+    max-width: 100%;
+    height: auto;
+}
+
+@media $large_media_query {
+    .entry-content img, .comment-content img { max-width: none; }
+}
+
 .entry .header {
     padding: 0;
     margin: 0 0 10px 0;

diff --git a/styles/core2base/layout.s2 b/styles/core2base/layout.s2
@@ -301,6 +301,7 @@ function Page::print_default_stylesheet() {
     var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units);
     var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units);
 
+
      var string userpic_css = "";
          if ($*userpics_position == "right") {
              $userpic_css = """
@@ -520,6 +521,16 @@ h2#pagetitle {
     list-style-position: inside;
     }
 
+/* To constrain the width and prevent layout breaking */
+.entry-content img, .comment-content img {
+    max-width: 100%;
+    height: auto;
+}
+
+@media $large_media_query {
+    .entry-content img, .comment-content img { max-width: none; }
+}
+
 .metadata ul {
     display: inline;
     list-style: none;

diff --git a/styles/drifting/layout.s2 b/styles/drifting/layout.s2
@@ -288,6 +288,7 @@ propgroup customcss
 function Page::print_default_stylesheet()
 {
     var string medium_media_query = generate_medium_media_query();
+    var string large_media_query = generate_large_media_query();
 
     var string image_header_left_url = generate_image_url ($*image_header_left);
     var string image_header_right_url = generate_image_url ($*image_header_right);
@@ -715,6 +716,16 @@ function Page::print_default_stylesheet()
         list-style-position: inside;
         }
 
+    /* To constrain the width and prevent layout breaking */
+    .entry-content img, .comment-content img {
+        max-width: 100%;
+        height: auto;
+    }
+
+    @media $large_media_query {
+        .entry-content img, .comment-content img { max-width: none; }
+    }
+
     .entry .subject {
         padding: 3px;
         border: 1px solid $*color_entry_border;

diff --git a/styles/easyread/layout.s2 b/styles/easyread/layout.s2
@@ -309,6 +309,7 @@ function Page::print()
 
 function Page::print_default_stylesheet {
     var string medium_media_query = generate_medium_media_query();
+    var string large_media_query = generate_large_media_query();
 
     var string page_background = generate_background_css ($*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background);
     var string entry_background = generate_background_css ($*image_background_entry_url, $*image_background_entry_repeat, $*image_background_entry_position, $*color_entry_background);
@@ -599,6 +600,16 @@ h2.module-header a {
     $entrytitle_padding
 }
 
+/* To constrain the width and prevent layout breaking */
+.entry-content img, .comment-content img {
+    max-width: 100%;
+    height: auto;
+}
+
+@media $large_media_query {
+    .entry-content img, .comment-content img { max-width: none; }
+}
+
 /* Set height to keep spacing */
 /* Use standard H3 font size */
 .no-subject .entry .entry-title {

diff --git a/styles/negatives/layout.s2 b/styles/negatives/layout.s2
@@ -269,6 +269,7 @@ function prop_init {
 function Page::print_default_stylesheet()
 {
     var string medium_media_query = generate_medium_media_query();
+    var string large_media_query = generate_large_media_query();
 
     var string page_background = generate_background_css($*image_background_page_url,$*image_background_page_repeat,$*image_background_page_position,$*color_page_background);
     var string header_background = generate_background_css($*image_background_header_url, $*image_background_header_repeat, $*image_background_header_position, $*color_header_background);
@@ -572,6 +573,17 @@ function Page::print_default_stylesheet()
         list-style-position: inside;
         }
 
+    /* To constrain the width and prevent layout breaking */
+    .entry-content img, .comment-content img {
+        max-width: 100%;
+        height: auto;
+        }
+
+    @media $large_media_query {
+        .entry-content img, .comment-content img { max-width: none; }
+    }
+
+
     .entry .footer,
     .comment .footer {
         clear: both;

diff --git a/styles/skittlishdreams/layout.s2 b/styles/skittlishdreams/layout.s2
@@ -506,6 +506,7 @@ function generate_background_css_flipped (
 
 function Page::print_default_stylesheet () {
     var string medium_media_query = generate_medium_media_query();
+    var string large_media_query = generate_large_media_query();
 
     var string[] path_components = $*image_background_entry_url->split("/");
     var string image_base = $path_components[size($path_components)-1];
@@ -950,6 +951,16 @@ html body {
     padding: 10px 0;
     }
 
+/* To constrain the width and prevent layout breaking */
+.entry-content img, .comment-content img {
+    max-width: 100%;
+    height: auto;
+    }
+
+@media $large_media_query {
+    .entry-content img, .comment-content img { max-width: none; }
+}
+
 .page-recent .security-public.restrictions-none.journal-type-P.has-userpic.no-subject .entry-content,
 .page-day .security-public.restrictions-none.journal-type-P.has-userpic.no-subject .entry-content {
     padding-top: 20px;

diff --git a/styles/snakesandboxes/layout.s2 b/styles/snakesandboxes/layout.s2
@@ -311,11 +311,8 @@ pre {
     word-wrap: break-word;
 }
 
-/* Noting that this can distort or cut off content */
-.entry-content .lj_embedcontent,
-.entry-content img,
-.comment-content img {
-     max-width: 100%;
+@media $large_media_query {
+    .entry-content img, .comment-content img { max-width: none; }
 }
 
 blockquote {

diff --git a/styles/trifecta/layout.s2 b/styles/trifecta/layout.s2
@@ -897,15 +897,14 @@ $header_css
     text-align: $*post_text_align;
 }
 
+/* Make sure content isn't bigger than container */
 pre {
     white-space: pre-wrap;
     word-wrap: break-word;
 }
 
-.entry-content .lj_embedcontent,
-.entry-content img,
-.comment-content img {
-    max-width: 100%;
+@media $large_media_query {
+    .entry-content img, .comment-content img { max-width: none; }
 }
 
 .metadata {

diff --git a/t/clean-embed.t b/t/clean-embed.t
@@ -208,7 +208,7 @@ note( "Testing parse_embed (We parse the embed contents first from a post)" );
     # because we have additional checks in the callers
     my $invalid_embed = qq{[Invalid lj-embed id 1]};
 
-    my $iframe = qq{<iframe ([^>]+)></iframe>(<div><a href=""></a></div>)};
+    my $iframe = qq{<div class="lj_embedcontent-wrapper" style="[^"]+"><div class="lj_embedcontent-ratio" style="[^"]+"><iframe ([^>]+)></iframe></div></div>(<div><a href=""></a></div>)};
 
     foreach ( (
         # [ "title"
@@ -337,7 +337,7 @@ note( "Testing parse_embed (We parse the embed contents first from a post)" );
             qq{foo <site-embed id="1"/>baz},
             qq{foo <site-embed id="1"><iframe src="http://www.youtube.com/embed/ABC123abc_-"></iframe></site-embed>baz},
             # site-embed iframe
-            qr{foo <iframe ([^>]+)></iframe><div><a href="https://www.youtube.com/watch\?v=ABC123abc_-">(?:[^<]+)</a></div>\s*baz},
+            qr{foo <div class="lj_embedcontent-wrapper" style="[^"]+"><div class="lj_embedcontent-ratio" style="[^"]+"><iframe ([^>]+)></iframe></div></div><div><a href="https://www.youtube.com/watch\?v=ABC123abc_-">(?:[^<]+)</a></div>\s*baz},
             # ...which contains the nested iframe with a URL from a trusted source
             qq{<iframe src="http://www.youtube.com/embed/ABC123abc_-"></iframe>},
         ],
@@ -349,7 +349,7 @@ note( "Testing parse_embed (We parse the embed contents first from a post)" );
             qq{foo <site-embed id="1"/> baz},
             qq{foo <site-embed id="1"><iframe src="http://www.youtube.com/embed/ABC123abc_-"></iframe></site-embed> baz},
             # site-embed iframe
-            qr{foo <iframe ([^>]+)></iframe><div><a href="https://www.youtube.com/watch\?v=ABC123abc_-">(?:[^<]+)</a></div>\s*baz},
+            qr{foo <div class="lj_embedcontent-wrapper" style="[^"]+"><div class="lj_embedcontent-ratio" style="[^"]+"><iframe ([^>]+)></iframe></div></div><div><a href="https://www.youtube.com/watch\?v=ABC123abc_-">(?:[^<]+)</a></div>\s*baz},
             # ...which contains the nested iframe with a URL from a trusted source
             qq{<iframe src="http://www.youtube.com/embed/ABC123abc_-"></iframe>},
         ],