Add customizable social media cards to blog posts #2028
Conversation
| @@ -15,6 +15,7 @@ class EntryAdmin(admin.ModelAdmin): | |||
| list_filter = ("is_active",) | |||
| exclude = ("summary_html", "body_html") | |||
| prepopulated_fields = {"slug": ("headline",)} | |||
| raw_id_fields = ["social_media_card"] | |||
There was a problem hiding this comment.
A raw id field is not an ideal widget for it, but it should be good enough for now ™️
(Ideally I'd like something with an image preview, along with controls to search/add/delete like you get without the raw_id_fields)
blog/models.py
Outdated
| "og:type": "article", | ||
| "og:title": self.headline, | ||
| "og:description": _("Posted by {author} on {pub_date}").format( | ||
| author=self.author, pub_date=self.pub_date_localized | ||
| ), | ||
| "og:article:published_time": self.pub_date.isoformat(), | ||
| "og:article:author": self.author, | ||
| "og:image": static("img/logos/django-logo-negative.png"), | ||
| "og:image:alt": "Django logo", | ||
| "og:image:type": "image/png", | ||
| "og:url": self.get_absolute_url(), | ||
| "og:site_name": "Django Project", | ||
| "twitter:card": "summary", | ||
| "twitter:creator": "djangoproject", | ||
| "twitter:site": "djangoproject", |
There was a problem hiding this comment.
Compared to the opengraph tags defined in base.html, here's the difference:
- ➕ Added
og:type=article - ➖ Removed
og:image:heightandog:image:width(they don't seem to be needed) - ➕ Added
og:article:authorandog:article:published_time(we have the information so it's easy enough to add)
There was a problem hiding this comment.
It will be interesting to see if different platforms will pick up those bits of metadata, of so we might be able to switch og:description to something else.
blog/models.py
Outdated
| tags |= { | ||
| "og:image": card.full_url, | ||
| "og:image:alt": card.alt_text, | ||
| "og:image:type": card.mimetype, |
There was a problem hiding this comment.
Do you think this is actually needed? I couldn’t find any indication that it is.
There was a problem hiding this comment.
Good call. I've tested it with the share-preview tool I mentioned in the PR description and none of the sites in that tool complained about the lack of og:image:type.
I've pushed a commit to remove it.
blog/models.py
Outdated
| "og:type": "article", | ||
| "og:title": self.headline, | ||
| "og:description": _("Posted by {author} on {pub_date}").format( | ||
| author=self.author, pub_date=self.pub_date_localized | ||
| ), | ||
| "og:article:published_time": self.pub_date.isoformat(), | ||
| "og:article:author": self.author, | ||
| "og:image": static("img/logos/django-logo-negative.png"), | ||
| "og:image:alt": "Django logo", | ||
| "og:image:type": "image/png", | ||
| "og:url": self.get_absolute_url(), | ||
| "og:site_name": "Django Project", | ||
| "twitter:card": "summary", | ||
| "twitter:creator": "djangoproject", | ||
| "twitter:site": "djangoproject", |
There was a problem hiding this comment.
It will be interesting to see if different platforms will pick up those bits of metadata, of so we might be able to switch og:description to something else.
There was a problem hiding this comment.
Thanks for this @bmispelon. It LGTM except I’m not sure about the details for the OG tags method. (It’s not something I’m even remotely an expert on.)
bmispelon
force-pushed
the
feat/blog-social-card
branch
from
ffda3e9 to
d820204
Compare
| @@ -150,6 +177,10 @@ def is_published(self): | |||
|
|
|||
| is_published.boolean = True | |||
|
|
|||
| @property | |||
| def pub_date_localized(self): | |||
| return date_format(self.pub_date) | |||
There was a problem hiding this comment.
Seems to be equivalent to the previous pub_date=object.pub_date|date:"DATE_FORMAT" in templates? Makes sense.
There was a problem hiding this comment.
Yes, it should. I've added a unit test to confirm it 👍🏻
| return self.image.url | ||
| host = get_host() | ||
| hostname = reverse_host(host) | ||
| return f"{host.scheme}{hostname}{host.port}{self.image.url}" |
There was a problem hiding this comment.
Of all the aspects of the additions I think this one probably warrants unit tests? I have no knowledge of django_hosts so I don’t know if this implementation is commensurate with our needs.
There was a problem hiding this comment.
Good call, I've added a test 👍🏻
| "og:site_name": "Django Project", | ||
| "twitter:card": "summary", | ||
| "twitter:creator": "djangoproject", | ||
| "twitter:site": "djangoproject", |
There was a problem hiding this comment.
It’s a bit weird that those are in the block we have to override to start with? I don’t see why we would ever want them to be different from one page to another. What do you think, should we refactor this out of the og_tags or proceed like this? 🤔
There was a problem hiding this comment.
I can't see a reason why those tags should vary from page to page, but the current implementation is a result of copying the existing behavior of the base.html template. If we'd want to change it, we'd have to overhaul the base template and that's not something I'm personally ready to tackle right now.
TLDR: I vote "proceed like this" 😁
| entry = Entry(pub_date=date(2005, 7, 21)) | ||
| self.assertEqual(entry.pub_date_localized, "July 21, 2005") | ||
| with translation.override("nn"): | ||
| self.assertEqual(entry.pub_date_localized, "21. juli 2005") |
bmispelon
force-pushed
the
feat/blog-social-card
branch
from
6586b41 to
b64bcb6
Compare
I've tested the changes locally using this tool: https://github.com/rafaelmardojai/share-preview