single_news

{% extends 'home/base.html' %} {% load static %} {%block content%}
<script
  async
  defer
  crossorigin="anonymous"
  src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0"
></script>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-9 p-0 mt-4">
      <div class="owl-two owl-carousel owl-theme">
        {% for p in headline_news.images_set.all %}
        <div class="item">
          <img
            src="{{p.image.url}}"
            alt=""
            style="width: 100%; object-fit: contain;"
          />
          <!-- Selectors -->
          <div class="selectors">
            <ul>
              <li>
                <input id="c1" />
                <label for="c1"
                  ><a
                    href="http://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}"
                    target="_blank"
                    ><i class="fab fa-facebook fa-2x"></i></a
                ></label>
                <!-- <label for='c1'><i class="fab fa-facebook fa-2x"></i></label></a> -->
              </li>
              <li>
                <input id="c2" />
                <label for="c2"
                  ><a
                    href="http://twitter.com/share?url={{ request.build_absolute_uri }}"
                    target="_blank"
                    ><i class="fab fa-twitter fa-2x"></i></a
                ></label>
              </li>
              <li>
                <input id="c3" />
                <label for="c3"><i class="fab fa-linkedin fa-2x"></i></label>
              </li>
            </ul>
            <button><i class="fas fa-share-alt"></i></button>
          </div>
          <!-- selectors end -->
        </div>
        {% endfor %}
      </div>

      <div class="px-4">
        <div id="news">
          <h4 class="pt-4">{{headline_news.Heading}}</h4>
          <i class="fas fa-envelope mr-2"></i>
          <span> {{headline_news.timestamp}}</span>
          <i class="fas fa-user ml-4 mr-2"></i>
          <span> {{headline_news.author}}</span>
          <hr />
          <div class="news-content">
            <!-- ==================== -->
            <p class="text-justify" id="single-news-content">
              {{headline_news.News}}
            </p>
            <!-- ==================== -->
          </div>
        </div>
        <h5 class="mb-3 text-center">Comments</h5>
        <div
          class="fb-comments"
          data-href="http://localhost:8000/news/{{headline_news.slug}}"
          data-width="15px"
          data-numposts="5"
        ></div>
      </div>
      <div class="banner-spot clearfix">
        <div class="banner-img" style="width: 100%">
          <img
            src="https://designertask.com/wp-content/uploads/2018/05/soundcloud-banner-size.png"
            alt=""
            class="img-fluid"
            style="height: 100px; object-fit: cover;"
          />
        </div>
        <!-- end banner-img -->
      </div>
      <!-- end banner -->
      <div class="section-title">
        <h3 class="color-yellow">
          <span class="title">You May Also Like</span>
        </h3>
      </div>
      <!-- end title -->
      <div class="row">
        {% for items in recommended_news %}
        <div class="col-lg-4">
          <div class="blog-box">
            <a href="/news/{{items.slug}}" title="">
              <div class="post-media">
                <img
                  src="{{ items.images_set.first.image.url }}"
                  alt=""
                  class="img-fluid"
                  style="height: 200px; object-fit: cover;"
                />
                <div class="hovereffect">
                  <span class="videohover"></span>
                </div>
                <!-- end hover -->
              </div>
              <!-- end media -->
            </a>

            <div class="blog-meta">
              <h4>
                <a href="/news/{{items.slug}}" title="">{{items.Heading}}</a>
              </h4>
              <small
                ><a href="blog-category-01.html" title=""
                  >{{items.category}}</a
                ></small
              >
              <small
                ><a href="blog-category-01.html" title=""
                  >{{items.timestamp}}</a
                ></small
              >
            </div>
            <!-- end meta -->
          </div>
          <!-- end blog-box -->

          <hr class="invis" />
        </div>
        <!-- end col -->

        {% endfor %}
      </div>
      <!-- row -->
    </div>
    <!-- start col -->

    <div class="col-lg-3 mt-4">
      <div class="sidebar">
        <div class="widget">
          <div class="section-title">
            <h3 class="color-green">
              <span class="title">Recent</span>
            </h3>
          </div>
          <!-- end title -->

          <div class="blog-list-widget">
            <div class="list-group">
              {% for items in recommended_news %}

              <a
                href="{{items.slug}}"
                class="list-group-item list-group-item-action flex-column align-items-start"
              >
                <div class="w-100 justify-content-between">
                  <img
                    src="{{ items.images_set.first.image.url }}"
                    alt=""
                    class="img-fluid float-left"
                  />
                  <h5 class="mb-1">{{items.Heading}}</h5>
                  <small>12 Jan, 2016</small>
                </div>
              </a>
              {% endfor %}
            </div>
          </div>
          <!-- end blog-list -->
        </div>
        <!-- end widget -->
        <div class="widget">
          <h2 class="widget-title">Ad</h2>
          <div class="banner-spot clearfix">
            <div class="banner-img">
              <img
                src="https://designertask.com/wp-content/uploads/2018/05/soundcloud-banner-size.png"
                alt=""
                class="img-fluid"
              />
            </div>
            <!-- end banner-img -->
          </div>
          <!-- end banner -->
        </div>
        <!-- end widget -->
        <div class="widget">
          <div class="section-title">
            <h3 class="color-green">
              <span class="title">Popular</span>
            </h3>
          </div>
          <!-- end title -->
          {% for items in recommended_news%}
          <div class="blog-box">
            <div class="post-media">
              <a href="{{items.slug}}" title="">
                <img
                  src="{{ items.images_set.first.image.url }}"
                  alt=""
                  class="img-fluid"
                />
                <div class="hovereffect">
                  <span class="videohover"></span>
                </div>
                <!-- end hover -->
              </a>
            </div>
            <!-- end media -->
            <div class="blog-meta">
              <h4><a href="{{items.slug}}" title="">{{items.Heading}}</a></h4>
              <small
                ><a href="blog-category-01.html" title=""
                  >{{items.category}}</a
                ></small
              >
              <small
                ><a href="blog-category-01.html" title=""
                  >{{items.timestamp}}</a
                ></small
              >
            </div>
            <!-- end meta -->
          </div>
          <!-- end blog-box -->

          <hr class="invis" />
          {% endfor %}
        </div>
      </div>
    </div>
    <!-- end col -->
  </div>
</div>
<!-- <script src="{% static 'owlcarousel/script.js' %}" type="text/JavaScript"></script> -->
<script
  src="{% static 'js/owl.carousel.min.js' %}"
  type="text/JavaScript"
></script>
<script src="{% static 'js/all_news.js' %}" type="text/JavaScript"></script>
<script src="{% static 'js/jquery.min.js' %}" type="text/JavaScript"></script>
<script type="text/javascript">
  var newsId = "{{headline_news.id}}";
</script>
<script src="{% static 'new-js/tracker.js' %}" type="text/JavaScript"></script>
{% endblock %}