Add og image to section view

froide_govplan/templates/froide_govplan/plan_og.html

@@ -26,11 +26,14 @@ body {
   <div class="d-flex flex-column flex-grow-1 bg-translucent">
     <div class="p-5 d-flex align-items-center flex-1 h-100">
       <h3>
+        {% block tagline %}
         {{ object.title|truncatechars:100 }}
+        {% endblock %}
       </h3>
     </div>
     <div class="pb-5 px-5 mt-auto">
       <div class="row justify-content-between align-items-center">
+        {% block bottom_row %}
         <div class="col-4">
           <div class="badge badge-{{ object.get_status_css }} p-3 d-inline-flex">
             <i class="fa fa-circle mr-3"></i>
@@ -51,6 +54,7 @@ body {
             </div>
           {% endif %}
         </div>
+        {% endblock bottom_row %}
         <div class="col-auto ml-auto">
           <img height="80" src="https://static.frag-den-staat.de/static/img/header_logo.580ed694906e.svg" alt="FragDenStaat.de"/>
         </div>

froide_govplan/templates/froide_govplan/section.html

@@ -5,9 +5,18 @@
 {% load cms_tags %}
 {% load follow_tags %}
 {% load thumbnail %}
+{% load fds_ogimage %}
 
 {% block title %}{{ object.title }}{% endblock %}
 
+{% block meta %}
+  {% include "snippets/meta.html" %}
+
+  {% url 'govplan:section_og' gov=object.government.slug section=object.slug as section_og_path %}
+  {% ogimage_url path=section_og_path template="froide_govplan/section_og.html" as og_image_url %}
+  {% include "fds_cms/social_meta.html" with object=object title=object.title description=object.description image_url=og_image_url %}
+{% endblock %}
+
 {% block govplan_breadcrumbs %}
 <li class="breadcrumb-item active" aria-current="page">
   <a href="{{ object.get_absolute_url }}">{{ object.title }}</a>

froide_govplan/templates/froide_govplan/section_og.html

@@ -0,0 +1,18 @@
+{% extends "froide_govplan/plan_og.html" %}
+
+{% load govplan %}
+
+{% block tagline %}Themenbereich {{ object.title }}{% endblock %}
+
+{% block bottom_row %}
+  {% get_plan_progress plans as progress %}
+  <div class="col-7">
+    <div class="progress bg-white" style="height: 60px;">
+      {% for section in progress.sections %}
+        <div class="progress-bar {% if section.name == 'not_started' %}progress-bar-striped bg-secondary{% else %}bg-dark{% endif %}" role="progressbar" style="width: {{ section.css_percentage }}%;" aria-valuenow="{{ section.css_percentage }}" aria-valuemin="0" aria-valuemax="100">
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+  <div class="col-1"></div>
+{% endblock %}

froide_govplan/templatetags/govplan.py

@@ -27,6 +27,7 @@ def get_plan_progress(object_list):
         sections.append(
             {
                 "count": status_count,
+                "name": str(value),
                 "label": label,
                 "css_class": STATUS_CSS[value],
                 "percentage": round(percentage),

froide_govplan/urls.py

@@ -5,6 +5,7 @@ from .views import (
     GovPlanDetailOGView,
     GovPlanDetailView,
     GovPlanProposeUpdateView,
+    GovPlanSectionDetailOGView,
     GovPlanSectionDetailView,
     search,
 )
@@ -33,4 +34,9 @@ urlpatterns = [
         GovPlanSectionDetailView.as_view(),
         name="section",
     ),
+    path(
+        pgettext_lazy("url part", "<slug:gov>/<slug:section>/_og/"),
+        GovPlanSectionDetailOGView.as_view(),
+        name="section_og",
+    ),
 ]

froide_govplan/views.py

@@ -37,6 +37,10 @@ class GovPlanSectionDetailView(GovernmentMixin, DetailView):
         return context
 
 
+class GovPlanSectionDetailOGView(GovPlanSectionDetailView):
+    template_name = "froide_govplan/section_og.html"
+
+
 class GovPlanDetailView(GovernmentMixin, DetailView):
     slug_url_kwarg = "plan"
     template_name = "froide_govplan/detail.html"