og images RC1

pyvec · Aug 17, 2023 · 6a88c97 · 6a88c97
1 parent d7549ee
commit 6a88c97
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 87 deletions.
diff --git a/program/urls.py b/program/urls.py
@@ -24,6 +24,8 @@
 # Activated only in DEBUG mode.
 if settings.DEBUG:
     urlpatterns += [
-        path("og-image/talks/<int:session_id>", debug_og_image_for_talk),
-        path("og-image/workshops/<int:session_id>", debug_og_image_for_workshop),
+        path("og-image/talks/<int:session_id>/", debug_og_image_for_talk),
+        path("og-image/panels/<int:session_id>/", debug_og_image_for_talk),
+        path("og-image/workshops/<int:session_id>/", debug_og_image_for_workshop),
+        path("og-image/sprints/<int:session_id>/", debug_og_image_for_workshop),
     ]
diff --git a/program/views.py b/program/views.py
@@ -104,7 +104,7 @@ def debug_og_image_for_talk(request, session_id: int) -> HttpResponse:
     return _render_og_template(
         request,
         template="program/og_images/talk.html",
-        context={"talk": talk},
+        context={"session": talk},
     )
 
 
@@ -116,7 +116,7 @@ def debug_og_image_for_workshop(request, session_id: int) -> HttpResponse:
     return _render_og_template(
         request,
         template="program/og_images/workshop.html",
-        context={"workshop": workshop},
+        context={"session": workshop},
     )
 
 

diff --git a/static_src/scss/_custom-css.scss b/static_src/scss/_custom-css.scss
@@ -321,3 +321,20 @@ ul {
     }
 
 }
+
+.PC-og {
+    overflow: hidden;
+
+    &-container {
+        position: relative;
+        width: 1200px;
+        height: 630px;
+        overflow: hidden;
+    }
+
+    &-branding {
+        position: absolute;
+        bottom: map-get($spacers, 4);
+        left: map-get($spacers, 5);
+    }
+}
diff --git a/templates/program/og_images/_og_base.html b/templates/program/og_images/_og_base.html
@@ -1,67 +1,79 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+{% extends '_base.html' %}
 
-    <title>PyCon CZ 23, 15-17 September, Prague</title>
+{% load static %}
+{% load markdown %}
+{% load static %}
+{% load regex %}
 
-    <style>
-        @font-face {
-            font-family: "Chivo";
-            src: url("static/fonts/chivo.woff2") format("woff2-variations");
-            font-weight: 100 900;
-            font-style: normal;
-            font-display: block;
-        }
+{% block body_extras %}class="PC-og"{% endblock %}
 
-        @font-face {
-            font-family: "Chivo";
-            src: url("static/fonts/chivo-italic.woff2") format("woff2-variations");
-            font-weight: 100 900;
-            font-style: italic;
-            font-display: block;
-        }
+{% block body %}
+    <div class="PC-og-container PC-header px-5 pt-4 pb-0">
+        <div class="row h-100">
+            <div class="col-6">
+                <h1 class="text-white mt-0 mb-3 {% if session.title|length > 90 %}lh-1{% endif %}">
+                    {{ session.title }}
+                    <small class="text-white fs-2 d-inline-block">
+                        {% if session.type == 'talk' %}
+                            {% if session.language == 'en' %}
+                                a&nbsp;{{ session.type }} by
+                            {% elif session.language == 'cs' %}
+                                přednáší
+                            {% endif %}
+                        {% elif session.type == 'panel' %}
+                            {% if session.language == 'en' %}
+                                a&nbsp;{{ session.type }} with
+                            {% elif session.language == 'cs' %}
+                                disktující:
+                            {% endif %}
+                        {% elif session.type == 'workshop' %}
+                            {% if session.language == 'en' %}
+                                a&nbsp;{{ session.type }} with
+                            {% elif session.language == 'cs' %}
+                                workshop vede
+                            {% endif %}
+                        {% elif session.type == 'sprint' %}
+                            {% if session.language == 'en' %}
+                                a&nbsp;{{ session.type }} lead by
+                            {% elif session.language == 'cs' %}
+                                sprint vede
+                            {% endif %}
+                        {% endif %}
 
-        body {
-            font-family: "Chivo";
-            background-image: url("static/img/header-bg.svg");
-            background-size: cover;
-            color: #fff;
-            width: 1200px;
-            height: 630px;
-        }
+                        {% for speaker in session.speakers %}{% if forloop.last and not forloop.first %} <span class="d-inline-block">&amp; {% elif not forloop.first %},</span> <span class="d-inline-block">{% endif %}{% spaceless %}
+                            {{ speaker }}{% if forloop.last %}</span>{% endif %}
+                        {% endspaceless %}{% endfor %}
+                    </small>
+                </h1>
+            </div>
+            <div class="col-6 px-0">
+                <div class="row g-3 align-items-start align-content-start h-100">
+                    {% for speaker in session.speakers %}
+                        <div class="
+                             {% if session.speakers|length == 1 %}
+                             col
+                             {% elif session.speakers|length == 2 or session.speakers|length == 3 or session.speakers|length == 4 %}
+                             col-6
+                             {% elif session.speakers|length > 4 %}
+                             col-4
+                             {% endif %}
+                        ">
+                            <div class="PC-speaker border border-black shadow border-2 rounded position-relative mb-2">
+                                <div class="PC-image-primary PC-image-cover">
+                                    <img class="img-fluid" src="{{ speaker.photo.url }}" width="400" height="400" alt="">
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
 
-        h1 {
-            text-shadow: 2px 2px black;
-        }
+        {% comment %}<div class="col-3 position-relative">{% endcomment %}
 
-        .og-container {
-            padding: 40px 60px;
-            box-sizing: border-box;
-            display: flex;
-            width: 100%;
-            height: 100%;
-        }
-
-        .og-content {
-            flex-grow: 1;
-        }
-
-        .og-branding {
-            align-self: flex-end;
-        }
-    </style>
-</head>
-<body>
-<div class="og-container">
-    <div class="og-content">
-        {% block content %}{% endblock %}
+        <div class="PC-og-branding">
+            <img src="static/img/logo-pycon-23.min.svg" width="300" class="img-fluid"/>
+        </div>
     </div>
 
-    <div class="og-branding">
-        <img src="static/img/logo-pycon-23.min.svg" width="300"/>
-    </div>
-</div>
-</body>
-</html>
+{% endblock %}
diff --git a/templates/program/og_images/panel.html b/templates/program/og_images/panel.html
@@ -0,0 +1 @@
+{% extends 'program/og_images/_og_base.html' %}
diff --git a/templates/program/og_images/talk.html b/templates/program/og_images/talk.html
@@ -1,12 +1 @@
-{% extends "program/og_images/_og_base.html" %}
-{% block content %}
-    <h1>
-        {{ talk.title }}
-    </h1>
-
-    <p>
-        {% for speaker in talk.speakers %}
-            {{ speaker }}{% if not forloop.last %},{% endif %}
-        {% endfor %}
-    </p>
-{% endblock %}
+{% extends 'program/og_images/_og_base.html' %}
diff --git a/templates/program/og_images/workshop.html b/templates/program/og_images/workshop.html
@@ -1,12 +1 @@
-{% extends "program/og_images/_og_base.html" %}
-{% block content %}
-    <h1>
-        {{ workshop.title }}
-    </h1>
-
-    <p>
-        {% for speaker in workshop.speakers %}
-            {{ speaker }}{% if not forloop.last %},{% endif %}
-        {% endfor %}
-    </p>
-{% endblock %}
+{% extends 'program/og_images/_og_base.html' %}