Giter Site home page Giter Site logo

psycojoker / prosopopee Goto Github PK

View Code? Open in Web Editor NEW
312.0 16.0 53.0 62.98 MB

a static website generator to make beautiful customizable pictures galleries that tell a story

Home Page: http://prosopopee.readthedocs.org

License: GNU General Public License v3.0

Python 16.92% CSS 40.96% HTML 42.12%
storyline static-site-generator picture-gallery python prosopopee gallery story

prosopopee's Introduction

Prosopopee

Prosopopee. Static site generator for your story.

Make beautiful customizable pictures galleries that tell a story using a static website generator written in Python. You don't need to care about css, code and presentation, manage your contents in YAML file and Prosopopee will take care about the rest.

Prosopopee is sections oriented, make it very flexible, many kinds of section already available:

  • Parallax
  • Group of pics (gallery)
  • Paragraph
  • Iframe (Youtube, Maps, etc..)
  • Quote
  • And more

Screenshots

Features

Prosopopee currently supports:

  • Automatic generation
  • Lightweight
  • Thumbnails & multiple resolutions for fast previews (JPEG progressive)
  • Videos support
  • Mobile friendly
  • Caching for fast rendering
  • Multi level gallery
  • Support themes (default, material, light)
  • Password access (encrypt page)
  • Image lazy loading
  • Night Mode
  • Completely static output is easy to host anywhere
  • Hackable

Examples

You can find example usages here:

Code example

title: Title
date: 2015-12-18
cover: P1070043-01-01.jpeg
sections:
  - type: full-picture
    image: P1060979-01-01.jpeg
    fixed: true
    text:
      title: My Story
      sub_title: some subtitle
      date: 2015-12-18
  - type: paragraph
    title: Beautiful Title
    text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
  - type: pictures-group
    images:
      -
        - P1060938-01-01.jpeg
        - P1060946-01-01.jpeg
        - P1060947-01-01.jpeg
        - P1060948-01-01.jpeg

Usage

  prosopopee
  prosopopee test
  prosopopee preview
  prosopopee deploy
  prosopopee autogen (-d <folder> | --all ) [--force]
  prosopopee (-h | --help)
  prosopopee --version
                                                                                
Options:                                                                        
  test          Verify all your yaml data                                       
  preview       Start preview webserver
  deploy        Deploy your website                                             
  autogen       Generate gallery automaticaly                                   
  -h, --help    Show this screen.                                               
  --version     Show version.

Docker

https://hub.docker.com/r/beudbeud/prosopopee/

Licence

GLPv3

Documentation

http://prosopopee.readthedocs.org/en/latest/

IRC

channel : irc.freenode.net#prosopopee

prosopopee's People

Contributors

0x010c avatar arthurlutz avatar beudbeud avatar charlesnepote avatar crypto512 avatar eugeneandrienko avatar gangelop avatar julienmalik avatar kloadut avatar nicolasbrosse avatar olethanh avatar opi avatar psycojoker avatar qschulz avatar taziden avatar thatch avatar titoko avatar treellama avatar volodymyrss avatar xplastikman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

prosopopee's Issues

autogen silently omits some images

If this is intentional, it shouldn't be silent and undocumented.
I'm suspecting it's unintentional because I noticed that an image gets omitted when the template adds a new row.
Looking at the code now...

Unnecessary loading image for gallery cover twice?

I do not clearly understand this lines of code added in this commit f12587b:

<div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x900") }}'), url('{{ cover.generate_thumbnail("x150") }}');"></div>
{% else %}
<div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x1366") }}'), url('{{ cover.generate_thumbnail("x900") }}');"></div>

Based on the information from MDN about background-image CSS property — browser loads first specified image in this property and puts it on the top of the «stack» of images. After that it loads second image from background-image property — and puts it behind first image.

So, looks like we load (and process with gm) the same image for the gallery cover on main page twice. But we can see only first specified image (x1366), because second (x900) is smaller and fully covered by first image.

I've tested — in my installation of prosopopee with removed loading of first (bigger) image — I've got 4.21 Mb of data transferred with all request when loading main page. And I waiting 196 ms before all requests completed.

With default index.html, without my changes — I've got 14.84 Mb and 519 ms.
Of course, all tests were without browser cache.

If twice image loading is not needed — I can submit a pull request with removed loading of bigger (first) image for gallery cover.

full-picture with space in filename does not render

full-picture with space in filename does not render
In a gallery settings.yaml, the image with filename test pic.jpg does not render in the browser. There's just a gray background.

sections:
    - type: full-picture
      image: test pic.jpg

It works if the space is removed (and the underlying file appropriately renamed).

sections:
    - type: full-picture
      image: test-pic.jpg

I'm a bit at a loss with this one. No idea what's causing it.

invalid date field results in traceback

Typoing the date field results in a somewhat confusing error message:

Traceback (most recent call last):
  File "/home/jelmer/bin/prosopopee", line 10, in <module>
    sys.exit(main())
  File "/home/jelmer/.local/lib/python3.7/site-packages/prosopopee/prosopopee.py", line 629, in main
    galleries=reversed(sorted([x for x in front_page_galleries_cover if x != {}], key=lambda x: x["date"]))
TypeError: '<' not supported between instances of 'str' and 'datetime.date'

picture captions?

Is there a way to add captions to pictures?
Or to view the photo groups as a photo carousel?

Paragraph image errors

In the docs you can insert an image like so:

  • type: paragraph
    title: the title
    text: Some text, HTML is allowed.
    image: image.jpg
    float: right
    size: 150px

If I do this, and run a build, I get the error: Abort: There are something wrong in

If I remove the float & size settings it works fine, however I want to set the size and position. any ideas? using v0.8.1 in docker for the builds

alignment issue when pictures do not fill the line in pictures-group section

When pictures are too small to fill a pictures-group's line (which can happen with two portrait pictures; for example on a 1080p screen since the pictures are x600 thumbnails, only two portrait pictures in one line would make the content of the line ~1200px instead of the ~1920px (it's actually with the current syle.css 77% of that => ~1500px) of available space.

Alignment issue

The issue is particularly present when zooming out:
Alignment issue zooming out

I'd expect the pictures to fill the whole line.

internationalization

I need to make prosopopee multilingual.
Probably it is not so much work and modifications, so i'd like to implement it.

Opening this issue in the hope to get feedback first (so that it has a chance to get merged upstream in the future).

My initial thoughts:

Any title/subtitle/text could have :

  • one default version, as it is today
  • a number of optional translations
    like :
title: Hello
  fr : Salut
  es: Ola

The list of translations might need to be referenced from the main settings.
Then for each page we render the different flavors :

  • index.html
  • index.fr.html
  • index.es.html

and in all headers, we put a small widget with flags to switch between languages (ideas welcome for that, i'm far from fluent in html/css/js).

video cover doesn't streach out like a cover should

On home page, a video isn't streached out like an image is, resulting is not expected behavior as you can see on this image:

2016-06-18-022130_1248x666_scrot

The video on left (left aligned), we see a piece of the image that display when the video isn't loaded (the centered one behind the video) and the the video isn't taking the full space available like the image is doing on the right.

Those are 2 links on how this possibly could be solved:

http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html
http://slicejack.com/fullscreen-html5-video-background-css/

To reproduce simply build the example gallery.

panorama broken since 729b946

panorama broken since 729b946

Currently in master at 0c6e83f build exits successfully but render fails in browser with console output:

jquery.min.js:2 Uncaught TypeError: e.indexOf is not a function
    at k.fn.init.k.fn.load (jquery.min.js:2)
    at HTMLElement.<anonymous> (jquery.panorama_viewer.min.js:1)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at k.fn.init.e.fn.panorama_viewer (jquery.panorama_viewer.min.js:1)
    at (index):82
k.fn.load @ jquery.min.js:2
(anonymous) @ jquery.panorama_viewer.min.js:1
each @ jquery.min.js:2
each @ jquery.min.js:2
e.fn.panorama_viewer @ jquery.panorama_viewer.min.js:1
(anonymous) @ (index):82

Might investigate further but I've never touched jQuery before.

Errors when starting prosopopee

Hello,
I just installed all packages and prosopopee as written in the documentation, but got this error messages when executing "prosopopee" or "prosopopee test":

(ve) toasti@toasti-LXM:~/Pictures/Prosopopee/pics$ prosopopee 
warning: If you want the rss and/or the social network share to work, you need to specify the website url in root settings
Traceback (most recent call last):
  File "/home/toasti/Pictures/Prosopopee/ve/bin/prosopopee", line 8, in <module>
    sys.exit(main())
  File "/home/toasti/Pictures/Prosopopee/ve/local/lib/python2.7/site-packages/prosopopee/prosopopee.py", line 634, in main
    build_index(settings, front_page_galleries_cover, templates)
  File "/home/toasti/Pictures/Prosopopee/ve/local/lib/python2.7/site-packages/prosopopee/prosopopee.py", line 549, in build_index
    Video=Video
  File "/home/toasti/Pictures/Prosopopee/ve/local/lib/python2.7/site-packages/jinja2/environment.py", line 1008, in render
    return self.environment.handle_exception(exc_info, True)
  File "/home/toasti/Pictures/Prosopopee/ve/local/lib/python2.7/site-packages/jinja2/environment.py", line 780, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/home/toasti/Pictures/Prosopopee/ve/local/lib/python2.7/site-packages/prosopopee/themes/exposure/templates/index.html", line 1, in top-level template code
    {% extends "base.html" %}
  File "/home/toasti/Pictures/Prosopopee/ve/local/lib/python2.7/site-packages/prosopopee/themes/exposure/templates/base.html", line 33, in top-level template code
    {% block content %}
  File "/home/toasti/Pictures/Prosopopee/ve/local/lib/python2.7/site-packages/prosopopee/themes/exposure/templates/index.html", line 39, in block "content"
    {% if settings.show_date and gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
jinja2.exceptions.UndefinedError: 'str object' has no attribute 'strftime'

Could you please help?

The "Themes" folder was empty, I downloaded the package and copied the themes manually into the folder.

Many thanks!

autogen: UnboundLocalError: local variable 'datetime' referenced before assignment

version 1.0.1
On running prosopopee autogen -d $somedir it fails with:

Traceback (most recent call last):
  File "/bin/prosopopee", line 33, in <module>
    sys.exit(load_entry_point('prosopopee==1.0.1', 'console_scripts', 'prosopopee')())
  File "/usr/lib/python3.8/site-packages/prosopopee/prosopopee.py", line 621, in main
    autogen(arguments['<folder>'], arguments['--force'])
  File "/usr/lib/python3.8/site-packages/prosopopee/autogen.py", line 81, in autogen
    build_template(folder, force)
  File "/usr/lib/python3.8/site-packages/prosopopee/autogen.py", line 68, in build_template
    files=sorted(files_grabbed, key=get_exif)
  File "/usr/lib/python3.8/site-packages/prosopopee/autogen.py", line 48, in get_exif
    return datetime
UnboundLocalError: local variable 'datetime' referenced before assignment

This is the offending function. Clearly there is one case where datetime does not get set.

def get_exif(filename):
    exif_data = {}
    exif = Image.open(filename)._getexif()
    if exif is not None:
        for (tag, value) in exif.items():
            decoded = TAGS.get(tag, tag)
            exif_data[decoded] = value
        if 'DateTime' in exif_data:
            datetime = exif_data['DateTime']
    else:
        datetime = strftime("%Y:%m:%d %H:%M:00", gmtime(os.path.getmtime(filename)))
    return datetime

I can't look into it further right now. I might later.

image currently in view is moved 50% down while lazy loading

It looks like this:
2020-09-20-1600557358_1920x1080
Once lazy loading is finished, the image returns in full view. When you move to the next image it does the same while the others are being loaded.

I hate this bug because:

  • I don't want to show my site to anybody in this state. It's jarring and goes against the otherwise nice and clean design.
  • I have no experience with frontend and I don't even know where to begin investigating this, especially due to it's elusive nature. All I can think of right now is git bisect...

Anybody out there pls help! I was able to fix all the other bugs that annoyed me (see pull requests). But it would be nice to have help with this one.

“prosopopee” encounter error,how to fix it?

hi。

apt-get install -y graphicsmagick
apt-get install -y yasm
wget http://ffmpeg.org/releases/ffmpeg-3.2.4.tar.bz2
tar jxvf ffmpeg-3.2.4.tar.bz2
cd ffmpeg-3.2.4
./configure
make
make install
cd ~
git clone https://github.com/webmproject/libvpx
cd libvpx
cd build
../configure
make
make install

cd /usr/local
git clone https://github.com/Psycojoker/prosopopee prosopopee-site
cd prosopopee-site
pip install -r requirements.txt
python setup.py install

cd example

root@localhost:/usr/local/prosopopee-site/example# prosopopee
warning: If you want the rss and/or the social network share to work, you need to specify the website url in root settings
Skipped: ././first_gallery/stuff.png is already generated
Skipped: ././first_gallery/stuff.png is already generated
Skipped: ././first_gallery/stuff.png is already generated
Generation: ././first_gallery/video.mp4
ffmpeg -loglevel error -i ././first_gallery/video.mp4 -c:v libvpx -b:v 3900k -qmin 10 -qmax 42 -maxrate 500k -bufsize 1500k -c:a libvorbis -b:v 100k -s 1280x720 -f webm -y ./build/./first_gallery/video.mp4
Unknown encoder 'libvpx'
Abort: ffmpeg command failed
root@localhost:/usr/local/prosopopee-site/example#

tks

How to change font?

Pardon my ignorance, I'm not a web dev at all.
The problem is that default crimson font doesn't look good with text in Russian. I've created a custom.css file with

body {
    font-family: 'Roboto', sans-serif !important;
}

block, but the font itself isn't changed. I'm sure that file placement is correct since adding a custom.js affects the website. How can I change font to something else?

Allow markdown text

I am working on allowing markdown-formatted text in title, sub_title, text and name texts of sections.

My first approach was to use a setting to allow choosing between markdown and HTML rendering, defaulting to HTML for backward compat.

But, as markdown also allows plain HTML, I am wondering about just making it the only and default rendering option (simplifying documentation and use).

The major drawback I can think about would be for people who wrote HTML text with blank lines in it, that would get meaning and produce <p> in output. IMHO, that is an acceptable break (major version bump to indicate that ?).

Not a proof of anything, but I compiled my own galleries with my markdown patch without any difference in output.

So, two questions :

  • is that feature welcomed (PR ahead, already working locally) ?
  • what about making markdown rendering the default and only option ?

autogen not working with my files

I've started using prosopopee today and I love the result but I've found some issues (this one and space in filename/dir issue).

autogen is generating random sequence so i've tried to understand why.
Regarding EXIF my issue was that the tag for the Date is DateTimeOriginal and not DateTime.
It also seems that exif[tag] is not a date when printed.

I've also used the new function getexif instead of _getexif.

Why using last modification instead of creation if there is no EXIF ? Maybe sometimes the filename is better in that case.

as I'm not a python programmer dont assume the code is done the right way but it works:

--- a/prosopopee/autogen.py
+++ b/prosopopee/autogen.py
@@ -36,14 +36,13 @@ types = ("*.JPG", "*.jpg", "*.JPEG", "*.jpeg", "*.png", "*.PNG")


 def get_exif(filename):
-    exif = Image.open(filename)._getexif()
+    exif = Image.open(filename).getexif()
     if exif is not None:
-        for tag in exif:
-            decoded = TAGS.get(tag, tag)
-            if decoded == "DateTime":
-                return exif[tag]
+        ctime = exif.get(36867)
+        if ctime is not None:
+            return ctime

-    return strftime("%Y:%m:%d %H:%M:00", gmtime(os.path.getmtime(filename)))
+    return strftime("%Y:%m:%d %H:%M:00", gmtime(os.path.getctime(filename)))


 def build_template(folder, force):

any advice ?

Missing files in sdist

It appears that the manifest is missing at least one file necessary to build
from the sdist for version 1.0.1. You're in good company, about 5% of other
projects updated in the last year are also missing files.

+ /tmp/venv/bin/pip3 wheel --no-binary prosopopee -w /tmp/ext prosopopee==1.0.1
Looking in indexes: http://10.10.0.139:9191/root/pypi/+simple/
Collecting prosopopee==1.0.1
  Downloading http://10.10.0.139:9191/root/pypi/%2Bf/9ac/75fb6e6821fe6/prosopopee-1.0.1.tar.gz (12 kB)
    ERROR: Command errored out with exit status 1:
     command: /tmp/venv/bin/python3 -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pip-wheel-qfzc0f54/prosopopee/setup.py'"'"'; __file__='"'"'/tmp/pip-wheel-qfzc0f54/prosopopee/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' egg_info --egg-base /tmp/pip-wheel-qfzc0f54/prosopopee/pip-egg-info
         cwd: /tmp/pip-wheel-qfzc0f54/prosopopee/
    Complete output (5 lines):
    Traceback (most recent call last):
      File "<string>", line 1, in <module>
      File "/tmp/pip-wheel-qfzc0f54/prosopopee/setup.py", line 17, in <module>
        install_requires=open("./requirements.txt", "r").read().split(),
    FileNotFoundError: [Errno 2] No such file or directory: './requirements.txt'
    ----------------------------------------
ERROR: Command errored out with exit status 1: python setup.py egg_info Check the logs for full command output.

Themes folder has to exist or prosopopee crashes

If the themes folder does not exist, the build process instantly crashes.

Traceback (most recent call last):
  File "/usr/local/bin/prosopopee", line 10, in <module>
    sys.exit(main())
  File "/usr/local/lib/python3.7/site-packages/prosopopee/prosopopee.py", line 610, in main
    templates = get_gallery_templates(theme)
  File "/usr/local/lib/python3.7/site-packages/prosopopee/prosopopee.py", line 336, in get_gallery_templates
    available_themes = theme, "', '".join(Path(__file__).parent.joinpath("themes").listdir())
  File "/usr/local/lib/python3.7/site-packages/path/__init__.py", line 497, in listdir
    self / child for child in os.listdir(self)
NotADirectoryError: [Errno 20] Not a directory: Path('/usr/local/lib/python3.7/site-packages/prosopopee/themes')

Affected version: 0.8.2

I’ll fix this myself as soon as I find the time to do so.

More options for generating images

Hi! First of all, thank you for building this :) I'm using it to create a family album on github pages for free to host old photos that I scan via my phone.

I have a couple ideas, not necessary, but possibly useful:

  1. Allow images to be of a max size. Pretend I set max size to be 1800. This means that if I have an image that is 720x1280, then it stays that size. But if I have an image that is 2440x3200, then it scales down to 1372x1800.

  2. Also, allow us to set gm generic dimensions. For example, right now, an image is resized something like 8 times (I don't remember that exact number). If I have 2000 photos, that's 16,000 images + the original 2000 making my repo hold 18,000 images. That's a lot. And github pages only lets me have repos with 1gb on them. Would be nice to only have maybe 3 sizes, like small, medium, and original. Or 2. Something like that.

  3. Possibly create an option that doesn't actually create any new images at all in the build folder. Instead, it just links from the original images.

Anyways, these are all just ideas for reducing storage space. Thanks again!

Requirements should be for `path` not `path.py` and then other errors

I wanted to play and at least test this out since your example gallery isn't working (another issue). So I installed on macOS, into a clean virtualenv. Using path.py, it found some super old version that doesn't work. I changed it to path and it worked fine.

I was going to submit a pull request but honestly, I have no idea if this will break anything else

Okay, so it seems to have broken something about how it is trying to load stuff since I get errors like:

NotADirectoryError: [Errno 20] Not a directory: Path('/Users/<REDACTED>/venv/prosopopee/lib/python3.8/site-packages/prosopopee-1.0.1-py3.8.egg/prosopopee/themes')

I suspect that is because the .egg is a zipfile so you need to open it that way.

Add next and previous gallery in gallery

in utils.py

def previous_and_next(some_iterable):
    prevs, items, nexts = tee(some_iterable, 3)
    prevs = chain([None], prevs)
    nexts = chain(islice(nexts, 1, None), [None])
    return izip(prevs, items, nexts)

for work i use this fonction but they not work well because i use it in this loop

for gallery in dirs:

but dirs is not sort by date

video conversions fail with space in filename

this

sections:
    images:
      -
         - type: video
           name: "cool video.mp4"

causes this

Generation: ./gallery1/cool video.mp4
ffmpeg -loglevel error -i ./gallery1/cool video.mp4 -c:v libvpx -b:v 3900k -qmin 10 -qmax 42 -maxrate 500k -bufsize 1500k -c:a libvorbis -b:v 100k -s 1280x720 -f webm -y "./build/gallery1/cool video.mp4.webm"
./gallery1/cool: No such file or directory
Abort: ffmpeg command failed

Some quotes are needed for {source} and {target} in prosopopee/prosopopee.py.

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.