Skip to content
Permalink
Browse files

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

Thumbnail shortcode, take 2
  • Loading branch information...
Kwpolska committed Sep 19, 2017
2 parents 22e86f5 + e02b4e8 commit b19f9a4bc69cba0b103da13e398bb204c934ebdc
Showing with 109 additions and 26 deletions.
  1. +2 −0 CHANGES.txt
  2. +36 −26 docs/manual.txt
  3. +12 −0 nikola/plugins/shortcode/thumbnail.plugin
  4. +59 −0 nikola/plugins/shortcode/thumbnail.py
@@ -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)
@@ -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:

This comment has been minimized.

Copy link
@michaelb42

michaelb42 Sep 19, 2017

Contributor

Enhancement request: Add a title attribute and e.g. colorbox will display it.

This comment has been minimized.

Copy link
@ralsina

ralsina via email Sep 19, 2017

Member

.. code:: text

{{% raw %}}{{% thumbnail url="/images/foo.png" %}}{{% /thumbnail %}}{{% /raw %}}

This comment has been minimized.

Copy link
@michaelb42

michaelb42 Sep 19, 2017

Contributor

The handler does not expect an argument url=... but the image filename.

This comment has been minimized.

Copy link
@Kwpolska

Kwpolska Sep 20, 2017

Author Member

Oh, right, sorry. I should have copied my testing examples. Fixed.

{{% 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 %}}

This comment has been minimized.

Copy link
@michaelb42

michaelb42 Sep 19, 2017

Contributor

The caption hast to be attributed with class="caption" at least for bootstrap* themes to be centered.

This comment has been minimized.

Copy link
@Kwpolska

Kwpolska Sep 20, 2017

Author Member

Yeah, we do that in our theme.css. I changed it, although you can put any HTML there nevertheless.

{{% 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
~~~~~~~~~~~~~~~~~~~~
@@ -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
@@ -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, []

0 comments on commit b19f9a4

Please sign in to comment.
You can’t perform that action at this time.