Статья Фоновые изображения

Автор - zabariap

Из подраздела - Апгрейд

При попытке создания блока на странице для отображения списка популярных статей столкнулся с проблемой использования превью статьи в качестве фонового изображения - не удавалось получить ее адрес и вставить в свойство "background-image: url({{адрес картинки из поля модели}}).

Решая эту проблему выявил, что сортируя статьи по рейтингу в конструкции 

@register.simple_tag
def get_popular_articles_for_week():

   popular = ArticleStatistic.objects.filter(
       # отфильтровываем записи за последние 7 дней
       date__range=[timezone.now() - timezone.timedelta(7), timezone.now()]
   ).values(
       # Забираем интересующие нас поля, а именно id и заголовок
       # К сожалению забрать объект по внешнему ключу в данном случае не получится
       # Только конкретные поля из объекта
       'article_id', 'article__article_title', 'views', 'article__article_thumbnail', 'article__article_section__section_url', 'article__slug'
   ).annotate(
       # Суммируем записи по просмотрам
       sum_views=Sum('views')
   ).order_by(
       # отсортируем записи по убыванию
       '-sum_views')[:5]    # Заберём последние пять записей

Я получал поле thumbnail, которое в  url({{адрес картинки из поля модели}}) не вставлялось как ссылка в кавычках, а как текст и не работала.

Если использовать конструкцию

articles = Article_Blog.objects.annotate(
       total_view_count=Count('views_blog', filter=Q(views_blog__viewed_on__gte=start_date)),
       today_view_count=Count('views_blog', filter=Q(views_blog__viewed_on__gte=today_start))
      
   ).prefetch_related('views_blog')
   # сортируем статьи по количеству просмотров в порядке убывания, сначала по просмотрам за сегодня, затем за все время

   popular_articles = articles.order_by('-total_view_count', '-today_view_count')[:10]

и обращение 

background-image: url({{article.get_thumbnail}});

где 

  @property
   def get_thumbnail(self):
       """
       Получение аватара при отсутствии загруженного
       """
       if not self.thumbnail:
           return '/media/images/placeholder.png'
       return self.thumbnail.url

Примечание: Атрибутurlу поля модели (например,ImageField) генерирует URL-адрес изображения относительноMEDIA_URL. Это означает, что еслиMEDIA_URLнастроен правильно, пользователь сможет загрузить изображение через браузер.

  Разница между первым и вторым вариантами в том, что:

В первом случае загружаются только выбранные поля модели, что существенно снижется нагрузку на сервер и базу данных, а во втором случае загружается вся модель и связные данные.

Я выбрал первый вариант.

Чтобы отображалась фоновая картинка мне нужно было получить свойство стиля в следующем формате "background-image: url("адрес картинки").

Как я писал выше, если использовать {{поле модели}}, то получал бы "background-image: url(поле модели) и картинка не загружается.

Внутри {% for article in popular_articles %}

указываю скрытое поле

 <input type="hidden" id="myHiddenField{{ forloop.counter }}" name="my_hidden_field" value={{article.article__article_thumbnail}}> в котором записан текст адреса картинки.

Далее прописываю     <div  class= "im" id="im{{ forloop.counter }}" >  <!--    background: #0f50a2;class="video"--> блок в который будет выводиться фоновое изображение.

Далее скрипт для чтения скрытого поля, формирования нужного формата ссылки на картинку и подстановка в блок для фонового изображения.

    <script>
                            var imageU = 'media/';
                            var hiddenValue = document.getElementById('myHiddenField{{ forloop.counter }}').value;
                            var imageURL = imageU + hiddenValue;
                           var imageElement = document.getElementById('im{{ forloop.counter }}');
                           imageElement.style.backgroundImage =  "url(" + imageURL + ")";;
                          
     </script>

Данное решение позволило отображать фоновое изображение и не загружать всю информацию из модели.

Примечание: Статьи вывобятся в цикле и, чтобы не создавать конфликта в наименовании id я использую {{ forloop.counter }}, который добавляет индекс итерации.