ブログのヘッダ周りを調整する

ヘッダの画像をグローバルで管理できるようにした。

supertableにフィールドを追加した。

これで差し替えたい時は管理画面から差し替えられるようになった。

ついでにヘッダ周りのblockの構成を変更した。

_layout_bootstrap.twig をこんな感じに変更して、新たに contentHeader ブロックを作った。

<header class="masthead" style="background-image: url('{{homebgimage_url}}')">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
{% block contentHeader %}
<div class="site-heading">
  <h1>{{ siteName }}</h1>
  <span class="subheading">Craft CMS</span>
</div>
{% endblock %}
      </div>
    </div>
  </div>
</header>

一覧や詳細とかでは

{% block contentHeader %}
<div class="site-heading">
  <h1>{{ siteName }}</h1>
  <span class="subheading">Craft CMS</span>
</div>
{% endblock %}

こんな感じのブロックを読み込ませるようにしてみた。

とりあえずこれで問題なさそうだけど、なんかもう少しスマートにかけそうな気もする。

ヘッダ画像はこんな感じでグローバルから取り出すようにした。

{% set homebgimage_url %}{% spaceless %}
{% set relatedAssets = site_config.globalSupertable.home_bg.all() %}
{% if relatedAssets|length %}{% for homebgimage in relatedAssets %}
{{ homebgimage.url }}
{% endfor %}{% endif %}
{% endspaceless %}{% endset %}

この際なので、全ページ右カラムありにした。

いいか悪いかはおいといて、統一させておけば良さそうかな、と。

右カラムは _layout_bootstrap.twig で共通で読み込んでるんだけど、ここはちゃんとキャッシュとして明示した方がいいのかな。

_layout_bootstrap.twig 抜粋

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 mx-auto">
{% block mainContent %}
    <!-- Page Header -->
    <header class="masthead" style="background-image: url('{{homebgimage_url}}')">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="post-heading">
              <h1>{{ entry.title }}</h1>
              <h2 class="subheading">Problems look mighty small from 150 miles up</h2>
              <span class="meta">Posted by
                <a href="#">Start Bootstrap</a>
                on August 24, 2018</span>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- Post Content -->
    <article>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            本文
          </div>
        </div>
      </div>
    </article>
{% endblock %}
    </div>
    <div class="col-lg-4 col-md-12 mx-auto">
      {% include '_parcials/mod_monthlyarchives' %}
    </div>
  </div>
</div>