Allow to customize the column width of the colorbox theme.

This commit is contained in:
Simon Conseil
2014-03-26 23:43:50 +01:00
parent 792bd0a6b5
commit 012758a77e
4 changed files with 36 additions and 28 deletions

View File

@@ -24,6 +24,8 @@ Released on 2014-xx-xx.
about the incompatibility between autorotation and EXIF copy.
- New settings ``ignore_directories`` and ``ignore_files`` to filter
directories and files with pattern matching.
- New setting ``colorbox_column_size`` to customize the column width of the
colorbox theme.
Version 0.6.0
~~~~~~~~~~~~~

View File

@@ -34,6 +34,7 @@ _DEFAULT_CONFIG = {
'contrast': 1.0, 'sharpness': 1.0},
'albums_sort_reverse': False,
'autorotate_images': True,
'colorbox_column_size': 4,
'copy_exif_data': False,
'copyright': '',
'destination': '_build',

View File

@@ -130,3 +130,10 @@ ignore_files = []
# A symbolic link is used if ``orig_link`` is set to True (see above).
# files_to_copy = (('extra/robots.txt', 'robots.txt'),
# ('extra/favicon.ico', 'favicon.ico'),)
# Colorbox theme config
# The column size is given in number of column of the css grid of the Skeleton
# framework which is used for this theme: http://www.getskeleton.com/#grid
# Then the image size must be adapted to fit the column size.
# The default is 4 columns which gives 220px. 3 columns gives 160px.
# colorbox_column_size = 4

View File

@@ -17,11 +17,9 @@
</head>
<body>
<div class="container">
<div class="four columns">
<div class="sidebar">
<h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>
{% if settings.links %}
<nav id="menu">
<ul>
@@ -31,7 +29,6 @@
</ul>
</nav>
{% endif %}
<footer>
<p>{% if author %}&copy; {{ author }} - {% endif %}
Generated by <a href="{{ sigal_link }}">sigal</a></p>
@@ -43,31 +40,34 @@
<header>
{% if album.breadcrumb %}
<h2>
{%- for url, title in album.breadcrumb -%}
<a href="{{ url }}">{{ title }}</a>
{%- if not loop.last %} » {% endif -%}
{% for url, title in album.breadcrumb %}
<a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
{% endfor -%}
</h2>
<hr>
{% endif %}
</header>
{% set numbers = ["zero", "one", "two", "three", "four", "five", "six",
"seven", "eight", "nine", "ten", "eleven", "twelve"] %}
{% set column_size = settings.colorbox_column_size %}
{% set nb_columns = (12 / column_size)|int %}
{% set column_size_t = numbers[column_size] %}
{% if album.albums %}
{% for alb in album.albums %}
{% if loop.index % 3 == 1 %}
{% if loop.index % nb_columns == 1 %}
<div id="albums" class="row">
{% endif%}
<div class="four columns thumbnail
{% if loop.index % 3 == 1 %}alpha{% endif%}
{% if loop.index % 3 == 0 %}omega{% endif%}">
<a href="{{ alb.url }}">
<img src="{{ alb.thumbnail }}" class="album_thumb"
alt="{{ alb.name }}" title="{{ alb.name }}" /></a>
<span class="album_title">{{ alb.title }}</span>
</div>
{% if loop.last or loop.index % 3 == 0 %}
<div class="{{ column_size_t }} columns thumbnail
{% if loop.index % nb_columns == 1 %}alpha{% endif%}
{% if loop.index % nb_columns == 0 %}omega{% endif%}">
<a href="{{ alb.url }}">
<img src="{{ alb.thumbnail }}" class="album_thumb"
alt="{{ alb.name }}" title="{{ alb.name }}" /></a>
<span class="album_title">{{ alb.title }}</span>
</div>
{% if loop.last or loop.index % nb_columns == 0 %}
</div>
{% endif%}
{% endfor %}
@@ -85,18 +85,18 @@
<div id="gallery" class="row">
{% for media in album.medias %}
{% if media.type == "image" %}
<div class="four columns thumbnail
{% if loop.index % 3 == 1 %}alpha{% endif%}
{% if loop.index % 3 == 0 %}omega{% endif%}">
<div class="{{ column_size_t }} columns thumbnail
{% if loop.index % nb_columns == 1 %}alpha{% endif%}
{% if loop.index % nb_columns == 0 %}omega{% endif%}">
<a href="{{ media.filename }}" class="gallery" title="{{ media.filename }}" {{ img_description(media) }}>
<img src="{{ media.thumbnail }}" alt="{{ media.filename }}"
title="{{ media.filename }}" /></a>
</div>
{% endif %}
{% if media.type == "video" %}
<div class="four columns thumbnail
{% if loop.index % 3 == 1 %}alpha{% endif%}
{% if loop.index % 3 == 0 %}omega{% endif%}">
<div class="{{ column_size_t }} columns thumbnail
{% if loop.index % nb_columns == 1 %}alpha{% endif%}
{% if loop.index % nb_columns == 0 %}omega{% endif%}">
<a href="#{{ media.filename|replace('.', '')|replace(' ', '') }}"
class="gallery" inline='yes' title="{{ media.filename }}"
{% if media.big %} data-big="{{ media.big }}"{% endif %}>
@@ -118,10 +118,8 @@
{% if album.zip %}
<div id="additionnal-infos" class="row">
<p>
<a href="{{ album.zip }}"
title="Download a zip archive with all images">Download ZIP</a>
</p>
<p><a href="{{ album.zip }}"
title="Download a zip archive with all images">Download ZIP</a></p>
</div>
{% endif %}