Как добавить фоновое изображение в django-cms? - PullRequest
Новая
       22

Как добавить фоновое изображение в django-cms?

0 голосов
/ 20 апреля 2019

Я пытаюсь установить редактируемое фоновое изображение заголовка на моем сайте, построенном с использованием Django CMS.

Пробные инструкции от Используя django-cms, как я могу разрешить пользователю указывать фоновое изображение , но все равно получил "background-image: url ('')" в моем полученном HTML-коде.

Вот код, который я добавляю, чтобы попытаться добавить фоновое изображение:

  1. context_processors.py в корне проекта: 
from cms.models.pluginmodel import CMSPlugin

def cover_image(request):
    page = request.current_page
    if page:
        cover_image_plugin = CMSPlugin.objects.filter(
            placeholder__page=page,
            placeholder__slot='cover_image',
            plugin_type='FilerImagePlugin',
        ).first()
        if cover_image_plugin:
            return {'cover': cover_image_plugin.filerimage.image}
            #return {'cover': cover_image_plugin.get_plugin_instance()[0]}
    return {}
  1. Конец settings.py:
TEMPLATES[0]['OPTIONS']['context_processors'].append('context_processors.cover_image')
  1. base.html: 
...
{% placeholder "cover_image" %}
    <header class="masthead" style="background-image: url('{{ cover.url|urlencode }}')">
...

Может ли кто-нибудь помочь мне исправить это и заставить работать фоновое изображение?

1 Ответ

0 голосов
/ 22 апреля 2019

В вашем проекте добавьте к вашему models.py: 

from cms.models import CMSPlugin
from filer.fields.image import FilerImageField

class MyCoverModel(CMSPlugin):
    cover = FilerImageField(
        null=True,
        blank=True,
        related_name='header_logo',
    )

в cms_plugins.py добавьте: 

from cms.plugin_base.CMSPluginBase
from cms.plugin_pool import plugin_pool
from .models import MyCoverModel

class CoverPlugin(CMSPluginBase):
    name = "Cover"
    model = MyCoverModel
    render_template = 'my_cover.html'

plugin_pool.register_plugin(CoverPlugin)

и в templates/my_cover.html добавьте: 

{% load thumbnail %}

{% thumbnail instance.cover 1000x500 crop upscale as thumb %}
<header class="masthead" style="background-image: url('{{ thumb.url }}'); width={{ thumb.width }}; height={{ thumb.height }};"></header>

Обратите внимание на использование эскиза шаблона тега из приложения easy-thumbnails .Здесь он ограничивает размер изображения до 1000 на 500 пикселей.

Это добавляет простой плагин к вашей установке CMS.Редактируя поле заполнителя, он предлагает плагин с именем Cover.Выберите изображение оттуда, и оно будет отображаться в качестве фона заголовка.

...