pendulum icon indicating copy to clipboard operation
pendulum copied to clipboard

Please add shortcode support for (hugo, hexo, leanpub, etc...)

Open onedrawingperday opened this issue 7 years ago • 3 comments

Following the discussion at #2

Don't know if this is possible, but it would be great to provide Hugo shortcode support alongside the existing Hexo support.

The Pendulum shortcode for Hexo is {% asset_img url "caption" %}. To make this work with Hugo the shortcode needs to be like so {{% asset_img "url" "caption" %}}.

Adding the double quotes to the shortcode URL is essential to make Pendulum an out-of-the-box editor for Hugo. The double curly brackets are not that essential.

Also here is the actual Hugo shortcode that I authored for use in tandem with Pendulum.

This shortcode will render an img that is in the same directory as the respective content file of a Hugo project. I am getting the content directory path with a bit of RegEx and as a bonus I have included the imageConfig function to get the dimensions of the image.

Contents of asset_img.html


<!-- image -->
<figure>
{{ $base := $.Page.Permalink | replaceRE "([^/]*)/$" "" }}
{{ $link := $.Page.RelPermalink | replaceRE "([^/]*)/$" "" }}
{{ $file := .Get 0 }}
{{ $.Scratch.Add "src" $link }}  
{{ $.Scratch.Add "src" $file }} 
{{ $src:= $.Scratch.Get "src"}}  
{{ $config := imageConfig (printf "/content/%s" $src) }}
        <img src="{{ $base }}{{ .Get 0 }}" alt="{{ with $.Page.Params.title}}{{.}}{{end}}" height="{{$config.Height}}" width="{{$config.Width}}" />
            <noscript>
    <img src="{{ $base }}{{ .Get 0 }}" alt="{{ with $.Page.Params.title}}{{.}}{{end}}"/>
  </noscript>
</figure>
<!-- image -->

If you choose to support the Hugo shortcode, feel free to include the above to the Release Notes to help other users.

Again thank you very much for Pendulum.

onedrawingperday avatar Nov 28 '17 09:11 onedrawingperday

Hey,

it would be nice to get some example syntax for various Hugo or Hexo shortcodes, which pendulum could support. It should support the asset_img with a single bracket, but that's not that hard to change, the biggest difficulty mostly lies in the fact that there's more shortcodes and it's time consuming to list and implement them, but I would love to increase support in a more systematic way.

Could you prepare a table which could be used for implementing this? I'm thinking something along the lines of the following columns:

  • shortcode name (asset_img) + link to shortcode docs,
  • shortcode examples ({{% asset_img ...%}})
  • expected output (![](image...))

As you can see, the biggest issue here is scope. Implementing individual shortcode renderers however is trivial, when one has a reasonable idea where to start. I'd put the above into the readme so it's clear what shortcodes are supported.

titpetric avatar Mar 11 '18 14:03 titpetric

There is no longer a need for Hugo shortcode support from Pendulum.

Hugo now supports markdown images relative to content files with Page Bundles.

onedrawingperday avatar Apr 17 '18 14:04 onedrawingperday

I've re-titled the issue as it might still be interesting for somebody to implement their own markdown-flavor or otherwise markup. I am locking it for conversation, because my previous comment clarifies what needs to be done if somebody is looking to add some markup into pendulum. Thanks for understanding ;)

titpetric avatar Apr 19 '18 13:04 titpetric