Merge pull request #2904 from getnikola/thumbnail-shortcode-2

Thumbnail shortcode, take 2

CHANGES.txt

@@ -4,6 +4,8 @@ New in master
 Features
 --------
 
+* New ``thumbnail`` shortcode similar to the reStructuredText
+  ``thumbnail`` directive (via Issue #2809)
 * Rewrite ``nikola auto`` with asyncio and aiohttp (Issue #2850)
 * New ``listings`` shortcode similar to the reStructuredText listings
   directive (Issue #2868)

docs/manual.txt

@@ -1173,32 +1173,6 @@ Example of a paired shortcode (note that we don't have a highlight shortcode yet
 Built-in shortcodes
 ~~~~~~~~~~~~~~~~~~~
 
-doc
-    Will link to a document in the page, see `Doc role for details
-    <#doc>`__. Example:
-
-    .. code:: restructuredtext
-
-       {{% raw %}}Take a look at {{% doc %}}my other post <creating-a-theme>{{% /doc %}} about theme creating.{{% /raw %}}
-
-listing
-    Used to show a code listing. Example::
-
-        {{% raw %}}{{% listing hello.py python linenumbers=True%}}{{% /raw %}}
-
-    It takes a file name or path, an optional language to highlight, and a linenumbers option to enable/disable line numbers in the output.
-
-post-list
-    Will show a list of posts, see the `Post List directive for details <#post-list>`__
-
-media
-    Display media embedded from a URL, for example, this will embed a youtube video:
-
-    .. code:: text
-
-        {{% raw %}}{{% media url="https://www.youtube.com/watch?v=Nck6BZga7TQ" %}}{{% /raw %}}
-
-
 chart
     Create charts via PyGal. This is similar to the `chart directive <#chart>`__ except the syntax is adapted to
     shortcodes. This is an example:
@@ -1213,6 +1187,14 @@ chart
         'Others',  [14.2, 15.4, 15.3, 8.9, 9, 10.4]
         {{% /chart %}}{{% /raw %}}
 
+doc
+    Will link to a document in the page, see `Doc role for details
+    <#doc>`__. Example:
+
+    .. code:: restructuredtext
+
+       {{% raw %}}Take a look at {{% doc %}}my other post <creating-a-theme>{{% /doc %}} about theme creating.{{% /raw %}}
+
 emoji
     Insert an emoji. For example:
 
@@ -1227,11 +1209,39 @@ gist
 
     {{% raw %}}{{% gist 2395294 %}} {{% /raw %}}
 
+listing
+    Used to show a code listing. Example::
+
+        {{% raw %}}{{% listing hello.py python linenumbers=True %}}{{% /raw %}}
+
+    It takes a file name or path, an optional language to highlight, and a linenumbers option to enable/disable line numbers in the output.
+
+media
+    Display media embedded from a URL, for example, this will embed a youtube video:
+
+    .. code:: text
+
+        {{% raw %}}{{% media url="https://www.youtube.com/watch?v=Nck6BZga7TQ" %}}{{% /raw %}}
+
+post-list
+    Will show a list of posts, see the `Post List directive for details <#post-list>`__
 
 raw
     Passes the content along, mostly used so I can write this damn section and you can see the shortcodes instead
     of them being munged into shortcode **output**. I can't show an example because Inception.
 
+thumbnail
+    Display image thumbnails, optionally with captions, alignment, and alt text. Examples:
+
+    .. code:: text
+
+        {{% raw %}}{{% thumbnail url="/images/foo.png" %}}{{% /thumbnail %}}{{% /raw %}}
+        {{% raw %}}{{% thumbnail url="/images/foo.png" alt="Foo Image" align="center" %}}{{% /thumbnail %}}{{% /raw %}}
+        {{% raw %}}{{% thumbnail url="/images/foo.png" %}}<p>Image caption</p>{{% /thumbnail %}}{{% /raw %}}
+        {{% raw %}}{{% thumbnail url="/images/foo.png" alt="Foo Image" align="right" %}}<p>Right-aligned Foo Image caption</p>{{% /thumbnail %}}{{% /raw %}}
+
+
+    Looks similar to the reST thumbnail directive. Caption should be a HTML fragment.
 
 Community shortcodes
 ~~~~~~~~~~~~~~~~~~~~

nikola/plugins/shortcode/thumbnail.plugin

@@ -0,0 +1,12 @@
+[Core]
+name = thumbnail
+module = thumbnail
+
+[Nikola]
+PluginCategory = Shortcode
+
+[Documentation]
+author = Chris Warrick
+version = 0.1
+website = https://getnikola.com/
+description = Thumbnail shortcode

nikola/plugins/shortcode/thumbnail.py

@@ -0,0 +1,59 @@
+# -*- coding: utf-8 -*-
+
+# Copyright © 2017 Roberto Alsina, Chris Warrick and others.
+
+# Permission is hereby granted, free of charge, to any
+# person obtaining a copy of this software and associated
+# documentation files (the "Software"), to deal in the
+# Software without restriction, including without limitation
+# the rights to use, copy, modify, merge, publish,
+# distribute, sublicense, and/or sell copies of the
+# Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice
+# shall be included in all copies or substantial portions of
+# the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
+# KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+# WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+# PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
+# OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+# OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+# OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+# SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+"""Thumbnail shortcode (equivalent to reST’s thumbnail directive)."""
+
+from nikola.plugin_categories import ShortcodePlugin
+
+import os.path
+
+
+class ThumbnailShortcode(ShortcodePlugin):
+    """Plugin for thumbnail directive."""
+
+    name = "thumbnail"
+
+    def handler(self, uri, alt=None, align=None, target=None, site=None, data=None, lang=None, post=None):
+        """Create HTML for thumbnail."""
+        if uri.endswith('.svg'):
+            # the ? at the end makes docutil output an <img> instead of an object for the svg, which colorbox requires
+            src = '.thumbnail'.join(os.path.splitext(uri)) + '?'
+        else:
+            src = '.thumbnail'.join(os.path.splitext(uri))
+
+        output = '<a href="{0}" class="image-reference"><img src="{1}"'.format(uri, src)
+        if alt:
+            output += ' alt="{}"'.format(alt)
+        if align and not data:
+            output += ' class="align-{}"'.format(align)
+        output += '></a>'
+
+        if data and align:
+            output = '<div class="figure align-{2}">{0}{1}</div>'.format(output, data, align)
+        elif data:
+            output = '<div class="figure">{0}{1}</div>'.format(output, data)
+
+        return output, []