diff --git a/TODOS.md b/TODOS.md index 63908f619..00cce28b0 100644 --- a/TODOS.md +++ b/TODOS.md @@ -1,3 +1,4 @@ # Todos -- try load-grunt-config +- Try load-grunt-config +- Cleanup thumb fetching method for `amsf_page_thumb` in `_amsf.html` diff --git a/_app/_includes/_amsf.html b/_app/_includes/_amsf.html index 703b07eee..beea2a650 100644 --- a/_app/_includes/_amsf.html +++ b/_app/_includes/_amsf.html @@ -211,6 +211,23 @@ {{ hero_image }} {% endcapture %} +{% comment %} + Page background image + Regex: https://regex101.com/r/AmwvYE/2 +{% endcomment %} +{% capture amsf_page_heading_bg_image_src %} + {% assign protocal = page.heading-bg | match_regex: '^((?:https?:)?\/\/)' %} + {% if protocal == null %} + {% if page.heading-bg-local %} + {{ amsf_user_assets | prepend: amsf_site_base }}/{{ page.heading-bg }} + {% else %} + {{ site.file }}/{{ page.heading-bg }} + {% endif %} + {% else %} + {{ page.heading-bg }} + {% endif %} +{% endcapture %} + {% capture amsf_page_thumb %} {% if page.thumb_force_logo %} {{ amsf_site_logo }} @@ -218,6 +235,8 @@ {{ site.file }}/thumb/{{ page.thumb }} {% elsif page.thumb_url %} {{ page.thumb_url }} + {% elsif page.heading-bg %} + {{ amsf_page_heading_bg_image_src }} {% else %} {{ amsf_post_first_image }} {% endif %} diff --git a/_app/_includes/themes/curtana/layouts/post.html b/_app/_includes/themes/curtana/layouts/post.html index 3732cd33f..146673ec8 100644 --- a/_app/_includes/themes/curtana/layouts/post.html +++ b/_app/_includes/themes/curtana/layouts/post.html @@ -60,11 +60,65 @@ {% endif %} {% endcapture %} + +{% 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 }}'); + {% else %} + background-image: url('{{ site.file }}/{{ page.heading-bg }}'); + {% endif %} + {% else %} + background-image: url('{{ page.heading-bg }}'); + {% endif %} +{% endcapture %} + +{% capture amsf_page_heading_bg_color %} + {% if page.heading-bg-color %} + background-color: {{ page.heading-bg-color }}; + {% endif %} +{% endcapture %} + +{% capture amsf_page_heading_bg_size %} + {% if page.heading-bg-size %} + background-size: {{ page.heading-bg-size }}; + {% else %} + background-size: cover; + {% endif %} +{% endcapture %} + +{% capture amsf_page_heading_bg_position %} + {% if page.heading-bg-position %} + background-position: {{ page.heading-bg-position }}; + {% else %} + background-position: center center; + {% endif %} +{% endcapture %} + +{% capture amsf_page_heading_bg_repeat %} + {% if page.heading-bg-position %} + background-repeat: {{ page.heading-bg-repeat }}; + {% else %} + background-repeat: no-repeat; + {% endif %} +{% endcapture %} + +{% capture amsf_page_heading_bg_text %} + {% if page.heading-bg-text %} + color: {{ page.heading-bg-text }}; + {% endif %} +{% endcapture %} + +{% capture amsf_page_heading_bg %} + style="{{ amsf_page_heading_bg_image | strip }} {{ amsf_page_heading_bg_color | strip }} {{ amsf_page_heading_bg_size | strip }} {{ amsf_page_heading_bg_position | strip }} {{ amsf_page_heading_bg_repeat | strip }} {{ amsf_page_heading_bg_text | strip }}" +{% endcapture %} +
-
+

{{ amsf_page_heading }} diff --git a/_app/_posts/note/2014-02-01-custom-heading-background.md b/_app/_posts/note/2014-02-01-custom-heading-background.md new file mode 100644 index 000000000..bfcd51ed4 --- /dev/null +++ b/_app/_posts/note/2014-02-01-custom-heading-background.md @@ -0,0 +1,46 @@ +--- +layout: post +title: Custom Heading Background +category: note +tags: curtana +heading-bg: img/title-background-example.jpg +heading-bg-local: true +heading-bg-color: "#8141b1" +heading-bg-size: "cover" +heading-bg-position: "center bottom" +heading-bg-repeat: "no-repeat" +heading-bg-text: "#fff" +--- + +This is an example of custom heading background. You can simply add the following setting to your post [front-matter field](http://jekyllrb.com/docs/frontmatter/): + +```yaml +heading-bg: img/heading-background-tile.jpg +heading-bg-local: true +heading-bg-color: "#8141b1" +heading-bg-size: "100px 100px" +heading-bg-position: "center bottom" +heading-bg-repeat: "repeat" +heading-bg-text: "#fff" +``` + +`heading-bg` +: Background image filename, it a relative URL (non-external URI) 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`. + +`heading-bg-color` +: Background color, recommend setting its value matches your image color tone. + +`heading-bg-size` +: Background size, default value is `cover`. + +`heading-bg-position` +: Background position, default value is `center center`. + +`heading-bg-repeat` +: Background repeat, default value is `no-repeat`. + +`heading-bg-text` +: Text color in heading, set it based on your background image. 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..7733bf77a 100644 --- a/_app/_posts/note/2014-02-01-svg-post-title.md +++ b/_app/_posts/note/2014-02-01-svg-post-title.md @@ -15,7 +15,7 @@ scheme-bg: "#ff9610" 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 @@ -25,14 +25,14 @@ Image defined for `svg-headline` should be stored at `_app/assets/svg/cool-title There's also an option for common raster images, but please note that these files should be stored at where you define `site.file`. -``` +```yaml img-headline: cool-title.png img-headline-width: 500 ``` > **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" width="2175" height="465" viewBox="0 0 2175 465"> <title>Cool Article …