feat(template): refactor thumbnail support

BREAKING CHANGE: In this update the `svg-headline*` and `img-headline*` are deprecated and no longer available. You should use the new syntax `heading-img` for this feature, more info available on our project site.

_app/_includes/themes/curtana/layouts/post.html

@@ -2,6 +2,40 @@
 {{ amsf_page_css }}
 
 <!-- Prepare for image headers -->
+{% capture amsf_page_heading_img %}
+  {% assign protocal = page.heading-img | match_regex: '^((?:https?:)?\/\/)' %}
+  {% if protocal == null %}
+    {% if page.heading-img-local %}
+      <img
+        src="{{ amsf_user_assets }}/{{ page.heading-img }}"
+        {% if page.heading-img-width %}
+          style="width: {{ page.heading-img-width | times: 0.1 }}vw;"
+        {% else %}
+          style="width: 50vw;"
+        {% endif %}
+      >
+    {% else %}
+      <img
+        src="{{ site.file }}/{{ page.heading-img }}"
+        {% if page.heading-img-width %}
+          style="width: {{ page.heading-img-width | times: 0.1 }}vw;"
+        {% else %}
+          style="width: 50vw;"
+        {% endif %}
+      >
+    {% endif %}
+  {% else %}
+    <img
+      src="{{ page.heading-img }}"
+      {% if page.heading-img-width %}
+        style="width: {{ page.heading-img-width | times: 0.1 }}vw;"
+      {% else %}
+        style="width: 50vw;"
+      {% endif %}
+    >
+  {% endif %}
+{% endcapture %}
+
 {% capture amsf_page_heading_type_img %}
   <img
     src="{{ site.file }}/{{ page.img-headline }}"
@@ -27,19 +61,16 @@
 {% endcapture %}
 
 {% capture amsf_page_heading_text %}
-  {% if page.img-headline %}
-    {{ page.title }}
-    {{ amsf_page_heading_type_img }}
-  {% elsif page.svg-headline %}
+  {% if page.heading-img %}
     {{ page.title }}
-    {{ amsf_page_heading_type_svg }}
+    {{ amsf_page_heading_img }}
   {% else %}
     {{ page.title }}<span class="dot dot--post"> </span>
   {% endif %}
 {% endcapture %}
 
 {% capture amsf_page_heading_class %}
-  {% if page.img-headline or page.svg-headline %}
+  {% if page.heading-img %}
     image-title
   {% endif %}
 {% endcapture %}
@@ -62,15 +93,17 @@
 
 <!-- Prepare for heading background -->
 {% capture amsf_page_heading_bg_image %}
-  {% assign protocal = page.heading-bg | match_regex: '^((?:https?:)?\/\/)' %}
-  {% if protocal == null %}
-    {% if page.heading-bg-local %}
-      background-image: url('{{ amsf_user_assets }}/{{ page.heading-bg }}');
+  {% if page.heading-bg %}
+    {% assign protocal = page.heading-bg | match_regex: '^((?:https?:)?\/\/)' %}
+    {% if protocal == null %}
+      {% if page.heading-bg-local %}
+        background-image: url('{{ amsf_user_assets }}/{{ page.heading-bg }}');
+      {% else %}
+        background-image: url('{{ site.file }}/{{ page.heading-bg }}');
+      {% endif %}
     {% else %}
-      background-image: url('{{ site.file }}/{{ page.heading-bg }}');
+      background-image: url('{{ page.heading-bg }}');
     {% endif %}
-  {% else %}
-    background-image: url('{{ page.heading-bg }}');
   {% endif %}
 {% endcapture %}
 
@@ -81,26 +114,32 @@
 {% endcapture %}
 
 {% capture amsf_page_heading_bg_size %}
-  {% if page.heading-bg-size %}
-    background-size: {{ page.heading-bg-size }};
-  {% else %}
-    background-size: cover;
+  {% if page.heading-bg %}
+    {% if page.heading-bg-size %}
+      background-size: {{ page.heading-bg-size }};
+    {% else %}
+      background-size: cover;
+    {% endif %}
   {% endif %}
 {% endcapture %}
 
 {% capture amsf_page_heading_bg_position %}
-  {% if page.heading-bg-position %}
-    background-position: {{ page.heading-bg-position }};
-  {% else %}
-    background-position: center center;
+  {% if page.heading-bg %}
+    {% if page.heading-bg-position %}
+      background-position: {{ page.heading-bg-position }};
+    {% else %}
+      background-position: center center;
+    {% endif %}
   {% endif %}
 {% endcapture %}
 
 {% capture amsf_page_heading_bg_repeat %}
-  {% if page.heading-bg-position %}
-    background-repeat: {{ page.heading-bg-repeat }};
-  {% else %}
-    background-repeat: no-repeat;
+  {% if page.heading-bg %}
+    {% if page.heading-bg-position %}
+      background-repeat: {{ page.heading-bg-repeat }};
+    {% else %}
+      background-repeat: no-repeat;
+    {% endif %}
   {% endif %}
 {% endcapture %}
 

_app/_posts/note/2014-02-01-custom-heading-background.md

@@ -3,7 +3,7 @@ layout: post
 title: Custom Heading Background
 category: note
 tags: curtana
-heading-bg: img/title-background-example.jpg
+heading-bg: img/heading-background-example.jpg
 heading-bg-local: true
 heading-bg-color: "#8141b1"
 heading-bg-size: "cover"

_app/_posts/note/2014-02-01-custom-heading-image.md

@@ -0,0 +1,36 @@
+---
+layout: post
+title: Custom Heading Image
+category: note
+tags: curtana
+heading-img: svg/heading-image-example.svg
+heading-img-local: true
+---
+
+This is an example of custom post heading image. You can simply add the following setting to your post [front-matter field](http://jekyllrb.com/docs/frontmatter/):
+
+```yaml
+heading-img: svg/svg-title-example.svg
+heading-img-local: true
+heading-img-width: 400
+```
+
+> In Almace Scaffolding v1.1.0, the original `svg-headline*`, and `img-headline*` options are deprecated.
+
+`heading-img`
+: Heading image filename, if a relative URL (non-external URL) is provided, the file will be prefixed with `site.file`.
+
+`heading-bg-local`
+: To avoid relative URL prefixed by `site.file`, you can set this option to `true` to prefix it with `amsf_user_assets`, then you can store your images in `_app/assets/`.
+
+`heading-img-width`
+: Set the width of your heading image. The value will be converted to viewport unit automatically. ie. `heading-img-width: 400` will be converted to `width: 40vw`;
+
+
+> **Pro Tips**: Keep a `<title>` tag for your SVG can help Safari generate correct post title for its Reader mode:
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg">
+<title>Cool Article</title>
+…
+```

_app/_posts/note/2014-02-01-svg-post-title.md

@@ -2,20 +2,14 @@
 layout: post
 title: SVG Post Title
 category: note
-tags: curtana
-svg-headline: svg/svg-title-example.svg
-svg-headline-width: 400
-svg-headline-height: 86
-scheme-text: "#b93b00"
-scheme-link: "#9b3100"
-scheme-hover: "#ffe000"
-scheme-code: "#ffe000"
-scheme-bg: "#ff9610"
+hidden: true
 ---
 
+> The content of this post in deprecated, please see [Custom Heading Image]({{ amsf_site_base}}/custom-heading-image.html) for more info.
+
 This is an example of custom post title using SVG image. You can simply add the following setting to your post [front-matter field](http://jekyllrb.com/docs/frontmatter/):
 
-```
+```yaml
 svg-headline: svg/cool-title.svg
 svg-headline-width: 400
 svg-headline-height: 86
@@ -32,8 +26,8 @@ img-headline-width: 500
 
 > **Pro Tips**: Keep a `<title>` tag for your SVG can help Safari generate correct post title for its Reader mode:
 
-```
-<svg xmlns="http://www.w3.org/2000/svg" width="2175" height="465" viewBox="0 0 2175 465">
+```html
+<svg xmlns="http://www.w3.org/2000/svg">
 <title>Cool Article</title>
 …
 ```