fix: Social HTML Tags (#358)

* Fix social sharing image

* Fix social sharing text and unify with feed text

ietf/blog/models.py

@@ -194,9 +194,8 @@ def previous(self):
     def coalesced_published_date(self):
         return self.date_published or self.first_published_at
 
-    @property
-    def feed_text(self):
-        return self.search_description or self.introduction
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
 
     @functional.cached_property
     def siblings(self):

ietf/blog/templates/includes/blog_sidebar.html

@@ -9,7 +9,7 @@
         <li class="card border-bottom-0 {% if sibling.slug == current.slug %}bg-white{% else %}bg-light{% endif %}">
             <div class="card-body">
                 <h2 class="h4"><a class="stretched-link" href="{{ sibling.url }}">{{ sibling.title }}</a></h2>
-                <p class="card-text">{{ sibling.feed_text }}</p>
+                <p class="card-text">{{ sibling.get_social_text }}</p>
                 {% include "includes/blog_authors.html" with post=sibling %}
                 {{ sibling.date|date:"DATE_FORMAT" }}
             </div>

ietf/events/models.py

@@ -155,6 +155,12 @@ class EventPage(Page, PromoteMixin):
     def siblings(self):
         return self.get_siblings().live().public().filter(show_in_menus=True).specific()
 
+    def get_social_image(self):
+        return super().get_social_image() or self.main_image
+
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
+
 
 EventPage.content_panels = Page.content_panels + [
     FieldPanel("start_date"),
@@ -194,6 +200,9 @@ class EventListingPagePromotedEvent(models.Model):
 class EventListingPage(Page, PromoteMixin):
     introduction = models.CharField(blank=True, max_length=511)
 
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
+
     @property
     def upcoming_events(self):
         return (

ietf/glossary/models.py

@@ -37,6 +37,9 @@ class GlossaryPage(Page, PromoteMixin):
         related_name="+",
     )
 
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
+
     @property
     def siblings(self):
         return self.get_siblings().live().public().filter(show_in_menus=True).specific()

ietf/home/templates/home/home_page.html

@@ -53,7 +53,7 @@ <h3 class="h5">
                                         <span class="icon ion-ios-arrow-forward"></span>
                                     </a>
                                 </h3>
-                                <p class="card-text">{{ blog.feed_text }}</p>
+                                <p class="card-text">{{ blog.get_social_text }}</p>
                                 <div class="d-flex justify-content-between align-items-center">
                                     <small class="border-start border-secondary ps-2">
                                         <span>{{ blog.author.name }}</span>

ietf/iesg_statement/models.py

@@ -114,6 +114,9 @@ class IESGStatementPage(Page, BibliographyMixin, PromoteMixin):
     parent_page_types = ["iesg_statement.IESGStatementIndexPage"]
     subpage_types = []
 
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
+
     @property
     def date(self):
         return self.date_published or self.first_published_at
@@ -142,10 +145,6 @@ def previous(self):
     def coalesced_published_date(self):
         return self.date_published or self.first_published_at
 
-    @property
-    def feed_text(self):
-        return self.search_description or self.introduction
-
     @functional.cached_property
     def siblings(self):
         return (

ietf/standard/models.py

@@ -87,9 +87,8 @@ class StandardPage(Page, BibliographyMixin, PromoteMixin):
         ]
     )
 
-    @property
-    def feed_text(self):
-        return self.search_description or self.introduction
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
 
     @property
     def siblings(self):
@@ -143,6 +142,9 @@ class StandardIndexPage(Page, PromoteMixin):
         index.SearchField("in_depth"),
     ]
 
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
+
     @property
     def children(self):
         return self.get_children().live().specific()
@@ -219,9 +221,8 @@ class Meta:
         ]
     )
 
-    @property
-    def feed_text(self):
-        return self.search_description or self.introduction
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
 
     @property
     def siblings(self):

ietf/templates/iab_base.html

@@ -1,4 +1,5 @@
 {% load static wagtailuserbar wagtailcore_tags wagtailimages_tags ietf_tags analytical %}
+{% wagtail_site as current_site %}
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
@@ -22,16 +23,16 @@
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:site" content="@{{ settings.utils.SocialMediaSettings.twitter_handle }}" />
         <meta name="twitter:title" content="{{ page.title }}" />
-        <meta name="twitter:description" content="{% social_text page wagtail_site %}">
-        <meta name="twitter:image" content="{% social_image page wagtail_site %}">
+        <meta name="twitter:description" content="{% social_text page current_site %}">
+        <meta name="twitter:image" content="{% social_image page current_site %}">
 
         <!--facebook opengraph tags-->
         <meta property="fb:app_id" content="{{ settings.utils.SocialMediaSettings.facebook_app_id }}" />
         <meta property="og:type" content="website" />
         <meta property="og:url" content="{{ page.url }}" />
         <meta property="og:title" content="{{ page.title }}" />
-        <meta property="og:image" content="{% social_image page wagtail_site %}" />
-        <meta property="og:description" content="{% social_text page wagtail_site %}" />
+        <meta property="og:image" content="{% social_image page current_site %}" />
+        <meta property="og:description" content="{% social_text page current_site %}" />
         <meta property="og:site_name" content="{{ settings.utils.SocialMediaSettings.site_name }}" />
 
         {% block extra_meta %}{% endblock extra_meta %}

ietf/templates/includes/social-sharebar.html

@@ -4,13 +4,13 @@
     <div class="social-sharebar">
         <div class="social-sharebar__button">Share this page</div>
         <div class="social-sharebar__icons">
-            <a title="Share on Facebook" href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&amp;link={{ page.full_url|urlencode }}&amp;picture={% social_image page wagtail_site %}&amp;name={{ page.title|urlencode }}&amp;description={% social_text page wagtail_site 'True '%}&amp;redirect_uri={{ page.full_url|urlencode }}">
+            <a title="Share on Facebook" href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&amp;link={{ page.full_url|urlencode }}&amp;picture={% social_image page current_site %}&amp;name={{ page.title|urlencode }}&amp;description={% social_text page current_site 'True '%}&amp;redirect_uri={{ page.full_url|urlencode }}">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 64"><path d="M30 0v10.3s-7.6-.8-9.5 2.2c-1 1.6-.4 6.2-.5 9.6h10.1c-.9 3.9-1.5 6.6-2.1 9.9h-8v32H6V32.1H.1V22H6c.2-7.3.3-14.6 3.9-18.3C14.1-.5 18 0 30 0z"/></svg>
             </a>
-            <a title="Share on Twitter" href="https://twitter.com/intent/tweet?text={% social_text page wagtail_site 'True' %}&amp;url={{ page.full_url|urlencode }}&amp;via={{ social_media_settings.twitter_handle|urlencode }}">
+            <a title="Share on Twitter" href="https://twitter.com/intent/tweet?text={% social_text page current_site 'True' %}&amp;url={{ page.full_url|urlencode }}&amp;via={{ social_media_settings.twitter_handle|urlencode }}">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 51.9"><path d="M43.5 0c5.1-.1 7.8 1.8 10.4 4.1 2.2-.2 5-1.4 6.7-2.3.5-.3 1.1-.6 1.6-.9-1 2.6-2.3 4.6-4.3 6.2-.4.3-.9.8-1.4 1 2.8 0 5.2-1.3 7.4-2-1.2 1.9-2.8 3.8-4.5 5.1-.7.5-1.4 1.1-2 1.6 0 3 0 5.9-.6 8.4-3.3 14.7-12 24.7-25.7 29-4.9 1.5-12.9 2.2-18.6.8-2.8-.7-5.3-1.5-7.7-2.5-1.3-.6-2.5-1.2-3.7-1.9-.3-.1-.7-.3-1.1-.6 1.3 0 2.8.4 4.2.2 1.3-.2 2.6-.2 3.7-.4 3-.7 5.6-1.5 7.9-2.8 1.1-.6 2.8-1.4 3.6-2.3-1.5 0-2.8-.3-3.9-.7-4.2-1.5-6.7-4.3-8.3-8.4 1.3.1 5 .5 5.9-.3-1.6-.1-3.2-1-4.3-1.7-3.4-2.1-6.2-5.7-6.2-11.2.4.2.9.4 1.3.6.9.4 1.7.6 2.8.8.4.1 1.3.3 1.8.2h-.1c-.7-.8-1.7-1.3-2.4-2.1C3.8 15 1.7 10.8 3 5.8c.3-1.3.9-2.4 1.4-3.4h.1c.2.6.8 1 1.2 1.4 1.1 1.4 2.5 2.6 3.9 3.7 4.8 3.7 9.1 6.1 16 7.8 1.8.4 3.8.8 5.9.8-.6-1.7-.4-4.5.1-6.2 1.2-4.2 3.7-7.2 7.4-8.8.9-.4 1.9-.7 2.9-.9.6-.1 1.1-.1 1.6-.2z"/></svg>
             </a>
-            <a title="Share on LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ page.full_url|urlencode }}&amp;title={{ page.title|urlencode }}&amp;summary={% social_text page wagtail_site 'True' %}&amp;source={{ social_media_settings.site_name|urlencode }}">
+            <a title="Share on LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ page.full_url|urlencode }}&amp;title={{ page.title|urlencode }}&amp;summary={% social_text page current_site 'True' %}&amp;source={{ social_media_settings.site_name|urlencode }}">
                 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 32 32" xml:space="preserve"> <defs> </defs> <path d="M26 25.963h-4.185v-6.55c0-1.56-.027-3.57-2.175-3.57-2.18 0-2.51 1.7-2.51 3.46v6.66h-4.182V12.495h4.012v1.84h.058c.558-1.058 1.924-2.174 3.96-2.174 4.24 0 5.022 2.79 5.022 6.418v7.386zM8.23 10.655a2.426 2.426 0 0 1 0-4.855 2.427 2.427 0 0 1 0 4.855zm-2.098 1.84h4.19v13.468h-4.19V12.495z" fill-rule="evenodd"></path></svg>
             </a>
         </div>

ietf/templates/includes/social_share.html

@@ -14,22 +14,22 @@
         class="me-2 h2"
         aria-label="Share on Facebook"
         title="Share on Facebook"
-        href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&link={{ page.full_url|urlencode }}&picture={% social_image page wagtail_site %}&name={{ page.title|urlencode }}&description={% social_text page wagtail_site 'True '%}&redirect_uri={{ page.full_url|urlencode }}"
+        href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&link={{ page.full_url|urlencode }}&picture={% social_image page current_site %}&name={{ page.title|urlencode }}&description={% social_text page current_site 'True '%}&redirect_uri={{ page.full_url|urlencode }}"
     >
         <span class="icon ion-social-facebook"></span>
     </a>
     {% endcomment %}
     <a
         class="me-2 h2"
         title="Share on Twitter"
-        href="https://twitter.com/intent/tweet?text={% social_text page wagtail_site 'True' %}&amp;url={{ page.full_url|urlencode }}&amp;via={{ social_media_settings.twitter_handle|urlencode }}"
+        href="https://twitter.com/intent/tweet?text={% social_text page current_site 'True' %}&amp;url={{ page.full_url|urlencode }}&amp;via={{ social_media_settings.twitter_handle|urlencode }}"
     >
         <span class="icon ion-social-twitter"></span>
     </a>
     <a
         class="me-2 h2"
         title="Share on LinkedIn"
-        href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ page.full_url|urlencode }}&amp;title={{ page.title|urlencode }}&amp;summary={% social_text page wagtail_site 'True' %}&amp;source={{ social_media_settings.site_name|urlencode }}"
+        href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ page.full_url|urlencode }}&amp;title={{ page.title|urlencode }}&amp;summary={% social_text page current_site 'True' %}&amp;source={{ social_media_settings.site_name|urlencode }}"
     >
         <span class="icon ion-social-linkedin"></span>
     </a>

ietf/templates_src/base.html

@@ -1,4 +1,5 @@
 {% load static wagtailuserbar wagtailcore_tags wagtailimages_tags ietf_tags analytical %}
+{% wagtail_site as current_site %}
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
@@ -12,26 +13,24 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <title>IETF {% block title %}{% if self.seo_title %} | {{ self.seo_title }}{% else %} | {{ self.title }}{% endif %}{% endblock %}{% block title_suffix %}{% endblock %}</title>
-        {% if self.search_description %}
-            <meta name="description" content="" />
-        {% endif %}
+        <meta name="description" content="{% social_text page current_site %}" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         <!-- Twitter summary card - see https://dev.twitter.com/cards/types/summary -->
         <!--  and https://dev.twitter.com/cards/getting-started -->
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:site" content="@{{ settings.utils.SocialMediaSettings.twitter_handle }}" />
         <meta name="twitter:title" content="{{ page.title }}" />
-        <meta name="twitter:description" content="{% social_text page wagtail_site %}">
-        <meta name="twitter:image" content="{% social_image page wagtail_site %}">
+        <meta name="twitter:description" content="{% social_text page current_site %}">
+        <meta name="twitter:image" content="{% social_image page current_site %}">
 
         <!--facebook opengraph tags-->
         <meta property="fb:app_id" content="{{ settings.utils.SocialMediaSettings.facebook_app_id }}" />
         <meta property="og:type" content="website" />
         <meta property="og:url" content="{{ page.url }}" />
         <meta property="og:title" content="{{ page.title }}" />
-        <meta property="og:image" content="{% social_image page wagtail_site %}" />
-        <meta property="og:description" content="{% social_text page wagtail_site %}" />
+        <meta property="og:image" content="{% social_image page current_site %}" />
+        <meta property="og:description" content="{% social_text page current_site %}" />
         <meta property="og:site_name" content="{{ settings.utils.SocialMediaSettings.site_name }}" />
 
         {% block extra_meta %}{% endblock extra_meta %}

ietf/topics/models.py

@@ -29,6 +29,9 @@ class TopicIndexPage(Page, PromoteMixin):
         "topics.PrimaryTopicPage",
     ]
 
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
+
     @property
     def primary_topics(self):
         return PrimaryTopicPage.objects.child_of(self)
@@ -83,9 +86,8 @@ class PrimaryTopicPage(Page, PromoteMixin):
         index.SearchField("in_depth"),
     ]
 
-    @property
-    def feed_text(self):
-        return self.search_description or self.introduction
+    def get_social_text(self):
+        return super().get_social_text() or self.introduction
 
     @property
     def siblings(self):

ietf/topics/templates/topics/topic_index_page.html

@@ -32,7 +32,7 @@ <h1>{{ self.title }}</h1>
             {% endif %}
             <div class="col-12 col-md-8">
               <h2 class="h3"><a href="{% pageurl primary_topic %}">{{ primary_topic.title }}<span class="icon ion-ios-arrow-forward ms-3"></span></a></h2>
-              <p class="mb-0 lead">{{ primary_topic.feed_text }}</p>
+              <p class="mb-0 lead">{{ primary_topic.get_social_text }}</p>
             </div>
           </div>
         </div>

ietf/utils/models.py

@@ -94,6 +94,12 @@ class PromoteMixin(models.Model):
     class Meta:
         abstract = True
 
+    def get_social_image(self):
+        return self.social_image
+
+    def get_social_text(self):
+        return self.social_text or self.search_description
+
 
 class SubMenuItem(Orderable):
     parent = ParentalKey("utils.MenuItem", related_name="sub_menu_items")

ietf/utils/templatetags/ietf_tags.py

@@ -3,7 +3,7 @@
 from django.template import Library
 from wagtail.models import Site
 
-from ..models import SocialMediaSettings
+from ..models import PromoteMixin, SocialMediaSettings
 
 register = Library()
 
@@ -12,36 +12,29 @@
 def social_text(page, site, encode=False):
     text = ""
 
-    if page and site:
-        try:
-            text = page.social_text
-        except (AttributeError, ValueError):
-            text = SocialMediaSettings.for_site(site).default_sharing_text
+    if isinstance(page, PromoteMixin):
+        text = page.get_social_text()
 
-        if encode:
-            text = quote(text)
+    if not text:
+        text = SocialMediaSettings.for_site(site).default_sharing_text
+
+    if encode:
+        text = quote(text)
 
     return text
 
 
 @register.simple_tag(takes_context=False)
 def social_image(page, site):
-    image = ""
-
-    if page and site:
-        try:
-            image = page.social_image.get_rendition("original").url
-        except (AttributeError, ValueError):
-            try:
-                image = (
-                    SocialMediaSettings.for_site(site)
-                    .default_sharing_image.get_rendition("original")
-                    .url
-                )
-            except (AttributeError, ValueError):
-                pass
-
-    if image:
-        image = Site.objects.get(is_default_site=True).root_url + image
-
-    return image
+    image = None
+
+    if isinstance(page, PromoteMixin):
+        image = page.get_social_image()
+
+    if image is None:
+        image = SocialMediaSettings.for_site(site).default_sharing_image
+
+    if image is not None:
+        return image.get_rendition("original").url
+
+    return ""