Merge pull request #16 from monkeywithacupcake/gh-pages

Add additional options for app landing page - Preview and Social Card

README.md

@@ -48,6 +48,10 @@ Optionally enter additional information:
 - Android App ID (e.g. com.example.appname)
 - App Icon (will auto-magically load if left blank)
 - App Screenshot (will auto-magically load if left blank)
+- App Preview (if you want this instead of a screenshot)
+- App and Creator Twitter handles
+- Image for sharing on Social Media
+- Your own Favicon
 - Marketing Header
 - Marketing Description
 - Social Links

_config.yml

@@ -17,11 +17,28 @@ app:
   # e.g. images/app-icon-512.png
   # 512px or greater, square
 
+  #favicon: # uncomment if uploading own favicon
+  # To update use path relative to project root with no leading slash:
+  # e.g. images/app-favicon.png - can be .ico or .png
+  # 16px or greater, square
+
   screenshot: # Leave blank to auto-magically populate
   # To update use path relative to project root with no leading slash:
   # e.g. images/app-screen-640x1136.png
   # 640x1136px
 
+  #video: # uncomment if prefer to show a video preview in the screen instead of image
+  # To update use path relative to project root with no leading slash:
+  # e.g. images/app-preview.mp4
+  # 640x1136px
+
+  #app_twitter: # uncomment if the app has a twitter account "@my-awesome-app"
+  #creator_twitter: # uncomment if creator has a twitter account "@awesome-dev"
+  #social_image: # uncomment and add an image - defaults to icon
+  # This will show up when your url is shared on sites like facebook and twitter
+  # To update use path relative to project root with no leading slash:
+  # e.g. images/app-social_image.png
+  # 512px or greater, square or width = 2X height
 #
 # Marketing
 #

_includes/head.html

@@ -5,9 +5,11 @@
   <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
   <title>{% if site.title %}{{ site.title }}{% else %}{{ site.app.name }}{% endif %}</title>
   <meta name="description" content="{{ site.description }}">
-  
+
   <!-- Favicon -->
-  <link rel="shortcut icon" href="favicon.ico">
+  {% if site.app.favicon %}
+  <link rel="shortcut icon" href="{{ site.app.favicon }}">
+  {% endif %}
   <link rel="apple-touch-icon-precomposed" href="apple-icon-precomposed.png">
 
   {% if site.enable.smart_app_banner %}
@@ -15,6 +17,9 @@
   <meta name="apple-itunes-app" content="app-id={{ site.app.ios_id }},affiliate-data={% include apple-affiliate.html %}">
   {% endif %}
 
+  <!-- Social media management -->
+  {% include socialcard.html %}
+
   <!-- Open All Links In A New Tab/Window -->
   <base target="_blank">
 

_includes/socialcard.html

@@ -0,0 +1,30 @@
+
+<!-- set key defaults -->
+<meta name="twitter:card" content="summary">
+
+{% if site.app.app_twitter %}
+<meta name="twitter:site" content="{{ site.app.app_twitter }}">
+{% endif %}
+{% if site.app.creator_twitter %}
+<meta name="twitter:creator" content="{{ site.app.creator_twitter }}">
+{% endif %}
+
+<meta name="twitter:title" content="{{ site.app.name }}">
+<meta content="{{ site.app.name }}" property="og:title">
+<meta content="website" property="og:type">
+
+{% if site.marketing_header %}
+<meta name="twitter:description" content="{{ site.marketing_header }}">
+<meta content="{{ site.marketing_header }}" property="og:description">
+{% endif %}
+
+<meta name="twitter:url" content="{{ site.url }}">
+<meta content="{{ site.url }}" property="og:url">
+
+<!-- set image -->
+
+{% if site.app.social_image %}
+<meta property="og:image" content="{{ site.app.social_image | prepend: site.url }}" />
+{% else %}
+<meta property="og:image" content="{{ site.app.icon | prepend: site.url }}" />
+{% endif %}

_sass/_devices.scss

@@ -14,6 +14,25 @@
   height: auto;
 }
 
+.device .video-container {
+  position: absolute;
+  width: 240px;
+  height: 426.66px;
+  padding-bottom: 0;
+    margin-left: 24px;
+    margin-top: 90.67px;
+    overflow: hidden;
+}
+// Video
+
+.video-container iframe {
+    position: absolute;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 //
 // iPhone SE Silver Vertical
 //

themes/default/index.html

@@ -44,12 +44,20 @@
 
       <div class="col-sm-6">
 
-        <!-- App Screenshot(s) -->
+        <!-- App Preview or Screenshot(s) -->
         <div class="device {{ site.device }}">
-          <img
-            class="app-screenshot"
-            {% if site.app.screenshot %}src="{{ site.app.screenshot }}"{% endif %}
-          />
+          {% if site.app.video %}
+               <div class="video-container">
+                <iframe src="{{ site.app.video }}" height="426.66" width="240" allowfullscreen="" frameborder="0">
+                </iframe>
+              </div>
+
+          {% else %}
+               <img
+                class="app-screenshot"
+                {% if site.app.screenshot %}src="{{ site.app.screenshot }}"{% endif %}
+               />
+          {% endif %}
         </div>
       </div>
     </div>