django備忘録23 Logo Image in Navbar + Promo Video & Images

Logo Image in Navbar

• navbarにlogo imageを挿入する 忘れずに、load staticfilesも挿入する。

navbar.html

{% load staticfiles %}
...
      <a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'img/logo_design_lab.png'%}" /></a>
...

Promo Video & Images

• youtube動画の埋め込みが可能（ブラックボックスも削除してOK）

home.html

...
            <div class="col-sm-6">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/KsLHt3D_jsE" frameborder="0" allowfullscreen></iframe>
            </div>
...

• もしイメージを挿入する場合は、class='img-responsive'を使うと便利。サイズを自動で調整してくれる。

home.html

            <div class="col-sm-6">
                <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/KsLHt3D_jsE" frameborder="0" allowfullscreen></iframe> -->
                <img src="http://***" class='img-responsive'/>
            </div>

• 試しに、contentのところに画像を挿入してみる。

...
    <div class="col-sm-3">
        <p class='lead text-align-center'>Simple</p>
        <img src='{% static "img/north-shore-oahu.jpeg" %}' class='img-responsive'/>
    </div>
...