Replacements for WP-Plugins

[che-rusker]

Howdy,

not for the first time I am thinking about switching my blogs from WP to Publii.

I am using footnotes a lot, but haven't seen anything for that yet.

Also I'd love to have image comparison in Publii as well.

I am not a developer, but wouldn't mind editing some files to implement the functionality.
Perhaps like so?

Would be great if someone with the necessary knowledge could turn this into a plugin.

Cheers,
Michael

[dziudek]

Hi,

Both features seems to be quite niche - currently we have no plans for such official plugins. Maybe somebody from the community will built them. Regarding image comparision - you can always use raw HTML mode and implement whatever you need. Also you can consider plugin like: https://marketplace.getpublii.com/plugins/smart-replacer/ to create a custom rule which will get as params 2 URLs to images and then will place them in a proper HTML context with additional HTML syntax and scripts like [my_image_comparision img1="URL_TO_FIRST_IMAGE" img2="URL_TO_SECOND_IMAGE"] to avoid writing the code all the time.

[che-rusker]

I would not call something that keeps me from switching my 4 blogs (news, food, photography...) with thousands of posts from WP to Publii "niche".

Ah well, at least WP works as desired...

[candidexmedia]

Hi Michael,

Footnotes

I am using footnotes a lot, but haven't seen anything for that yet.

One of the three Publii editors (the WYSIWYG editor) uses the TinyMCE, and TinyMCE has a footnotes plugin, but it's not free... I'm also not sure which version of TinyMCE Publii uses, and whether that Plugin would be compatible.

In any case, footnotes are possible manually, but it does require a few steps. Here's an example:

<p>Heading<sup><a href="#footnotes-2">1</a></sup> is a a heading that makes a lot of sense. That said, only use it once.<sup><a href="#footnotes-3">2</a></sup></p>
<hr>
<section class="footnotes">
	<ol>
		<li id="footnotes-2">This is my footnote</li>
		<li id="footnotes-3">This is another footnote</li>
	</ol>
</section>

Result:

This implementation could also work in theory, but I haven't tested it yet across multiple pages: https://codepen.io/SitePoint/pen/QbMgvY?editors=1100

You may also want to consider a footnote JS library which displays the note in context with the content, such as Littlefoot.

Image Comparison

Also I'd love to have image comparison in Publii as well.

I am not a developer, but wouldn't mind editing some files to implement the functionality. Perhaps like so?

Yup, that's what I'd recommend doing in this case, either with the code you shared or another JavaScript library that can be loaded via hosting the JS files or via CDN.

There are also ways of making the implementation easier and baking it into a custom theme by extending the WYSIWYG Editor.

There isn't official plugins documentation yet, but someone in the former forum started working on some unofficial plugin docs. Maybe those instructions could help you create a plugin, or maybe you could reach out to that person to collaborate on plugins.

[HowToMeetLadies]

I've prepared something... Footnotes plugin for Publii

This plugin will replace [^n]: (definition) and [^n] (link) with the following markup:

[^1]: becomes <span class="footnote" id="fn-1"><a href="#fnref-1">1</a>.</span>
and [^1] becomes <sup class="footnote" id="fnref-1"><a href="#fn-1" rel="footnote">1</a></sup>

You can see an example on the page. 🍻

[che-rusker]

Many thanks to anyone coming up with constructive proposals and practical hints. 👍

[HowToMeetLadies]

One more way:

If you would like to support Publii, you can also do this with the SmartReplacer plugin.

Then use the following regexes:

Pattern: /\[\^(\d+)\]:/gi
Replace with: <span class="footnote" id="fn-$1"><a href="#fnref-$1">$1</a>.</span>

Pattern: /\[\^(\d+)\]/gi
Replace with: <sup class="footnote" id="fnref-$1"><a href="#fn-$1" rel="footnote">$1</a></sup>

[candidexmedia]

Chris, you're a gem to the Publii community! This is what open source is all about. 🚀

I had also tried working on a way to help generate footnotes (demo, source code), but the plugin is a much better idea.

[HowToMeetLadies]

🤓 ImageComparison plugin for Publii

[che-rusker]

Wonderful! Vielen Dank! 🙂

I'll check you stuff out soon.