如何在django-cms中添加背景圖片？

Question

我正在嘗試在使用Django CMS構建的網站上設置標題的可編輯背景圖像。

嘗試使用django-cms的指令，我如何允許用戶指定背景圖像 ，但仍然在我生成的HTML代碼中得到“background-image：url（''）”。

這是我添加的代碼，用於嘗試添加背景圖像：

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 {}

2. settings.py結束：

TEMPLATES[0]['OPTIONS']['context_processors'].append('context_processors.cover_image')

3. base.html文件：

...
{% placeholder "cover_image" %}
    <header class="masthead" style="background-image: url('{{ cover.url|urlencode }}')">
...

有人可以幫我解決它並使背景圖像工作嗎？

Answer 1

在您的項目中，添加到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中templatetag縮略圖的用法。 在這里，它將圖像的大小限制為1000 x 500像素。

這為CMS安裝添加了一個簡單的插件。 通過編輯占位符字段，它提供了一個名為Cover的插件。 從那里選擇一個圖像，它將被渲染為標題的背景。