Refactor Twitter cards support
Remove the TWITTER_HANDLE variable and use the 'twitter' value from SOCIAL. This eliminates duplicate settings! Remove closing slash for meta tags, not required by HTML5, see http://stackoverflow.com/a/21898502 In article.html Twitter images were specified twice - once as relative URL and once as full site URL. Now only a single full URL is used instead. Also stripped HTML tags from description. The default card type is summary_large_image which better displays with high-res images and the default header images. ``twitter_image`` article metadata is now supported, similar to ``og_image``. Documentation is updated.
This commit is contained in:
Mr. Senko
parent
911b8ec25c
commit
9583d74d70
25
README.md
25
README.md
|
|
@ -103,13 +103,6 @@ Accept many analytics:
|
|||
- Gauges: ``GAUGES``
|
||||
- Piwik: ``PIWIK_URL`` and ``PIWIK_SITE_ID``.
|
||||
|
||||
### Twitter cards
|
||||
|
||||
Twitter cards are automatically generated if TWITTER_HANDLE is set:
|
||||
```python
|
||||
TWITTER_HANDLE = "myprofile"
|
||||
```
|
||||
|
||||
### Other configuration
|
||||
|
||||
- If ``ADDTHIS_PUBID`` is defined sharing buttons from AddThis will appear
|
||||
|
|
@ -122,10 +115,18 @@ TWITTER_HANDLE = "myprofile"
|
|||
|
||||
### Articles
|
||||
|
||||
To customize header cover to articles, insert the metadata ``header_cover``.
|
||||
To customize OpenGraph images, insert the metadata ``og_image``, otherwise
|
||||
``header_cover``, ``HEADER_COVER`` or a default image is used. You can also
|
||||
use absolute URLs for ``og_image``. Example:
|
||||
- To customize header cover to articles, insert the metadata ``header_cover``.
|
||||
- To customize OpenGraph images, insert the metadata ``og_image``, otherwise
|
||||
``header_cover``, ``HEADER_COVER`` or a default image is used.
|
||||
- To customize Twitter card images, insert the metadata ``twitter_image``,
|
||||
otherwise ``header_cover``, ``HEADER_COVER`` or a default image is used.
|
||||
Twitter cards are automatically generated if the ``twitter`` icon is configured
|
||||
in ``SOCIAL``!
|
||||
|
||||
All image paths are relative from the site root directory. You can also use
|
||||
absolute URLs for ``og_image`` and ``twitter_image``.
|
||||
|
||||
Example:
|
||||
|
||||
|
||||
- To RST
|
||||
|
|
@ -142,6 +143,7 @@ My super title
|
|||
:summary: Short version for index and feeds
|
||||
:header_cover: /images/posts/super-title/cover.png
|
||||
:og_image: /images/posts/super-title/facebook_cover.png
|
||||
:twitter_image: /images/posts/super-title/twitter_cover.png
|
||||
```
|
||||
|
||||
- To Markdown
|
||||
|
|
@ -156,6 +158,7 @@ Authors: Alexis Metaireau, Conan Doyle
|
|||
Summary: Short version for index and feeds
|
||||
Header_Cover: /images/posts/super-title/cover.png
|
||||
Og_Image: http://example.com/facebook_cover.png
|
||||
Twitter_Image: http://example.com/twitter_cover.png
|
||||
|
||||
This is the content of my super blog post.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -26,34 +26,33 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block twitter_card %}
|
||||
{% if TWITTER_HANDLE %}
|
||||
{% if article.header_cover %}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:image" content="{{ article.header_cover }}">
|
||||
{% elif HEADER_COVER %}
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:image" content="{{ HEADER_COVER }}">
|
||||
{% else %}
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/post-bg.jpg">
|
||||
{% endif %}
|
||||
<meta name="twitter:site" content="@{{ TWITTER_HANDLE }}" />
|
||||
<meta name="twitter:title" content="{{ article.title }}" />
|
||||
{% if description %}
|
||||
<meta name="twitter:description" content="{{ description }}" />
|
||||
{% elif article.headline %}
|
||||
<meta name="twitter:description" content="{{ article.headline }}" />
|
||||
{% else %}
|
||||
<meta name="twitter:description" content="{{ article.summary }}" />
|
||||
{% endif %}
|
||||
{% if article.header_cover %}
|
||||
{% for name,link in SOCIAL if name in ['twitter'] %}
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@{{ link|replace('http://', 'https://')|replace('https://twitter.com/', '') }}">
|
||||
<meta name="twitter:title" content="{{ article.title }}">
|
||||
|
||||
{% if article.twitter_image %}
|
||||
{% if article.twitter_image|lower|truncate(4, True, '') == "http" %}
|
||||
<meta property="twitter:image" content="{{ article.twitter_image }}">
|
||||
{% else %}
|
||||
<meta property="twitter:image" content="{{ SITEURL }}/{{ article.twitter_image }}">
|
||||
{% endif %}
|
||||
{% elif article.header_cover %}
|
||||
<meta name="twitter:image" content="{{ SITEURL }}/{{ article.header_cover }}">
|
||||
{% elif HEADER_COVER %}
|
||||
<meta name="twitter:image" content="{{ SITEURL }}/{{ HEADER_COVER }}">
|
||||
{% else %}
|
||||
<meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/post-bg.jpg">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if description %}
|
||||
<meta name="twitter:description" content="{{ description }}">
|
||||
{% elif article.headline %}
|
||||
<meta name="twitter:description" content="{{ article.headline }}">
|
||||
{% else %}
|
||||
<meta name="twitter:description" content="{{ article.summary|striptags|truncate(140) }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
{% block opengraph %}
|
||||
{{ super() }}
|
||||
|
|
|
|||
|
|
@ -81,21 +81,17 @@
|
|||
<meta property="og:site_name" content="{{ SITENAME }}">
|
||||
{% endblock opengraph %}
|
||||
{% block twitter_card %}
|
||||
{% if TWITTER_HANDLE %}
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:site" content="@{{ TWITTER_HANDLE }}" />
|
||||
<meta name="twitter:title" content="{{ SITENAME }}" />
|
||||
{% if SITESUBTITLE %}
|
||||
<meta name="twitter:description" content="{{ SITESUBTITLE }}" />
|
||||
{% else %}
|
||||
<meta name="twitter:description" content="View the blog." />
|
||||
{% endif %}
|
||||
{% for name,link in SOCIAL if name in ['twitter'] %}
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@{{ link|replace('http://', 'https://')|replace('https://twitter.com/', '') }}">
|
||||
<meta name="twitter:title" content="{{ SITENAME }}">
|
||||
<meta name="twitter:description" content="{{ SITESUBTITLE|default('View the blog.') }}">
|
||||
{% if HEADER_COVER %}
|
||||
<meta name="twitter:image" content="{{ SITEURL }}/{{ HEADER_COVER }}">
|
||||
{% else %}
|
||||
<meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/post-bg.jpg">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endblock twitter_card %}
|
||||
</head>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue