Git Product home page Git Product logo

pelican-cover-image's Introduction

Cover image

A Pelican plugin that adds a cover_image_url attribute to articles and pages. Includes settings for local and default images.

Installation

  1. Download this plugin
  2. Place it in your plugins directory
  3. Add pelican-cover-image to PLUGINS in your settings file.

Or see the general Plugin installation instructions.

Usage

Add the attribute cover_image to your article or page metadata:

title: My super title
date: 2010-12-03 10:20
cover_image: https://images.unsplash.com/photo-1471644865643-fe726490270a # Can also be a local image file, see further

This is the content of my super blog post.

This will activate the cover_image_url attribute for all articles (including drafts) and pages (including hidden pages), which you can use in templates as follows:

Article template:

<img src="{{ article.cover_image_url }}" alt="Cover image">

Page template:

<img src="{{ page.cover_image_url }}" alt="Cover image">

Example image by Ray Hennessy

Using local images

If you want to use local images in addition to full image URLs, you need to define in your settings file where those are stored:

COVER_IMAGES_PATH = "static/cover_images" # No trailing slash

Make sure that path is included in STATIC_PATHS so Pelican will copy all cover images to the output directory (see Pelican documentation):

STATIC_PATHS = ["static"] # Since /cover_images is a subdirectory of /static, it is included here

With the above settings, the cover_image_url for the following article will be http://example.com/static/cover_images/unicorn.jpg (format: SITEURL/COVER_IMAGES_PATH/cover_image):

title: My super title
date: 2010-12-03 10:20
cover_image: unicorn.jpg

This is the content of my super blog post.

Using a default image

By default cover_image_url will be empty if cover_image is not defined (either as URL or local file) in the article or page metadata. If you want to set a default image for all pages and articles, add one to your settings file:

COVER_IMAGE_DEFAULT = "https://images.unsplash.com/photo-1489513963600-afa31b458fec"

COVER_IMAGE_DEFAULT can also be a local image file, using the same settings as described above.

COVER_IMAGE_DEFAULT = "default_image.jpg" # Will look for image at COVER_IMAGES_PATH

Give credit

Only use images you have the right to use. If you are using images licensed under Creative Commons Attribution or alike, you can easily add extra attributes to your metadata:

title: My super title
date: 2010-12-03 10:20
cover_image: https://images.unsplash.com/photo-1471644865643-fe726490270a
cover_image_by: Ray Hennessy
cover_image_link: https://unsplash.com/photos/DAHUS8W4rNE

This is the content of my super blog post.

And adapt your template to:

<figure>
     <img src="{{ page.cover_image_url }}" alt="Cover image">
     <figcaption>Image by <a href="{{ page.cover_image_link }}">{{ cover_image_by }}</a></figcaption>
</figure>

LICENSE

LICENSE

pelican-cover-image's People

Contributors

peterdesmet avatar stilobique avatar

Watchers

 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.