Git Product home page Git Product logo

pelican-advthumbnailer's Introduction

pelican-advthumbnailer

A thumbnail generator for Pelican that automatically scans all image tags looking for missing images and creates the thumbnails based on the filename.

Based on the existing thumbnailer plugin.

Install

To install the library, you can use pip

$ pip install pelican-advthumbnailer

Usage

  1. Update pelicanconf.py:

    1. Add advthumbnailer to PLUGINS.

      You should add it before any image optimization plugins.

      PLUGINS = [..., 'advthumbnailer']
  2. Creating a thumbnail:

    1. Ensure original image is copied to the output folder (add to STATIC_PATHS or use the autostatic plugin).

      E.g: output/images/example.png

    2. Add an <img> (or a <source> tag) containing as source (or scrset):

      images/thumbnails/<spec>/example.png
      

      Where <spec> is one of the following:

      • <number>: Perform a square resize of the image to <number>x<number> pixels.
      • <number1>x<number2>: Perform a scale and crop resize of the image to <number1>x<number2> pixels.
      • <number1>x_ or _x<number2>: Perform an aspect-preserving resize of the image enforcing the specified with or height, respectively, in pixels.

      <spec> can also be terminated with a ! in which case upscales (e.g: resize 100px to 200px) will also be allowed. By default this is not the case.

      Example:

      <img src="images/thumbnails/100x_/example.png" />
    3. Upon output generation, all files are scanned for image sources and those matching the .*thumbnails/<spec>/.+ regex are thumbnailed according to the <spec>.

Options

  • ADVTHUMB_SEARCH_IMAGES_IN_ANCHORS (default: False): Boolean option that determines if advthumbnailer should consider the href attribute of <a> elements as thumbnail paths.

Integrations

pelican-autostatic

Integration with pelican-autostatic is achieved by adding an option to the {static ...} replacement.

{static images/example.png thumb="100x_"}

Jinja2

Integration with Jinja2 is achieved via the thumbnail function.

<img src="{{ SITEURL + "images/example.png" | thumbnail("100x_") }}" />

Example usage

For a working example check my site and my site's source code.

pelican-advthumbnailer's People

Contributors

alexjf avatar iv avatar

Stargazers

 avatar

Watchers

Victor Domingos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.