feat(forum): utiliser l'image du forum dans la vignette opengraph (#725)

## Description

🎸 Lorsqu'une image est définie pour un `forum`, alimenter la vignette
opengraph avec, au lieu de l'image par défaut

## Type de changement

🎢 Nouvelle fonctionnalité (changement non cassant qui ajoute une
fonctionnalité).
🎨 changement d'UI

### Points d'attention

🦺  images privées stockées dans un bucket

## capture d'écran

Vue des `forum` d'une catégorie

![image](https://github.com/user-attachments/assets/54f7f41f-4b82-4c3e-a734-e95c4efbf301)

Vue d'un `forum`

![image](https://github.com/user-attachments/assets/6aee89a1-9bba-4a02-ad5f-ca76c876f8df)

vignette du `forum` lors du partage

![image](https://github.com/user-attachments/assets/dab0432c-2384-4a12-b987-0041f989dc53)

lacommunaute/forum/forms.py

@@ -29,7 +29,7 @@ class ForumForm(forms.ModelForm):
     description = forms.CharField(
         widget=forms.Textarea(attrs={"rows": 20}), required=False, label="Contenu (markdown autorisé)"
     )
-    image = forms.ImageField(required=False, label="Banniere de couverture")
+    image = forms.ImageField(required=False, label="Banniere de couverture, format 1200 x 630 pixels recommandé")
 
     def save(self, commit=True):
         forum = super().save(commit=False)

lacommunaute/forum/tests/tests_views.py

@@ -7,7 +7,7 @@
 from faker import Faker
 from machina.core.loading import get_class
 from taggit.models import Tag
-
+from django.conf import settings
 from lacommunaute.forum.enums import Kind as ForumKind
 from lacommunaute.forum.factories import CategoryForumFactory, ForumFactory, ForumRatingFactory
 from lacommunaute.forum.models import Forum
@@ -18,7 +18,7 @@
 from lacommunaute.forum_conversation.models import Topic
 from lacommunaute.users.factories import UserFactory
 from lacommunaute.utils.testing import parse_response_to_soup, reset_model_sequence_fixture
-
+from pytest_django.asserts import assertContains
 
 faker = Faker()
 
@@ -545,6 +545,24 @@ def test_rated_forum(self, client, db, snapshot):
         content = parse_response_to_soup(response, selector="#rating-area1")
         assert str(content) == snapshot(name="rated_forum")
 
+    def test_opengraph_for_forum_with_image(self, client, db):
+        forum = ForumFactory(with_public_perms=True, with_image=True)
+        response = client.get(forum.get_absolute_url())
+        assertContains(
+            response,
+            f'<meta property="og:image" content="{settings.MEDIA_URL}{settings.AWS_STORAGE_BUCKET_NAME}/banner',
+        )
+        assertContains(
+            response,
+            f'<meta property="twitter:image" content="{settings.MEDIA_URL}{settings.AWS_STORAGE_BUCKET_NAME}/banner',
+        )
+
+    def test_opengraph_for_forum_wo_image(self, client, db):
+        forum = ForumFactory(with_public_perms=True)
+        response = client.get(forum.get_absolute_url())
+        assertContains(response, '<meta property="og:image" content="/static/images/logo-og-communaute')
+        assertContains(response, '<meta property="og:image" content="/static/images/logo-og-communaute')
+
 
 reset_forum_sequence = pytest.fixture(reset_model_sequence_fixture(Forum))
 

lacommunaute/forum/views.py

@@ -77,6 +77,9 @@ def get_context_data(self, **kwargs):
 
         if self.will_render_documentation_variant():
             context["sibling_forums"] = forum.get_siblings(include_self=True)
+
+        if forum.image:
+            context["og_image"] = forum.image
         return context
 
 

lacommunaute/templates/layouts/base.html

@@ -19,15 +19,15 @@
             <meta property="og:locale" content="fr_FR">
             <meta property="og:type" content="website">
             <meta property="og:url" content="https://communaute-experimentation.inclusion.beta.gouv.fr/">
-            <meta property="og:image" content="{% static 'images/logo-og-communaute.png' %}">
+            <meta property="og:image" content="{% if og_image %}{{ og_image.url }}{% else %}{% static 'images/logo-og-communaute.png' %}{% endif %}">
             <meta property="og:image:alt" content="Logo de la communauté de l'inclusion">
             <meta property="og:image:type" content="image/png">
             <meta property="og:image:width" content="1200">
             <meta property="og:image:height" content="630">
             <!-- https://metatags.io Twitter -->
             <meta property="twitter:card" content="summary_large_image">
             <meta property="twitter:url" content="https://communaute-experimentation.inclusion.beta.gouv.fr/">
-            <meta property="twitter:image" content="{% static 'images/logo-og-communaute.png' %}">
+            <meta property="twitter:image" content="{% if og_image %}{{ og_image.url }}{% else %}{% static 'images/logo-og-communaute.png' %}{% endif %}">
             <meta property="twitter:site" content="inclusion_gouv">
             <!-- https://metatags.io Facebook -->
             <meta property="fb:page_id" content="inclusion.gouv">