From 92cbd7bdeefa64ab55d08a363ec2a8e428562d45 Mon Sep 17 00:00:00 2001 From: Tunghsiao Liu Date: Fri, 6 Jan 2017 19:06:12 +0800 Subject: [PATCH] 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. --- .../themes/curtana/layouts/post.html | 89 +++++++++++++----- .../2014-02-01-custom-heading-background.md | 2 +- .../note/2014-02-01-custom-heading-image.md | 36 +++++++ _app/_posts/note/2014-02-01-svg-post-title.md | 18 ++-- ...ple.jpg => heading-background-example.jpg} | Bin _app/assets/svg/heading-image-example.svg | 1 + _app/assets/svg/svg-title-example.svg | 1 - 7 files changed, 108 insertions(+), 39 deletions(-) create mode 100644 _app/_posts/note/2014-02-01-custom-heading-image.md rename _app/assets/img/{title-background-example.jpg => heading-background-example.jpg} (100%) create mode 100644 _app/assets/svg/heading-image-example.svg delete mode 100644 _app/assets/svg/svg-title-example.svg diff --git a/_app/_includes/themes/curtana/layouts/post.html b/_app/_includes/themes/curtana/layouts/post.html index 146673ec8..f89902459 100644 --- a/_app/_includes/themes/curtana/layouts/post.html +++ b/_app/_includes/themes/curtana/layouts/post.html @@ -2,6 +2,40 @@ {{ amsf_page_css }} +{% capture amsf_page_heading_img %} + {% assign protocal = page.heading-img | match_regex: '^((?:https?:)?\/\/)' %} + {% if protocal == null %} + {% if page.heading-img-local %} + + {% else %} + + {% endif %} + {% else %} + + {% endif %} +{% endcapture %} + {% capture amsf_page_heading_type_img %} {% 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 @@ {% 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 %} diff --git a/_app/_posts/note/2014-02-01-custom-heading-background.md b/_app/_posts/note/2014-02-01-custom-heading-background.md index d822817d3..a6bab66aa 100644 --- a/_app/_posts/note/2014-02-01-custom-heading-background.md +++ b/_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" diff --git a/_app/_posts/note/2014-02-01-custom-heading-image.md b/_app/_posts/note/2014-02-01-custom-heading-image.md new file mode 100644 index 000000000..85b50a6b2 --- /dev/null +++ b/_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 `` 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 +… +``` diff --git a/_app/_posts/note/2014-02-01-svg-post-title.md b/_app/_posts/note/2014-02-01-svg-post-title.md index d991808c7..f9143b6bb 100644 --- a/_app/_posts/note/2014-02-01-svg-post-title.md +++ b/_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 `` 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 … ``` diff --git a/_app/assets/img/title-background-example.jpg b/_app/assets/img/heading-background-example.jpg similarity index 100% rename from _app/assets/img/title-background-example.jpg rename to _app/assets/img/heading-background-example.jpg diff --git a/_app/assets/svg/heading-image-example.svg b/_app/assets/svg/heading-image-example.svg new file mode 100644 index 000000000..1ee8fd023 --- /dev/null +++ b/_app/assets/svg/heading-image-example.svg @@ -0,0 +1 @@ +Custom Heading Image diff --git a/_app/assets/svg/svg-title-example.svg b/_app/assets/svg/svg-title-example.svg deleted file mode 100644 index c9ef68701..000000000 --- a/_app/assets/svg/svg-title-example.svg +++ /dev/null @@ -1 +0,0 @@ -Kai Series \ No newline at end of file