Set image and title dynamically

ungleich_page/cms_plugins.py

@@ -1,14 +1,24 @@
+from cms.models.pluginmodel import CMSPlugin
 from cms.plugin_base import CMSPluginBase
 from cms.plugin_pool import plugin_pool
-from cms.models.pluginmodel import CMSPlugin
+
+from .models import UngelichPicture
 
 
 @plugin_pool.register_plugin
 class SectionWithImagePlugin(CMSPluginBase):
-    model = CMSPlugin
+    model = UngelichPicture
     render_template = "ungleich_page/glasfaser/section_with_image.html"
     cache = False
 
+    def render(self, context, instance, placeholder):
+        context.update({
+            'image': instance.image,
+            'object': instance,
+            'placeholder': placeholder
+        })
+        return context
+
 
 @plugin_pool.register_plugin
 class SectionContact(CMSPluginBase):

ungleich_page/models.py

@@ -1,3 +1,13 @@
-# from django.db import models
+from cms.models.pluginmodel import CMSPlugin
+from django.db import models
+from filer.fields.image import FilerImageField
 
-# Create your models here.
+
+class UngelichPicture(CMSPlugin):
+    image = FilerImageField(
+        null=True,
+        blank=True,
+        related_name="image",
+        on_delete=models.SET_NULL
+    )
+    title = models.CharField(max_length=200)

ungleich_page/templates/ungleich_page/glasfaser/section_with_image.html

@@ -1,10 +1,7 @@
-<div class="intro-header" id="home">
-  <div class="price-tag-container">
-    <div class="price-tag"></div>
-  </div>
+<div class="intro-header" style="background:url({{ image.url }}) no-repeat center center" id="home">
   <div class="high-speed">
     <div class="high-speed-border"></div>
-      <h1>TEST TEST</h1>
+      <h1>{{ object.title }}</h1>
     <div class="high-speed-border"></div>
   </div>
 </div>