header.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!-- TODO this file has become a mess, refactor it -->
  2. {% assign date_format = site.date_format | default: "%B %-d, %Y" %}
  3. {% if page.cover-img or page.title %}
  4. {% if page.cover-img %}
  5. <div id="header-big-imgs" data-num-img={% if page.cover-img.first %}{{ page.cover-img.size }}{% else %}1{% endif %}
  6. {% for bigimg in page.cover-img %}
  7. {% assign imgnum = forloop.index %}
  8. {% for imginfo in bigimg %}
  9. {% if imginfo[0] %}
  10. data-img-src-{{ imgnum }}="{{ imginfo[0] | absolute_url }}"
  11. data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
  12. {% else %}
  13. data-img-src-{{ imgnum }}="{{ imginfo | absolute_url }}"
  14. {% endif %}
  15. {% endfor %}
  16. {% endfor %}
  17. ></div>
  18. {% endif %}
  19. <header class="header-section {% if page.cover-img %}has-img{% endif %}">
  20. {% if page.cover-img %}
  21. <div class="big-img intro-header">
  22. <div class="container-md">
  23. <div class="row">
  24. <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
  25. <div class="{{ include.type }}-heading">
  26. <h1>{% if page.title %}{{ page.title | strip_html }}{% else %}<br/>{% endif %}</h1>
  27. {% if page.subtitle %}
  28. {% if include.type == "page" %}
  29. <hr class="small">
  30. <span class="{{ include.type }}-subheading">{{ page.subtitle | strip_html }}</span>
  31. {% else %}
  32. <h2 class="{{ include.type }}-subheading">{{ page.subtitle | strip_html }}</h2>
  33. {% endif %}
  34. {% endif %}
  35. {% if include.type == "post" %}
  36. <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
  37. {% if page.last-updated %}
  38. <span class="post-meta">
  39. <span class="d-none d-md-inline middot">&middot;</span>
  40. Last updated {{ page.last-updated | date: date_format }}
  41. </span>
  42. {% endif %}
  43. {% if page.readtime %}
  44. {% include readtime.html %}
  45. {% endif %}
  46. {% endif %}
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <span class='img-desc'></span>
  52. </div>
  53. {% endif %}
  54. <div class="intro-header no-img">
  55. <div class="container-md">
  56. <div class="row">
  57. <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
  58. <div class="{{ include.type }}-heading">
  59. <h1>{% if page.title %}{{ page.title | strip_html }}{% else %}<br/>{% endif %}</h1>
  60. {% if page.subtitle %}
  61. {% if include.type == "page" %}
  62. <hr class="small">
  63. <span class="{{ include.type }}-subheading">{{ page.subtitle | strip_html }}</span>
  64. {% else %}
  65. <h2 class="{{ include.type }}-subheading">{{ page.subtitle | strip_html }}</h2>
  66. {% endif %}
  67. {% endif %}
  68. {% if include.type == "post" %}
  69. <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
  70. {% if page.last-updated %}
  71. <span class="post-meta">
  72. <span class="d-none d-md-inline middot">&middot;</span>
  73. Last updated {{ page.last-updated | date: date_format }}
  74. </span>
  75. {% endif %}
  76. {% if page.readtime %}
  77. {% include readtime.html %}
  78. {% endif %}
  79. {% endif %}
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </header>
  86. {% else %}
  87. <div class="intro-header"></div>
  88. {% endif %}