読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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

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>
...