2

I'm trying to set editable background image of header on my site built using Django CMS.

Tried instructions from Using django-cms, how can I allow the user to specify a background image , but still got "background-image: url('')" in my resulting HTML code.

Here is code that I add to try to add backgroung image:

  1. context_processors.py in root of project:
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. End of 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 }}')">
...

Could anybody help me to fix it and to make background image work?

Dmitriy Vinokurov
  • 365
  • 1
  • 6
  • 28
  • does `{{ cover }}` print anything if you use it in the template? – Aman Garg Apr 20 '19 at 17:26
  • @AmanGarg, no, nothing – Dmitriy Vinokurov Apr 20 '19 at 18:14
  • Then the issue is in your `context_processors.py`. You should debug each line and check if your `cover_image()` is returning something or not. – Aman Garg Apr 20 '19 at 18:19
  • 1
    This isn't really how plugins should be used. If you had a plugin for this, you'd add the `placeholder` to the template like you have, but then the plugin's own template & `render` would pass `cover` to the context and include the markup. Based on what you've included you should probably do this as a page extension. You could provide an image for each page by extending the page model; http://docs.django-cms.org/en/latest/how_to/extending_page_title.html – markwalker_ Apr 20 '19 at 21:48
  • @markwalker_, thanks for help. Tried to use the manual that you've referenced. Practically all is OK. I've created app with page extension and only bad thing is that something is wrong with paths. In template I use "{% static request.current_page.coverimageextension.image.url %}" and in resulting HTML I get "/static/media/cover_images/Controversial-mountain-names-featimg_mod.jpg", but image is at another path - "/data/media/cover_images/Controversial-mountain-names-featimg_mod.jpg". In models.py I use "image = models.ImageField(upload_to='cover_images')". Could you please help me with paths? – Dmitriy Vinokurov Apr 21 '19 at 17:24

1 Answers1

3

In your project, add to your 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',
    )

in cms_plugins.py add:

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)

and in templates/my_cover.html add:

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

Note the usage of templatetag thumbnail from the app easy-thumbnails. Here it restricts the size of the image to 1000 by 500 pixels.

This adds a simple plugin to your CMS installation. By editing the placeholder field, it offers a plugin named Cover. Choose an image from there and it will be rendered as the header's background.

jrief
  • 1,516
  • 13
  • 9