Skip to main content

exposure.co clone in a static web generating tool

Project description

Prosopopee

More or less a small clone of exposure.co in form of a static generator. For those of you who don’t know what exposure.co is, this more or less allows you to organise you picture in a way that more or less tell a story.

You can find example usages here:

Why?

I wanted to learn a bit of advanced css and I wanted to self-host my data.

Requirements

Installation needs Python, pip and virtualenv

apt-get install python-pip python-virtualenv

Gallery building needs graphicsmagick library

apt-get install graphicsmagick

Installation

  1. Create a virtualenv, and activate it

virtualenv ve
source ve/bin/activate
  1. Download and install Prosopopee

pip install prosopopee

Files organisation

The files organisation is quite simple:

  • in the root directory of your project you need a settings.yaml file that will contains the title and subtitle of your gallery

  • for each gallery you’ll need a folder that also contains a settings.yaml file that will describe how to display the content on your gallery

  • and you put the pictures of the gallery inside the gallery folder

Root settings.yaml

The root settings.yaml should contains 2 keys : one for the title of your website and one for the subtitle. It should looks like that:

title: My exploration of the outside world
sub_title: it's a scary place, don't go there

It can also optionally contain a menu and global settings.

Global settings

Global settings can be set in your root settings.yaml, under the settings key.

GM

Currently a gm settings key allows to customize the default GraphicsMagick’s behavior. It looks like :

settings:
  gm:
    quality: 75
    auto-orient: True
    strip: True
    resize: 50%

The meaning of the currently supported GraphicsMagick’s settings is as follows : * quality allows to customize the compression level of thumbnails (between 0 and 100) * auto-orient change the orientation of pictures so they are upright (based on corresponding EXIF tags if present) * strip removes all profiles and text attributes from the image (good for privacy, slightly reduce file size) * resize can be used to resize the fullsize version of pictures. by default, input image size is preserved

Any GraphicsMagick setting can be customized on a per-image basis (either cover or image, see below).

Themes

Prosopopée has a support for various themes. As for now, only 2 themes are available:

  • the default one called “exposure”

  • “material” based on materialcss

To specify the theme, add the “theme” key in your “settings” key or your root settings.yaml. For example:

title: My exploration of the outside world
sub_title: it's a scary place, don't go there
settings:
  theme: material
Licence

By default Prosopopée use CC-BY-SA for all the content, if you want use a another licence you need add key in root settings.yaml. For example:

licence:
   name: WTFPL
   url: "http://www.wtfpl.net/txt/copying/"
Share

If you want enable the share content on social network, add key in root settings.yaml. For example: By defaut you can share on facebook, twitter, pinterest, google+.

share: true
url: "http://prosopopee.com/"

Different kind of sections

A gallery is composed of a succession of sections as you can see on this wonderfully totally uninteresting example gallery the gallery is composed of 5 sections:

  • a full screen picture with text written on it

  • a picture with borders around it

  • a group of 5 pictures

  • and a fullscreen picture without text on it this time

In your settings.yaml, a section will always have a type key that will describe its kind and additional data. Underneath, the type key is actually the name of an HTML template and the other data will be passed to this template.

You can find all the sections templates here: https://github.com/Psycojoker/prosopopee/tree/master/prosopopee/templates/sections

You often have an image key. You need to give it a path to the actual file. By convention, those files are put inside your gallery folder but this is not mandatory.

Full Screen picture with OR without text on it

This displays a full screen picture as shown in the example gallery in the first and last sections. How you should use it:

With text:

- type: full-picture
  image: big_picture.jpg
  text:
    title: Big picture title
    sub_title: Some text
    date: 2016-01-15
    date_end: 2016-01-24 (Optional)

Without text:

- type: full-picture
  image: big_picture.jpg
Bordered picture

This displays a centered picture that is surrounded by white (the background) as shown in the second position of the example gallery.

How to use it:

- type: bordered-picture
  image: another_picture.jpg
Group of pictures

This displays a group of zoomable pictures on one or multiple lines as shown on the fourth position (after the text) of the example gallery.

- type: pictures-group
  images:
    -
      - image1.jpg
      - image2.jpg
      - image3.jpg
    -
      - image4.jpg
      - image5.jpg

The first level - represent a line of pictures. The second level - represent the list of images in this line.

Know bug: the images are left aligned, so if you don’t put enough images on a line, you’ll have white space on the right.

Text

This displays some centered text as shown on the third position of the example gallery. HTML is allowed inside the text.

How to use it:

- type: text
  text: Some text, HTML <b>is allowed</b>.
Paragraph

This displays a h2 title followed by text. HTML is allowed inside of the text. If no title is declared, a separator is added.

How to use it:

- type: paragraph
  title: the title
  text: Some text, HTML <b>is allowed</b>.
HTML

This section is for raw html that will be centered (for example: inlining an OSM iframe).

How to use it:

- type: html
  html: <tag>some html stuff</html>
Panorama

This displays a very large picture with a drag-and-drop possibility on it.

How to use it:

- type: panorama
  image: 7.jpg
Author

This section is for describe the author of the story.

- type: author
  name: Adrien Beudin
  text: Some text
  image: IMG_20150725_200941.jpg
  twitter: beudbeud (Optional)
  facebook: beudbeud (Optional)
  website: plop.fr (Optional)

Images caption

Prosopopée has a support of caption in images, you can use it on bordered-picture and pictures-group.

Exemple on bordered-picture :

- type: bordered-picture
  image: another_picture.jpg
  text: This is a caption

And on pictures-group

- type: pictures-group
  images:
    -
      - name: image1.jpg
        text: This is a caption
      - image2.jpg
      - image3.jpg
    -
      - image4.jpg
      - image5.jpg

Background settings

For all section you can define the background.

Exemple for background color

- type: bordered-picture
  background: "#555"
  image: another_picture.jpg

or you can use picture

- type: text
  background: "url(background_picture.jpg)"
  text: Some text

Text color settings

For text, html and paragraph section you can define the text color.

Exemple

- type: bordered-picture
  color: "#333"

Example

As a recap, here is how the files of the example gallery are organised:

example
      ├── settings.yaml
      └── first_gallery
          ├── settings.yaml
          └── stuff.png

The content of example/settings.yaml:

title: "Example gallery"

The content of example/first_gallery/settings.yaml:

title: my first gallery
sub_title: some subtitle
date: 2015-12-08
cover: stuff.png
sections:
  - type: full-picture
    image: stuff.png
    text:
      title: Beautiful Title
      sub_title: pouet pouet
      date: 2015-12-08
  - type: bordered-picture
    image: stuff.png
  - type: text
    text: « voici plein de blabla à rajouter et <b>ceci est du gras</b> et encore plein plein plein plein de text car je veux voir comment ça va wrapper car c'est important et il faut pas que j'oublie de mettre des margins en % sinon ça va pas le faire alala là ça devrait aller »
  - type: pictures-group
    images:
      -
        - stuff.png
        - stuff.png
        - stuff.png
      -
        - stuff.png
        - stuff.png
  - type: full-picture
    image: stuff.png

Build the website

Note: You need to be in an activated virtualenv.

In a folder containing the root settings.yaml file, simply do

prosopopee

A build folder will be created in the current directory, containing an index.html, static files (css & js) and pictures.

TODO

  • write documentation on how to overwrite the templates

  • allow to overwrite static files (for that we need a merge mechanism)

  • be mobile responsivepouetpouet (this mean css + resize pictures)

  • probably moar sections + allows to add legends on pictures or something like that

  • add --source & --destination command line options

  • add rss/atom

Licence

GPLv3+

Credit

16:57 <meornithorynque> et tu as besoin d’un nom ? 16:57 <meornithorynque> genre n’importe quoi ? 16:57 <meornithorynque> je propose “Prosopopée”

Authors

By chronological order:

CHANGELOG

0.3.1 (2016-04-13)

  • fix: cover date was hidden by default, this was a backward breaking behavior

0.3 the “beudbeud release” (2016-04-13)

0.2 (2016-02-23)

0.1 (2016-02-09)

  • First pypi release

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

prosopopee-0.3.1.tar.gz (7.4 MB view hashes)

Uploaded Source

Built Distributions

prosopopee-0.3.1-py2.py3-none-any.whl (8.0 MB view hashes)

Uploaded Python 2 Python 3

prosopopee-0.3.1-py2.7.egg (7.9 MB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page