Merge pull request #39 from MrSenko/twitter_cards

Refactor Twitter cards support

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 header cover to articles, insert the metadata ``header_cover``.
-To customize OpenGraph images, insert the metadata ``og_image``, otherwise
+ - To customize OpenGraph images, insert the metadata ``og_image``, otherwise
-``header_cover``, ``HEADER_COVER`` or a default image is used. You can also
+ ``header_cover``, ``HEADER_COVER`` or a default image is used.
-use absolute URLs for ``og_image``. Example:
+ - 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.
 ```

templates/article.html

@@ -26,34 +26,33 @@
 {% endblock %}
 
 {% block twitter_card %}
-    {% if TWITTER_HANDLE %}
+    {% for name,link in SOCIAL if name in ['twitter'] %}
-        {% if article.header_cover %}
+        <meta name="twitter:card" content="summary_large_image">
-            <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@{{ link|replace('http://', 'https://')|replace('https://twitter.com/', '') }}">
-            <meta name="twitter:image" content="{{ article.header_cover }}">
+        <meta name="twitter:title" content="{{ article.title }}">
-        {% elif HEADER_COVER %}
+
-            <meta name="twitter:card" content="summary" />
+        {% if article.twitter_image %}
-            <meta name="twitter:image" content="{{ HEADER_COVER }}">
+            {% if article.twitter_image|lower|truncate(4, True, '') == "http" %}
-        {% else %}
+                <meta property="twitter:image" content="{{ article.twitter_image }}">
-            <meta name="twitter:card" content="summary" />
+            {% else %}
-            <meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/post-bg.jpg">
+                <meta property="twitter:image" content="{{ SITEURL }}/{{ article.twitter_image }}">
-        {% endif %}
+            {% endif %}
-        <meta name="twitter:site" content="@{{ TWITTER_HANDLE }}" />
+        {% elif article.header_cover %}
-        <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 %}
             <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() }}

templates/base.html

@@ -79,21 +79,17 @@
 		<meta property="og:site_name" content="{{ SITENAME }}">
 	{% endblock opengraph %}
     {% block twitter_card %}
-        {% if TWITTER_HANDLE %}
+        {% for name,link in SOCIAL if name in ['twitter'] %}
-            <meta name="twitter:card" content="summary" />
+            <meta name="twitter:card" content="summary_large_image">
-            <meta name="twitter:site" content="@{{ TWITTER_HANDLE }}" />
+            <meta name="twitter:site" content="@{{ link|replace('http://', 'https://')|replace('https://twitter.com/', '') }}">
-            <meta name="twitter:title" content="{{ SITENAME }}" />
+            <meta name="twitter:title" content="{{ SITENAME }}">
-            {% if SITESUBTITLE %}
+            <meta name="twitter:description" content="{{ SITESUBTITLE|default('View the blog.') }}">
-                <meta name="twitter:description" content="{{ SITESUBTITLE }}" />
-            {% else %}
-                <meta name="twitter:description" content="View the blog." />
-            {% endif %}
             {% 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>