Package: pelican-plugin-image-preview-thumbnailer
Pelicanplugin that insert thumbnails along image links.Demo pagehttps://chezsoi.org/lucas/blog/pages/images-libres-de-droits.html#fontsSource Markdown:pages/images-libres-de-droits.mdUsage instructionsTo enable this plugin:Install the package from Pypi:pip install pelican-plugin-image-preview-thumbnailerAdd the plugin to yourpelicanconf.py:PLUGINS=[...,'image_preview_thumbnailer']Enable it on the article / pages you wish by inserting this piece of metadata:Image-preview-thumbnailer:$selector$selectoris a CSS selector to target HTML elements this plugin will parse and look for<a>hyperlinks.
It can be for examplearticleif your Pelican template place your pages content in<article>tags,
or justbodyto select the whole page.
Several comma-separated values can be provided as CSS selectors toImage-preview-thumbnailer.Supported link formatsCurrently this plugin support preview of the following links:"raw" links to GIF/JPEG/PNG imageslinks toWikipedia/Wikimediaimageslinks toArtStationartwork pageslinks toBehanceartwork pageslinks toDafontfont pageslinks toFreeSVG.orgvector imageslinks toPixabayimageslinks to pages with a<meta property="og:image">or<meta property="twitter:image">properties,
likeDeviantArtartworks,Flickrphotos,https://itch.iopages,OpenGameArtassets orWikiArtpagesFeel free to submit PRs to add support for more image hosting websites.Only displaying thumbnails on hoverThe initial idea for this plugin was to just add🖼️icons after links to images,
and then only display thumbnails when hovering on those icons.To configure this plugin to behave like this, defines the following in yourpelicanconf.py:IMAGE_PREVIEW_THUMBNAILER_INSERTED_HTML='<span class="previewable"> 🖼️</span><img src="{thumb}" class="preview-thumbnail">'And insert those CSS rules:.preview-thumbnail{display:none;}.previewable:hover+.preview-thumbnail{display:block;}Usage with images lazyloadingThere are various Javascript libraries that can provide images lazyloading.
If your Pelican template make use of one, you can customizeIMAGE_PREVIEW_THUMBNAILER_INSERTED_HTMLin order to benefit from it.For example, to do so usinglazysizes, defines the following in yourpelicanconf.py:IMAGE_PREVIEW_THUMBNAILER_INSERTED_HTML='''<a href="{link}" target="_blank"><div class="lazyload" data-noscript=""><noscript><img src="{thumb}" alt=""></noscript></div></a>'''ConfigurationAvailablepelicanconf.pyoptions:IMAGE_PREVIEW_THUMBNAILER_INSERTED_HTML(optional, default:<a href="{link}" target="_blank" class="preview-thumbnail"><img src="{thumb}" class="preview-thumbnail"></a>) :
the HTML code to be inserted after every link (<a>) to an image, in order to preview itIMAGE_PREVIEW_THUMBNAILER_IGNORE_404(optional, default:False) :
avoid raising exceptions that abort Pelican when links are found, pointing to images, but they end up in HTTP 404 errorsSILENT_HTTP_ERRORS(optional, default:True) :
avoid raising exceptions that abort Pelican when links are found, pointing to images, but they end up with an HTTP error, of any kind. An error log message is still produced.IMAGE_PREVIEW_THUMBNAILER_DIR(optional, default:thumbnails) :
directory where thumbnail images are storedIMAGE_PREVIEW_THUMBNAILER_EXCEPT_URLS(optional) :
comma-separated list of regex patterns of URLs to ignoreIMAGE_PREVIEW_THUMBNAILER_THUMB_SIZE(optional, default:300) :
size in pixel of the generated thumbnails.IMAGE_PREVIEW_THUMBNAILER_ENCODING(optional, default:utf-8) :
encoding to use to parse HTML filesIMAGE_PREVIEW_THUMBNAILER_HTML_PARSER(optional, default:html.parser) :
parse that BEautifulSoup will use to parse HTML filesIMAGE_PREVIEW_THUMBNAILER_CERT_VERIFY(optional, default:False) :
enforce HTTPS certificates verification when sending linkbacksIMAGE_PREVIEW_THUMBNAILER_REQUEST_TIMEOUT(optional, in seconds, default:3) :
time in seconds allowed for each HTTP linkback request before abandonIMAGE_PREVIEW_THUMBNAILER_SELECTOR(optional, default:body) :
CSS selector to target HTML elements this plugin will parse and look for<a>hyperlinks.IMAGE_PREVIEW_THUMBNAILER_USERAGENT(optional, default:pelican-plugin-image-preview-thumbnailer) :
theUser-AgentHTTP header to use while sending notifications.IMAGE_PREVIEW_THUMBNAILER(optional, default:False) :
enable the plugin on all your pagesAvailable metadata entries:image-preview-thumbnailer:$selector or just trueimage-preview-thumbnailer-except-urls:same as IMAGE_PREVIEW_THUMBNAILER_EXCEPT_URLSimage-preview-thumbnailer-ignore-404:same as IMAGE_PREVIEW_THUMBNAILER_IGNORE_404image-preview-thumbnailer-inserted-html:same as IMAGE_PREVIEW_THUMBNAILER_INSERTED_HTMLimage-preview-thumbnailer-thumb-size:same as IMAGE_PREVIEW_THUMBNAILER_THUMB_SIZEYou will also have to define a$PIXABAY_API_KEYenvironment variable
to download images fromPixabay.Release notescf.CHANGELOG.mdContributingContributions are welcome and much appreciated. Every little bit helps. You can contribute by improving the documentation,
adding missing features, and fixing bugs. You can also help out by reviewing and commenting onexisting issues.To start contributing to this plugin, review theContributing to Pelicandocumentation,
beginning with theContributing Codesection.Releasing a new versionWith a valid~/.pypirc:updateCHANGELOG.mdbump version inpyproject.tomlpoetry build && poetry publishperform a release on GitGub, including the description added toCHANGELOG.mdLinter & testsTo execute them:pylint *.py
pytest