[Scorecards] Added social graphics / infographics to section pages

Where a Section has hand-made infographics, we now display them in a
horizontally-scrolling gallery on the Section’s page. We also use the
main infographic as the page’s OpenGraph image.

We also now configure Git to handle PDF files as binaries, to avoid
problems with LF/CRLF line endings.

Fixes #665.

.gitattributes

@@ -1,4 +1,5 @@
 * text eol=lf
+*.pdf binary
 *.png binary
 *.jpg binary
 *.gif binary

scoring/static/scoring/scss/gallery-component.scss

@@ -0,0 +1,35 @@
+.overflow-gallery {
+    display: flex;
+    overflow-x: scroll;
+
+    ::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 2px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        background-color: rgba(0, 0, 0, .2);
+        box-shadow: 0 0 1px rgba(255, 255, 255, .2);
+    }
+
+    // "full width" display at narrowest screen size
+    margin-left: calc(var(--bs-gutter-x)/-2);
+    margin-right: calc(var(--bs-gutter-x)/-2);
+    padding: 0 1rem 1rem 1rem;
+
+    // "container-sized box" display at wider screens
+    @include media-breakpoint-up('sm') {
+        margin-left: 0;
+        margin-right: 0;
+        padding: 1rem;
+        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+        border-radius: var(--bs-border-radius);
+    }
+
+    img {
+        display: block;
+        height: 80dvw;
+        max-height: 300px;
+    }
+}

scoring/static/scoring/scss/main.scss

@@ -65,3 +65,4 @@
 @import "loading-shimmer";
 @import "open-graph-preview";
 @import "years";
+@import "gallery-component";

scoring/templates/scoring/section.html

@@ -1,4 +1,5 @@
 {% extends "scoring/base.html" %}
+{% load static %}
 {% load django_bootstrap5 %}
 
 {% block content %}
@@ -10,6 +11,7 @@ <h1 class="mb-2">{{ section.description }}</h1>
         <div class="row mt-3">
             <div class="col-lg-6">
                 {{ section.long_description|linebreaks }}
+                <a href="#section-questions" class="btn btn-sm btn-primary mt-2">See questions in this section</a>
             </div>
         </div>
     </div>
@@ -75,7 +77,7 @@ <h3 class="fs-4 mb-0 text-center">
             </div>
         </div>
 
-        <div class="col-6 col-sm-4 col-xl">
+        <div class="col-12 col-sm-4 col-xl">
             <div class="card text-decoration-none text-black h-100">
                 <div class="card-header py-3 text-bg-primary">
                     <h3 class="fs-4 mb-0 text-center">
@@ -126,8 +128,54 @@ <h3 class="fs-4 mb-0 text-center">
 </div>
 {% endif %}
 
+{% if social_graphics %}
+<div class="container pt-5 pt-lg-6">
+    <div class="mb-4 d-flex align-items-center justify-content-between">
+        <h3 class="mb-0">Key takeaways</h3>
+      {% if social_graphics.zip %}
+        <a class="btn btn-sm btn-outline-primary" href="{% static social_graphics.zip %}">Download all (.zip)</a>
+      {% endif %}
+    </div>
+
+    <div class="overflow-gallery gap-3">
+      {% for image in social_graphics.images %}
+        <div class="d-flex flex-column gap-3">
+            <a href="{% static image.src_instagram %}" class="d-block d-md-none" title="Opens in a new window" target="_blank">
+                <img loading="lazy" src="{% static image.src_instagram %}" alt="{{ image.alt }}">
+            </a>
+            <a href="{% static image.src_facebook %}" class="d-none d-md-block" title="Opens in a new window" target="_blank">
+                <img loading="lazy" src="{% static image.src_facebook %}" alt="{{ image.alt }}">
+            </a>
+            <div class="d-flex gap-2 justify-content-center align-items-center">
+                <span class="text-muted fs-7">Download:</span>
+                <a href="{% static image.src_facebook %}" class="btn btn-sm btn-outline-primary d-flex align-items-center gap-2" download>
+                    <span style="background: currentColor; width: 1.5em; height: 0.75em; display: inline-block;"></span>
+                    Wide
+                </a>
+                <a href="{% static image.src_instagram %}" class="btn btn-sm btn-outline-primary d-flex align-items-center gap-2" download>
+                    <span style="background: currentColor; width: 0.75em; height: 0.75em; display: inline-block;"></span>
+                    Square
+                </a>
+            </div>
+        </div>
+      {% endfor %}
+      {% if social_graphics.pdf %}
+        <div class="d-flex flex-column gap-3">
+            <a class="d-block" href="{% static social_graphics.pdf.src_pdf %}" title="Opens in a new window" target="_blank">
+                <img loading="lazy" src="{% static social_graphics.pdf.src_jpg %}" alt="{{ section.description }} summary infographic">
+            </a>
+            <div class="d-flex gap-2 justify-content-center align-items-center">
+                <span class="text-muted fs-7">Download:</span>
+                <a href="{% static social_graphics.pdf.src_pdf %}" class="btn btn-sm btn-outline-primary" download>PDF</a>
+                <a href="{% static social_graphics.pdf.src_jpg %}" class="btn btn-sm btn-outline-primary" download>JPG</a>
+            </div>
+        </div>
+      {% endif %}
+    </div>
+</div>
+{% endif %}
 
-<div class="container py-5 py-lg-6 js-dynamic-content">
+<div id="section-questions" class="container py-5 py-lg-6 js-dynamic-content">
     <h3 class="mb-4" id="questions">Questions in this section</h3>
 
   {% if not section.is_combined %}
@@ -293,7 +341,6 @@ <h3 class="fs-5 mb-0 lh-base text-center">{{ council_type.name|title }}</h3>
         </a>
     </div>
   {% endif %}
-
 </div>
 
 {% endblock %}

scoring/views.py

@@ -526,6 +526,117 @@ class SectionView(PrivateScorecardsAccessMixin, SearchAutocompleteMixin, DetailV
         "s6_c_e": "s6_c_e_ca",
     }
 
+    social_graphics = {
+        "s4_g_f": {
+            "pdf": {
+                "src_pdf": "scoring/img/social-graphics/governance-and-finance/governance-graphic.pdf",
+                "src_jpg": "scoring/img/social-graphics/governance-and-finance/governance-graphic.jpg",
+                "height": 1159,
+                "width": 2100,
+            },
+            "zip": "scoring/img/social-graphics/governance-and-finance/governance-and-finance.zip",
+            "images": [
+                {
+                    "src_facebook": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "alt": "Governance & Finance; Leading the Way; 68% of local authorities have raised funds for climate action; 84% of councils have a named climate portfolio holder; 45% of councils include climate as a priority in their Corporate Plan.",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "alt": "Governance & Finance; Climate Governance; 14% of councils have trained all their senior staff and councillors who are cabinet or committee chairs in climate awareness; 64% of councils don’t have a detailed sustainable procurement policy; 47% of councils list climate implications on full council decisions.",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "alt": "Governance & Finance; Funding the Climate Crisis; 1% of councils have committed to divesting their pension fund from fossil fuels by 2030; 13% of councils have passed a motion supporting the divestment of its own investments and their pension fund; 10% of local authorities* have direct investments in airports.",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "alt": "Governance & Finance; Emissions Reductions Between 2019 and 2021; 7% of councils have reduced their own emissions by 20% or more; 2% of district & single tier councils have had area wide emissions reduced by 10% or more; 0% No county, combined authority or Northern Irish council have had area wide emissions reduced by 10% or more.",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/governance-and-finance/[email protected]",
+                    "alt": "Governance & Finance; Average scores: 27% for Single Tier; 24% for District; 34% for County; 11% for Northern Ireland; 29% for Combined Authority.",
+                },
+            ],
+        },
+        "s2_tran": {
+            "pdf": {
+                "src_pdf": "scoring/img/social-graphics/transport/transport-graphic.pdf",
+                "src_jpg": "scoring/img/social-graphics/transport/transport-graphic.jpg",
+                "height": 1158,
+                "width": 2100,
+            },
+            "zip": "scoring/img/social-graphics/transport/transport.zip",
+            "images": [
+                {
+                    "src_facebook": "scoring/img/social-graphics/transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/transport/[email protected]",
+                    "alt": "Transport, leading the way; 57% of transport authorities have 20mph as the default speed limit; 59% of transport authorities have low-emission buses in their area",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/transport/[email protected]",
+                    "alt": "Transport, driving the climate crisis; 25% of local authorities have expanded airports or their road networks",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/transport/[email protected]",
+                    "alt": "Transport, accelerated action needed; 20% of local authorities have 10% or more of their council fleet as electric vehicles; 32% of councils have 60 or more public electric vehicle chargers across their area",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/transport/[email protected]",
+                    "alt": "Transport, driving the climate crisis; 0 english councils received the highest capability rating by active travel england; 3 english transport authorities outside of london have high bus ridership.",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/transport/[email protected]",
+                    "alt": "Transport, air quality; 98% of air quality authorities in england have high pm2.5 levels in 25% or more of the council's area; 55% of air quality authorities have high no2 levels in 25% or more of the council's area",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/transport/[email protected]",
+                    "alt": "Transport; Average scores: 22% for Single Tier; 9% for District; 18% for County; 7% for Northern Ireland; 41% for Combined Authority",
+                },
+            ],
+        },
+        "s2_tran_ca": {
+            "pdf": {
+                "src_pdf": "scoring/img/social-graphics/ca-transport/transport-graphic.pdf",
+                "src_jpg": "scoring/img/social-graphics/ca-transport/transport-graphic.jpg",
+                "height": 1125,
+                "width": 2000,
+            },
+            "zip": "scoring/img/social-graphics/ca-transport/transport.zip",
+            "images": [
+                {
+                    "src_facebook": "scoring/img/social-graphics/ca-transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/ca-transport/[email protected]",
+                    "alt": "Transport, 100% support shared transport schemes like car clubs; 82% include climate as a priority in their Transport Plan; 36% have integrated ticketing for all public transport and shared active travel schemes.",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/ca-transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/ca-transport/[email protected]",
+                    "alt": "Transport, 0% have a capability rating of 4 out of 4 from Active Travel England; 36% have more than 60 public EV chargers per 100,000 residents; 27% have a clean air zone that requires charges for private vehicles.",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/ca-transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/ca-transport/[email protected]",
+                    "alt": "Transport, 73% included high carbon transport projects within their Transport plans.",
+                },
+                {
+                    "src_facebook": "scoring/img/social-graphics/ca-transport/[email protected]",
+                    "src_instagram": "scoring/img/social-graphics/ca-transport/[email protected]",
+                    "alt": "Transport, 91% have a target for a zero emission bus fleet by 2040 or sooner; 27% have a target of 2030 for zero emission bus fleet.",
+                },
+            ],
+        },
+    }
+
     alt_map = dict((ca, non_ca) for non_ca, ca in combined_alt_map.items())
 
     def get_object(self):
@@ -677,6 +788,14 @@ def get_context_data(self, **kwargs):
         if context.get("council_type", None) is not None:
             context["council_type_avg"] = avgs[context["council_type"]["slug"]]
 
+        sg = self.social_graphics.get(section.code, None)
+        if sg:
+            context["social_graphics"] = sg
+            context["og_image_path"] = f"{settings.STATIC_URL}{sg['pdf']['src_jpg']}"
+            context["og_image_type"] = "image/jpeg"
+            context["og_image_height"] = sg["pdf"]["height"]
+            context["og_image_width"] = sg["pdf"]["width"]
+
         context["canonical_path"] = self.request.path
         context["plan_year"] = self.request.year
         return context