Question

我正在尝试在使用Django CMS构建的网站上设置标头的可编辑背景图片。

尝试过Using django-cms, how can I allow the user to specify a background image的说明，但在生成的HTML代码中仍然出现“ background-image：url（''）”。

这是我添加的尝试添加背景图像的代码：

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

settings.py的结尾：

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

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中模板标记缩略图的用法。在这里，它将图片的大小限制为1000 x 500像素。

这将为您的CMS安装添加一个简单的插件。通过编辑占位符字段，它提供了一个名为Cover的插件。从那里选择一个图像，它将作为标题的背景呈现。

如何在django-cms中添加背景图像？

1 个答案: