Fixes #21: Use image compositing based on layered background images i…

…nstead of (broken) imgix calls for App Websites.

skit/lk/library/websites/WebsiteRenderer.js

@@ -33,25 +33,36 @@ var html = __module__.html;
 var pageHtml = __module__.page.html;
 
 
-Handlebars.registerHelper('frameByDevice', function(screenshotPath, color, platform) {
+Handlebars.registerHelper('frameByDevice', function(screenshotPath, color) {
+  if (!screenshotPath) {
+    screenshotPath = '/__static__/images/pixel.gif';
+  }
+
   if (color == 'no') {
-    return screenshotPath;
+    return new Handlebars.SafeString(
+        '<img src="' + Handlebars.Utils.escapeExpression(screenshotPath) + '" class="framed-screenshot">');
   }
 
   var phoneUrl;
   if (color == 'black') {
-    phoneUrl = 'https://launchkit-io.imgix.net/devices/iPhone6Black.png';
+    phoneUrl = '/__static__/devices/iPhone6Black.png';
   } else {
-    phoneUrl = 'https://launchkit-io.imgix.net/devices/iPhone6White.png';
+    phoneUrl = '/__static__/devices/iPhone6White.png';
   }
 
-  return urls.appendParams(phoneUrl, {
-    'w': '750',
-    'h': '1334',
-    'mark': screenshotPath,
-    'markh': '970',
-    'markalign': 'center,middle'
-  });
+  var style = {
+    'background-image':
+        'url(' + Handlebars.Utils.escapeExpression(screenshotPath) + '), url(' + phoneUrl + ')',
+    'background-size': '79.5%, 100%',
+    'background-position': '50% 51%, center',
+    'background-repeat': 'no-repeat, no-repeat'
+  };
+  var styleStr = '';
+  for (var k in style) {
+    styleStr += k + ':' + style[k] + ';';
+  }
+  return new Handlebars.SafeString('<img src="/__static__/devices/iPhoneBlank.png"' +
+      ' class="framed-screenshot" style="' + styleStr + '">');
 });
 
 Handlebars.registerHelper('ifShowPlatform', function(website, targetPlatform, opts) {

skit/lk/library/websites/WebsiteRenderer_carousel.html

@@ -10,11 +10,12 @@
     <div class="carousel-inner" role="listbox">
       {{#each website.images.screenshots.iPhone}}
         <div class="item{{#ifEqual @index 0}} active{{/ifEqual}}">
-          <img src="{{frameByDevice url ../website.frameScreenshots}}" class="screenshot" alt="Screenshot of {{../website.appName}}">
+          {{frameByDevice url ../website.frameScreenshots}}
         </div>
       {{/each}}
     </div>
   </div>
 {{else}}
-  <img src="{{frameByDevice website.images.screenshots.iPhone.[0].url website.frameScreenshots}}" class="screenshot" alt="Screenshot of {{website.appName}}">
+<!-- ohai someshit -->
+  {{frameByDevice website.images.screenshots.iPhone.[0].url website.frameScreenshots}}
 {{/ifGreater}}

skit/lk/library/websites/WebsiteRenderer_description.html

@@ -5,7 +5,7 @@
         {{#if website.images.screenshots.iPhone}}
           {{> __module__.carousel.html }}
         {{else}}
-          <img src="{{frameByDevice '' website.frameScreenshots 'iphone'}}">
+          {{frameByDevice '' website.frameScreenshots}}
         {{/if}}
       </div>
       <div class="col-sm-7 col-xs-12 description-text">

skit/lk/library/websites/WebsiteRenderer_header.html

@@ -16,7 +16,7 @@
           {{#if website.images.screenshots.iPhone}}
             {{> __module__.carousel.html }}
           {{else}}
-            <img src="{{frameByDevice '' website.frameScreenshots 'iphone'}}">
+            {{frameByDevice '' website.frameScreenshots}}
           {{/if}}
         </div>
         <div class="col-sm-7 col-xs-12">
@@ -50,7 +50,7 @@
           {{#if website.images.screenshots.iPhone}}
             {{> __module__.carousel.html }}
           {{else}}
-            <img src="{{frameByDevice '' website.frameScreenshots 'iphone'}}">
+            {{frameByDevice '' website.frameScreenshots}}
           {{/if}}
         </div>
         <div class="col-sm-7 col-xs-12">
@@ -89,9 +89,9 @@
         </div>
         <div class="hero-graphic-container col-sm-6 col-xs-12 text-center">
           {{#if website.images.screenshots.iPhone}}
-            <img class="hero-graphic" src="{{frameByDevice website.images.screenshots.iPhone.[0].url website.frameScreenshots 'iphone'}}">
+            {{frameByDevice website.images.screenshots.iPhone.[0].url website.frameScreenshots}}
           {{else}}
-            <img class="hero-graphic" src="{{frameByDevice '' website.frameScreenshots 'iphone'}}">
+            {{frameByDevice '' website.frameScreenshots}}
           {{/if}}
         </div>
       </div>
@@ -130,7 +130,7 @@
           {{#if website.images.screenshots.iPhone}}
             {{> __module__.carousel.html }}
           {{else}}
-            <img src="{{frameByDevice '' website.frameScreenshots 'iphone'}}">
+            {{frameByDevice '' website.frameScreenshots}}
           {{/if}}
         </div>
       </div>
@@ -167,7 +167,7 @@
           {{> __module__.download_badges.html }}
         </div>
         <div class="hero-graphic-container col-sm-5 col-xs-12 text-center">
-          <img src="{{frameByDevice website.images.screenshots.iPhone.[0].url website.frameScreenshots 'iphone'}}" class="screenshot">
+          {{frameByDevice website.images.screenshots.iPhone.[0].url website.frameScreenshots}}
         </div>
       </div>
     {{/ifEqual}}
@@ -179,7 +179,7 @@
           {{#if website.images.screenshots.iPhone}}
             {{> __module__.carousel.html }}
           {{else}}
-            <img src="{{frameByDevice '' website.frameScreenshots 'iphone'}}" class="screenshot">
+            {{frameByDevice '' website.frameScreenshots}}
           {{/if}}
           </div>
         </div>
@@ -202,7 +202,7 @@
           {{#if website.images.screenshots.iPhone}}
             {{> __module__.carousel.html }}
           {{else}}
-            <img src="{{frameByDevice '' website.frameScreenshots 'iphone'}}" class="screenshot">
+            {{frameByDevice '' website.frameScreenshots}}
           {{/if}}
         </div>
         <div class="text">