diff --git a/sigal/themes/colorbox/static/css/style.css b/sigal/themes/colorbox/static/css/style.css
index ce48612..707f47c 100644
--- a/sigal/themes/colorbox/static/css/style.css
+++ b/sigal/themes/colorbox/static/css/style.css
@@ -32,6 +32,9 @@ header h1 a {
   position: absolute;
   bottom: 40px;
 }
+.sidebar footer span {
+  display: block;
+}
 
 .thumbnail {
   text-align: center;
diff --git a/sigal/themes/colorbox/templates/album.html b/sigal/themes/colorbox/templates/album.html
index baadc75..a1a7d06 100644
--- a/sigal/themes/colorbox/templates/album.html
+++ b/sigal/themes/colorbox/templates/album.html
@@ -1,2 +1,82 @@
-<!-- generated from album -->
-{% extends "album_list.html" %}
+{% extends "base.html" %}
+{% block content %}
+  {% set numbers = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"] %}
+  {% set column_size = settings.colorbox_column_size %}
+  {% set nb_columns = (9 / column_size)|int %}
+  {% set column_size_t = numbers[column_size] %}
+
+  {% macro img_description(media) -%}
+    {% if media.big %} data-big="{{ media.big_url }}"{% endif %}
+    {% if media.exif %}
+      {% if media.exif.datetime %}
+        data-date=", {{ media.exif.datetime }}"
+      {% endif %}
+    {% endif %}
+  {%- endmacro %}
+
+  <div id="gallery">
+    {% for media in album.medias %}
+      {% if loop.index % nb_columns == 1 %}
+      <div id="albums" class="row">
+      {% endif%}
+      {% if media.type == "image" %}
+      <div class="{{ column_size_t }} columns thumbnail">
+        {% if 'sigal.plugins.media_page' in settings.plugins %}
+        <a href="{{ media.url}}.html" class="gallery"
+          title="{{ media.title }}"
+          data-href="{{ media.url }}" {{ img_description(media) }}>
+        {% else %}
+        <a href="{{ media.url }}" class="gallery" title="{{ media.title }}"
+          {{ img_description(media) }}>
+        {% endif %}
+          <img src="{{ media.thumbnail }}" alt="{{ media.url }}"
+              title="{{ media.title }}" /></a>
+      </div>
+      {% endif %}
+      {% if media.type == "video" %}
+        {% set mhash = media.url|replace('.', '')|replace(' ', '') %}
+        <div class="{{ column_size_t }} columns thumbnail">
+          {% if 'sigal.plugins.media_page' in settings.plugins %}
+          <a href="{{ media.url }}.html" data-href="#{{ mhash }}"
+          {% else %}
+          <a href="#{{ mhash }}" class="gallery" inline='yes' title="{{ media.url }}"
+          {% endif %}
+            {% if media.big %} data-big="{{ media.big_url }}"{% endif %}>
+            <img src="{{ media.thumbnail }}" alt="{{ media.url }}"
+                title="{{ media.title }}" /></a>
+        </div>
+        <!-- This contains the hidden content for the video -->
+        <div style='display:none'>
+          <div id="{{ mhash }}">
+            <video controls>
+            <source src='{{ media.url }}' type='{{ media.mime }}' />
+            </video>
+          </div>
+        </div>
+      {% endif %}
+      {% if loop.last or loop.index % nb_columns == 0 %}
+      </div>
+      {% endif%}
+    {% endfor %}
+  </div>
+
+  {% 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>
+  </div>
+  {% endif %}
+
+{% endblock %}
+
+{% block footer %}
+  <script src="{{ theme.url }}/js/jquery-2.2.1.min.js"></script>
+  <script src="{{ theme.url }}/js/jquery.colorbox-min.js"></script>
+  <script src="{{ theme.url }}/js/jquery.touchSwipe.min.js"></script>
+
+  {% if 'sigal.plugins.media_page' in settings.plugins %}
+  <script src="{{ theme.url }}/js/app-with-media-page.js"></script>
+  {% else %}
+  <script src="{{ theme.url }}/js/app.js"></script>
+  {% endif %}
+{% endblock %}
diff --git a/sigal/themes/colorbox/templates/album_list.html b/sigal/themes/colorbox/templates/album_list.html
index 5415ac9..e7c40e0 100644
--- a/sigal/themes/colorbox/templates/album_list.html
+++ b/sigal/themes/colorbox/templates/album_list.html
@@ -1,22 +1,10 @@
 {% extends "base.html" %}
 {% block content %}
-  <header>
-    {% if album.breadcrumb %}
-    <h2>
-      {% for url, title in album.breadcrumb %}
-      <a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
-      {% endfor -%}
-    </h2>
-    <hr>
-    {% endif %}
-  </header>
-
   {% set numbers = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"] %}
   {% set column_size = settings.colorbox_column_size %}
   {% set nb_columns = (9 / column_size)|int %}
   {% set column_size_t = numbers[column_size] %}
 
-  {% if album.albums %}
   {% for alb in album.albums %}
     {% if loop.index % nb_columns == 1 %}
     <div id="albums" class="row">
@@ -31,89 +19,4 @@
     </div>
     {% endif%}
   {% endfor %}
-  {% endif %}
-
-  {% if album.medias %}
-  {% macro img_description(media) -%}
-    {% if media.big %} data-big="{{ media.big_url }}"{% endif %}
-    {% if media.exif %}
-      {% if media.exif.datetime %}
-        data-date=", {{ media.exif.datetime }}"
-      {% endif %}
-    {% endif %}
-  {%- endmacro %}
-
-  <div id="gallery">
-    {% for media in album.medias %}
-      {% if loop.index % nb_columns == 1 %}
-      <div id="albums" class="row">
-      {% endif%}
-      {% if media.type == "image" %}
-      <div class="{{ column_size_t }} columns thumbnail">
-        {% if 'sigal.plugins.media_page' in settings.plugins %}
-        <a href="{{ media.url}}.html" class="gallery"
-          title="{{ media.title }}"
-          data-href="{{ media.url }}" {{ img_description(media) }}>
-        {% else %}
-        <a href="{{ media.url }}" class="gallery" title="{{ media.title }}"
-          {{ img_description(media) }}>
-        {% endif %}
-          <img src="{{ media.thumbnail }}" alt="{{ media.url }}"
-              title="{{ media.title }}" /></a>
-      </div>
-      {% endif %}
-      {% if media.type == "video" %}
-        {% set mhash = media.url|replace('.', '')|replace(' ', '') %}
-        <div class="{{ column_size_t }} columns thumbnail">
-          {% if 'sigal.plugins.media_page' in settings.plugins %}
-          <a href="{{ media.url }}.html" data-href="#{{ mhash }}"
-          {% else %}
-          <a href="#{{ mhash }}" class="gallery" inline='yes' title="{{ media.url }}"
-          {% endif %}
-            {% if media.big %} data-big="{{ media.big_url }}"{% endif %}>
-            <img src="{{ media.thumbnail }}" alt="{{ media.url }}"
-                title="{{ media.title }}" /></a>
-        </div>
-        <!-- This contains the hidden content for the video -->
-        <div style='display:none'>
-          <div id="{{ mhash }}">
-            <video controls>
-            <source src='{{ media.url }}' type='{{ media.mime }}' />
-            </video>
-          </div>
-        </div>
-      {% endif %}
-      {% if loop.last or loop.index % nb_columns == 0 %}
-      </div>
-      {% endif%}
-    {% endfor %}
-  </div>
-  {% endif %}
-
-  {% 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>
-  </div>
-  {% endif %}
-
-  {% if album.description %}
-  <div id="description" class="row">
-    {{ album.description }}
-  </div>
-  {% endif %}
-{% endblock %}
-
-{% block footer %}
-  {% if album.medias %}
-  <script src="{{ theme.url }}/js/jquery-2.2.1.min.js"></script>
-  <script src="{{ theme.url }}/js/jquery.colorbox-min.js"></script>
-  <script src="{{ theme.url }}/js/jquery.touchSwipe.min.js"></script>
-
-  {% if 'sigal.plugins.media_page' in settings.plugins %}
-  <script src="{{ theme.url }}/js/app-with-media-page.js"></script>
-  {% else %}
-  <script src="{{ theme.url }}/js/app.js"></script>
-  {% endif %}
-  {% endif %}
 {% endblock %}
diff --git a/sigal/themes/colorbox/templates/base.html b/sigal/themes/colorbox/templates/base.html
index 9225115..27a8d59 100644
--- a/sigal/themes/colorbox/templates/base.html
+++ b/sigal/themes/colorbox/templates/base.html
@@ -1,7 +1,6 @@
 <!doctype html>
 <html lang="{{ settings.html_language }}">
   <head>
-    {% block head %}
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
 
@@ -12,7 +11,7 @@
     <link rel="stylesheet" href="{{ theme.url }}/css/skeleton.css">
     <link rel="stylesheet" href="{{ theme.url }}/css/colorbox.css">
     <link rel="stylesheet" href="{{ theme.url }}/css/style.css">
-    {% endblock %}
+    {% block extra_head %}{% endblock extra_head %}
     {% include 'analytics.html' %}
   </head>
   <body>
@@ -27,23 +26,27 @@
           {{ index_title }}
           {% endif %}
           </a></h1>
-          {% if settings.links %}
-          <nav id="menu">
-            <ul>
-              {% for title, link in settings.links %}
-              <li><a href="{{ link }}">{{ title }}</a></li>
-              {% endfor %}
-            </ul>
-          </nav>
-          {% endif %}
+          {% include 'links.html' %}
           {% include 'footer.html' %}
         </div>
       </div>
       <div id="main" role="main" class="nine columns offset-by-three">
+        <header>
+          {% include 'breadcrumb.html' %}
+          {% if album.breadcrumb %}
+            <hr>
+          {% endif %}
+        </header>
+
         {% block content %}{% endblock %}
+
+        {% if album.description %}
+          <div id="description" class="row">
+            {{ album.description }}
+          </div>
+        {% endif %}
       </div>
     </div>
-
     {% block footer %}{% endblock %}
     {% include 'piwik.html' %}
   </body>
diff --git a/sigal/themes/default/templates/breadcrumb.html b/sigal/themes/default/templates/breadcrumb.html
new file mode 100644
index 0000000..b7c0396
--- /dev/null
+++ b/sigal/themes/default/templates/breadcrumb.html
@@ -0,0 +1,9 @@
+{% if album.breadcrumb %}
+  <div class="breadcrumb">
+    <h2>
+      {% for url, title in album.breadcrumb %}
+        <a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
+      {% endfor -%}
+    </h2>
+  </div>
+{% endif %}
diff --git a/sigal/themes/default/templates/footer.html b/sigal/themes/default/templates/footer.html
index c1b7c68..44d23fd 100644
--- a/sigal/themes/default/templates/footer.html
+++ b/sigal/themes/default/templates/footer.html
@@ -1,7 +1,16 @@
-      <footer>
-        <p>{% if album.author %}&copy; {{ album.author }} - {% endif %}
-          Generated by <a href="{{ sigal_link }}">sigal</a>
-          {% if 'sigal.plugins.feeds' in settings.plugins %}
-          {% if settings.rss_feed %}<br><a href={{ settings.rss_feed.feed_url }}>RSS Feed</a>{% endif %}
-          {% if settings.atom_feed %}<br><a href={{ settings.atom_feed.feed_url }}>Atom Feed</a>{% endif %}{% endif %}</p>
-      </footer>
+<footer>
+  <p>
+    {% if album.author %}
+      <span>&copy; {{ album.author }}</span>
+    {% endif %}
+    <span>Generated by <a href="{{ sigal_link }}">sigal</a></span>
+    {% if 'sigal.plugins.feeds' in settings.plugins %}
+      {% if settings.rss_feed %}
+        <span><a href={{ settings.rss_feed.feed_url }}>RSS Feed</a></span>
+      {% endif %}
+      {% if settings.atom_feed %}
+        <span><a href={{ settings.atom_feed.feed_url }}>Atom Feed</a></span>
+      {% endif %}
+    {% endif %}
+  </p>
+</footer>
diff --git a/sigal/themes/default/templates/links.html b/sigal/themes/default/templates/links.html
new file mode 100644
index 0000000..9da5285
--- /dev/null
+++ b/sigal/themes/default/templates/links.html
@@ -0,0 +1,9 @@
+{% if settings.links %}
+<nav id="menu">
+  <ul>
+    {% for title, link in settings.links %}
+    <li><a href="{{ link }}">{{ title }}</a></li>
+    {% endfor %}
+  </ul>
+</nav>
+{% endif %}
diff --git a/sigal/themes/galleria/static/css/style.css b/sigal/themes/galleria/static/css/style.css
index 837ccd2..3d50220 100644
--- a/sigal/themes/galleria/static/css/style.css
+++ b/sigal/themes/galleria/static/css/style.css
@@ -172,6 +172,9 @@ footer a:hover {
   border-bottom: 1px solid;
   text-decoration: none;
 }
+footer span:not(:last-child):after {
+  content: ' - ';
+}
 
 @media only screen and (min-width: 980px) {
   .container {
diff --git a/sigal/themes/galleria/templates/album.html b/sigal/themes/galleria/templates/album.html
index 001b3a2..f87d7b9 100644
--- a/sigal/themes/galleria/templates/album.html
+++ b/sigal/themes/galleria/templates/album.html
@@ -3,21 +3,17 @@
 {% block extra_head %}
     {# We will always want to show the first image when we're on an album page #}
     {# Start loading now for faster document complete instead of waiting for js to load it #}
-    {% if album.medias %}
     <style>
     body::after{
         position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
         content:url({{ album.medias[0].url }});
     }</style>
-    {% endif %}
-
     {% if settings.show_map and album.show_map %}
     <link rel="stylesheet" href="{{ theme.url }}/leaflet/leaflet.css" />
     {% endif %}
 {% endblock %}
 
 {% block content %}
-        {% if album.medias %}
         <div class="icons">
           {% if settings.show_map and album.show_map %}
           <a class="gallery-map-toggle"><img src="{{ theme.url }}/img/map.png"
@@ -26,14 +22,12 @@
           <a id="fullscreen"><img src="{{ theme.url }}/img/fullscreen.png"
             title="Fullscreen" alt="Fullscreen (f)" /></a>
         </div>
-	<div id="gallery"></div>
-        {% endif %}
+        <div id="gallery"></div>
 
         {% 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><a href="{{ album.zip }}"
+                title="Download a zip archive with all images">Download ZIP</a>
           </p>
         </div>
         {% endif %}
@@ -68,7 +62,7 @@
         {%- endif -%}
       {% endif %}
     {%- endmacro %}
-    {% if album.medias %}
+
     <script src="{{ theme.url }}/jquery-3.3.1.min.js"></script>
     {% if settings.show_map and album.show_map %}
     <script src="{{ theme.url }}/leaflet/leaflet.js"></script>
@@ -246,10 +240,9 @@
     Galleria.configure({
         imageCrop: false,
         transition: "fade",
-        thumbnails: 'lazy'
+        thumbnails: "lazy"
     });
     Galleria.run("#gallery", {dataSource: data});
 
     </script>
-    {% endif %}
 {% endblock %}
diff --git a/sigal/themes/galleria/templates/album_list.html b/sigal/themes/galleria/templates/album_list.html
index 22cdbd5..9670e21 100644
--- a/sigal/themes/galleria/templates/album_list.html
+++ b/sigal/themes/galleria/templates/album_list.html
@@ -15,7 +15,6 @@
 
 {% block content %}
         <div id="albums">
-          <!-- <h1>Albums</h1> -->
           <ul>
             {% for alb in album.albums %}
             <li><a href="{{ alb.url }}">
@@ -25,4 +24,10 @@
             {% endfor %}
           </ul>
         </div>
+
+        {% if album.description %}
+        <div id="description">
+          {{ album.description }}
+        </div>
+        {% endif %}
 {% endblock %}
diff --git a/sigal/themes/galleria/templates/base.html b/sigal/themes/galleria/templates/base.html
index e7119dc..05a970b 100644
--- a/sigal/themes/galleria/templates/base.html
+++ b/sigal/themes/galleria/templates/base.html
@@ -21,22 +21,9 @@
       <header>
         <h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>
 
-        {% if settings.links %}
-        <nav id="menu">
-          <ul>
-            {% for title, link in settings.links %}
-            <li><a href="{{ link }}">{{ title }}</a></li>
-            {% endfor %}
-          </ul>
-        </nav>
-        {% endif %}
+        {% include 'links.html' %}
+        {% include 'breadcrumb.html' %}
         {% if album.breadcrumb %}
-        <h2>
-          {%- for url, title in album.breadcrumb -%}
-          <a href="{{ url }}">{{ title }}</a>
-          {%- if not loop.last %} » {% endif -%}
-          {% endfor -%}
-        </h2>
         <hr>
         {% endif %}
       </header>
diff --git a/sigal/themes/photoswipe/static/app.js b/sigal/themes/photoswipe/static/app.js
new file mode 100644
index 0000000..de825ae
--- /dev/null
+++ b/sigal/themes/photoswipe/static/app.js
@@ -0,0 +1,214 @@
+echo.init({
+  offset: 100,
+  throttle: 250,
+  unload: false
+});
+
+var initPhotoSwipeFromDOM = function(gallerySelector) {
+
+  // parse slide data (url, title, size ...) from DOM elements
+  // (children of gallerySelector)
+  var parseThumbnailElements = function(el) {
+    var thumbElements = el.childNodes,
+      numNodes = thumbElements.length,
+      items = [],
+      figureEl,
+      linkEl,
+      size,
+      item;
+
+    for(var i = 0; i < numNodes; i++) {
+
+      figureEl = thumbElements[i]; // <figure> element
+
+      // include only element nodes
+      if(figureEl.nodeType !== 1) {
+        continue;
+      }
+
+      linkEl = figureEl.children[0]; // <a> element
+
+      // create slide object
+      if (linkEl.getAttribute('data-type') == 'video') {
+        item = {
+          html: linkEl.getAttribute('data-video')
+        };
+      } else {
+        size = linkEl.getAttribute('data-size').split('x');
+        item = {
+          src: linkEl.getAttribute('href'),
+          w: parseInt(size[0], 10),
+          h: parseInt(size[1], 10)
+        };
+      }
+
+      if(figureEl.children.length > 1) {
+        // <figcaption> content
+        item.title = figureEl.children[1].innerHTML;
+      }
+
+      if(linkEl.children.length > 0) {
+        // <img> thumbnail element, retrieving thumbnail url
+        item.msrc = linkEl.children[0].getAttribute('data-echo');
+      }
+
+      item.el = figureEl; // save link to element for getThumbBoundsFn
+      items.push(item);
+    }
+
+    return items;
+  };
+
+  // find nearest parent element
+  var closest = function closest(el, fn) {
+    return el && ( fn(el) ? el : closest(el.parentNode, fn) );
+  };
+
+  // triggers when user clicks on thumbnail
+  var onThumbnailsClick = function(e) {
+    e = e || window.event;
+    e.preventDefault ? e.preventDefault() : e.returnValue = false;
+
+    var eTarget = e.target || e.srcElement;
+
+    // find root element of slide
+    var clickedListItem = closest(eTarget, function(el) {
+      return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
+    });
+
+    if(!clickedListItem) {
+      return;
+    }
+
+    // find index of clicked item by looping through all child nodes
+    // alternatively, you may define index via data- attribute
+    var clickedGallery = clickedListItem.parentNode,
+      childNodes = clickedListItem.parentNode.childNodes,
+      numChildNodes = childNodes.length,
+      nodeIndex = 0,
+      index;
+
+    for (var i = 0; i < numChildNodes; i++) {
+      if(childNodes[i].nodeType !== 1) {
+        continue;
+      }
+
+      if(childNodes[i] === clickedListItem) {
+        index = nodeIndex;
+        break;
+      }
+      nodeIndex++;
+    }
+
+
+
+    if(index >= 0) {
+      // open PhotoSwipe if valid index found
+      openPhotoSwipe( index, clickedGallery );
+    }
+    return false;
+  };
+
+  // parse picture index and gallery index from URL (#&pid=1&gid=2)
+  var photoswipeParseHash = function() {
+    var hash = window.location.hash.substring(1),
+      params = {};
+
+    if(hash.length < 5) {
+      return params;
+    }
+
+    var vars = hash.split('&');
+    for (var i = 0; i < vars.length; i++) {
+      if(!vars[i]) {
+        continue;
+      }
+      var pair = vars[i].split('=');
+      if(pair.length < 2) {
+        continue;
+      }
+      params[pair[0]] = pair[1];
+    }
+
+    if(params.gid) {
+      params.gid = parseInt(params.gid, 10);
+    }
+
+    return params;
+  };
+
+  var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
+    var pswpElement = document.querySelectorAll('.pswp')[0],
+      gallery,
+      options,
+      items;
+
+    items = parseThumbnailElements(galleryElement);
+
+    // define options (if needed)
+    options = {
+
+      // define gallery index (for URL)
+      galleryUID: galleryElement.getAttribute('data-pswp-uid'),
+
+      getThumbBoundsFn: function(index) {
+        // See Options -> getThumbBoundsFn section of documentation for more info
+        var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
+          pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+          rect = thumbnail.getBoundingClientRect();
+
+        return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
+      }
+
+    };
+
+    // PhotoSwipe opened from URL
+    if(fromURL) {
+      if(options.galleryPIDs) {
+        // parse real index when custom PIDs are used
+        // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
+        for(var j = 0; j < items.length; j++) {
+          if(items[j].pid == index) {
+            options.index = j;
+            break;
+          }
+        }
+      } else {
+        // in URL indexes start from 1
+        options.index = parseInt(index, 10) - 1;
+      }
+    } else {
+      options.index = parseInt(index, 10);
+    }
+
+    // exit if index not found
+    if( isNaN(options.index) ) {
+      return;
+    }
+
+    if(disableAnimation) {
+      options.showAnimationDuration = 0;
+    }
+
+    // Pass data to PhotoSwipe and initialize it
+    gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
+    gallery.init();
+  };
+
+  // loop through all gallery elements and bind events
+  var galleryElements = document.querySelectorAll( gallerySelector );
+
+  for(var i = 0, l = galleryElements.length; i < l; i++) {
+    galleryElements[i].setAttribute('data-pswp-uid', i+1);
+    galleryElements[i].onclick = onThumbnailsClick;
+  }
+
+  // Parse URL and open gallery if it contains #&pid=3&gid=1
+  var hashData = photoswipeParseHash();
+  if(hashData.pid && hashData.gid) {
+    openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
+  }
+};
+
+// execute above function
+initPhotoSwipeFromDOM('.gallery');
diff --git a/sigal/themes/photoswipe/static/styles.css b/sigal/themes/photoswipe/static/styles.css
index edd709a..42a3c38 100644
--- a/sigal/themes/photoswipe/static/styles.css
+++ b/sigal/themes/photoswipe/static/styles.css
@@ -84,18 +84,18 @@ figcaption {
   padding:2em 0;
 }
 
-.menu {
+#menu {
   width: 100%;
   background: #F7F7F7 none repeat scroll 0 0;
   padding: 30px 0;
 }
 
-.menu ul {
+#menu ul {
   max-width: 1024px;
   margin: 0 auto;
 }
 
-.menu li {
+#menu li {
     display: inline;
     list-style: none; /* pour enlever les puces sur IE7 */
 }
@@ -204,6 +204,9 @@ footer {
 footer p {
   text-align: center;
 }
+footer span:not(:last-child):after {
+  content: ' - ';
+}
 
 @media screen and (max-width: 700px) {
   h1 {
diff --git a/sigal/themes/photoswipe/templates/album.html b/sigal/themes/photoswipe/templates/album.html
index baadc75..aefa6c3 100644
--- a/sigal/themes/photoswipe/templates/album.html
+++ b/sigal/themes/photoswipe/templates/album.html
@@ -1,2 +1,103 @@
-<!-- generated from album -->
-{% extends "album_list.html" %}
+{% extends "base.html" %}
+
+{% block extra_head %}
+  <script src="{{ theme.url }}/photoswipe.min.js"></script>
+  <script src="{{ theme.url }}/photoswipe-ui-default.min.js"></script>
+  <script src="{{ theme.url }}/echo/echo.min.js"></script>
+  <link rel="stylesheet" href="{{ theme.url }}/photoswipe.css">
+  <link rel="stylesheet" href="{{ theme.url }}/default-skin/default-skin.css">
+{% endblock extra_head %}
+
+{% block content %}
+  {% if album.zip %}
+  <div class="additionnal-infos">
+    <p><a href="{{ album.zip }}"
+          title="Download a zip archive with all images">Download ZIP</a></p>
+  </div>
+  {% endif %}
+
+  <div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
+    {% for media in album.medias %}
+      {% if media.type == "image" %}
+        <figure class="gallery__img--{{ "main" if loop.first else "secondary" }} thumbnail"
+                itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+          <a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
+            <img src="{{ theme.url }}/echo/blank.gif"
+                 data-echo="{{ media.url if loop.first else media.thumbnail }}"
+                 alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
+          </a>
+          <figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
+        </figure>
+      {% endif %}
+      {% if media.type == "video" %}
+        <figure class="gallery__img--secondary thumbnail"
+                itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+          <a href="{{ media.url }}" itemprop="contentUrl" data-type="video"
+             data-video='<div class="video"><div class="video__container"><video controls><source src="{{ media.url }}" type="{{ media.mime }}" /></video></div></div>'>
+          <img src="{{ theme.url }}/echo/blank.gif"
+               data-echo="{{ media.thumbnail }}"
+               alt="{{ media.thumbnail }}" itemprop="thumbnail" title="" />
+          </a>
+          <figcaption itemprop="caption description">{{ media_title }}</figcaption>
+        </figure>
+      {% endif %}
+    {% endfor %}
+  </div>
+
+{% endblock %}
+
+{% block extra_footer %}
+  <!-- Root element of PhotoSwipe. Must have class pswp. -->
+  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+    <!-- Background of PhotoSwipe.
+      It's a separate element as animating opacity is faster than rgba(). -->
+      <div class="pswp__bg"></div>
+
+      <!-- Slides wrapper with overflow:hidden. -->
+      <div class="pswp__scroll-wrap">
+        <!-- Container that holds slides.
+          PhotoSwipe keeps only 3 of them in the DOM to save memory.
+          Don't modify these 3 pswp__item elements, data is added later on. -->
+          <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+          </div>
+
+          <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+          <div class="pswp__ui pswp__ui--hidden">
+            <div class="pswp__top-bar">
+              <!--  Controls are self-explanatory. Order can be changed. -->
+              <div class="pswp__counter"></div>
+              <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+              <button class="pswp__button pswp__button--share" title="Share"></button>
+              <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+              <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+              <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
+              <!-- element will get class pswp__preloader-active when preloader is running -->
+              <div class="pswp__preloader">
+                <div class="pswp__preloader__icn">
+                  <div class="pswp__preloader__cut">
+                    <div class="pswp__preloader__donut"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+              <div class="pswp__share-tooltip"></div>
+            </div>
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+            </button>
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+            </button>
+            <div class="pswp__caption">
+              <div class="pswp__caption__center"></div>
+            </div>
+          </div>
+      </div>
+  </div>
+  <script src="{{ theme.url }}/app.js"></script>
+
+{% endblock %}
diff --git a/sigal/themes/photoswipe/templates/album_list.html b/sigal/themes/photoswipe/templates/album_list.html
index f0f79b2..ddc6e53 100644
--- a/sigal/themes/photoswipe/templates/album_list.html
+++ b/sigal/themes/photoswipe/templates/album_list.html
@@ -1,404 +1,13 @@
-<!doctype html>
-<html lang="{{ settings.html_language }}">
-  <head>
-    {% block head %}
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-
-    <title>{{ album.title }}</title>
-    <meta name="description" content="">
-    <meta name="author" content="{{ album.author }}">
-    <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="{{ theme.url }}/photoswipe.css">
-    <link rel="stylesheet" href="{{ theme.url }}/default-skin/default-skin.css">
-    <link rel="stylesheet" href="{{ theme.url }}/styles.css">
-    <script src="{{ theme.url }}/photoswipe.min.js"></script>
-    <script src="{{ theme.url }}/photoswipe-ui-default.min.js"></script>
-    <script src="{{ theme.url }}/echo/echo.min.js"></script>
-    {% endblock %}
-    {% include 'analytics.html' %}
-  </head>
-  <body>
-  {% include 'gtm.html' %}
-  <div class="container">
-	<h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>
-
-	{% if settings.links %}
-    <div class="menu">
-      <ul>
-        {% for title, link in settings.links %}
-        	<li><a href="{{ link }}">{{ title }}</a></li>
-        {% endfor %}
-      </ul>
+{% extends "base.html" %}
+{% block content %}
+  <div class="album-list">
+  {% for alb in album.albums %}
+    <div class="menu-img thumbnail">
+      <a href="{{ alb.url }}">
+        <img src="{{ alb.thumbnail }}" class="album_thumb"
+             alt="{{ alb.title }}" title="{{ alb.title }}" /></a>
+      <span class="album_title">{{ alb.title }}</span>
     </div>
-    {% endif %}
-
-	{% block content %}
-
-        <div class="content">
-			{% if album.breadcrumb %}
-		    <div class="breadcrumb">
-			    <h2>
-			      {% for url, title in album.breadcrumb %}
-			      <a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %}
-			      {% endfor -%}
-			    </h2>
-		    </div>
-		    {% endif %}
-
-		  	{% if album.albums %}
-		  		<div class="album-list">
-				{% for alb in album.albums %}
-			    	<div class="menu-img thumbnail">
-			        	<a href="{{ alb.url }}">
-			          	<img src="{{ alb.thumbnail }}" class="album_thumb" alt="{{ alb.title }}" title="{{ alb.title }}" /></a>
-			        	<span class="album_title">{{ alb.title }}</span>
-			      </div>
-				{% endfor %}
-				</div>
-		  	{% endif %}
-
-		{% if album.zip %}
-		<div class="additionnal-infos">
-			<p><a href="{{ album.zip }}" title="Download a zip archive with all images">Download ZIP</a></p>
-		</div>
-		{% endif %}
-
-		{% if album.medias %}
-			<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
-				{% for media in album.medias %}
-					    {% if media.type == "image" %}
-						  	{% if loop.first %}
-						  		<figure class="gallery__img--main thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-									<a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
-									<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.url }}" alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
-									</a>
-									<figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
-							    </figure>
-						  	{% else %}
-							    <figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-									<a href="{{ media.url }}" itemprop="contentUrl" data-size="{{media.size.width}}x{{media.size.height}}">
-									<img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.url }}" itemprop="thumbnail" title="{{ media.exif.datetime }}" />
-									</a>
-									<figcaption itemprop="caption description">{{ media.title }} - {{ media.exif.datetime }}</figcaption>
-							    </figure>
-						    {% endif %}
-					    {% endif %}
-                        {% if media.type == "video" %}
-                            <figure class="gallery__img--secondary thumbnail" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-                                <a href="{{ media.url }}" itemprop="contentUrl" data-type="video" data-video='<div class="video"><div class="video__container"><video controls><source src="{{ media.url }}" type="{{ media.mime }}" /></video></div></div>'>
-                                <img src="{{ theme.url }}/echo/blank.gif" data-echo="{{ media.thumbnail }}" alt="{{ media.thumbnail }}" itemprop="thumbnail" title="" />
-                                </a>
-                                <figcaption itemprop="caption description">{{ media_title }}</figcaption>
-                            </figure>
-                        {% endif %}
-				{% endfor %}
-			</div>
-		{% endif %}
-
-		{% if album.description %}
-		<div id="description" class="row">
-		{{ album.description }}
-		</div>
-		{% endif %}
-
-		</div>
-	{% endblock %}
-
-	{% block footer %}
- 		<footer>
-	 	  <p>{% if album.author %}&copy; {{ album.author }} - {% endif %}
-          Generated by <a href="{{ sigal_link }}">sigal</a>
-          </p>
-	 	</footer>
-	  {% if album.medias %}
-	  	<!-- Root element of PhotoSwipe. Must have class pswp. -->
-		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
-
-		    <!-- Background of PhotoSwipe.
-		         It's a separate element as animating opacity is faster than rgba(). -->
-		    <div class="pswp__bg"></div>
-
-		    <!-- Slides wrapper with overflow:hidden. -->
-		    <div class="pswp__scroll-wrap">
-
-		        <!-- Container that holds slides.
-		            PhotoSwipe keeps only 3 of them in the DOM to save memory.
-		            Don't modify these 3 pswp__item elements, data is added later on. -->
-		        <div class="pswp__container">
-		            <div class="pswp__item"></div>
-		            <div class="pswp__item"></div>
-		            <div class="pswp__item"></div>
-		        </div>
-
-		        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
-		        <div class="pswp__ui pswp__ui--hidden">
-
-		            <div class="pswp__top-bar">
-
-		                <!--  Controls are self-explanatory. Order can be changed. -->
-
-		                <div class="pswp__counter"></div>
-
-		                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
-
-		                <button class="pswp__button pswp__button--share" title="Share"></button>
-
-		                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
-
-		                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
-
-		                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
-		                <!-- element will get class pswp__preloader-active when preloader is running -->
-		                <div class="pswp__preloader">
-		                    <div class="pswp__preloader__icn">
-		                      <div class="pswp__preloader__cut">
-		                        <div class="pswp__preloader__donut"></div>
-		                      </div>
-		                    </div>
-		                </div>
-		            </div>
-
-		            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
-		                <div class="pswp__share-tooltip"></div>
-		            </div>
-
-		            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
-		            </button>
-
-		            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
-		            </button>
-
-		            <div class="pswp__caption">
-		                <div class="pswp__caption__center"></div>
-		            </div>
-
-		        </div>
-
-		    </div>
-
-		</div>
-		<script>
-		  echo.init({
-		    offset: 100,
-		    throttle: 250,
-		    unload: false
-		  });
-
-		var initPhotoSwipeFromDOM = function(gallerySelector) {
-
-	    // parse slide data (url, title, size ...) from DOM elements
-	    // (children of gallerySelector)
-	    var parseThumbnailElements = function(el) {
-	        var thumbElements = el.childNodes,
-	            numNodes = thumbElements.length,
-	            items = [],
-	            figureEl,
-	            linkEl,
-	            size,
-	            item;
-
-	        for(var i = 0; i < numNodes; i++) {
-
-	            figureEl = thumbElements[i]; // <figure> element
-
-	            // include only element nodes
-	            if(figureEl.nodeType !== 1) {
-	                continue;
-	            }
-
-	            linkEl = figureEl.children[0]; // <a> element
-
-	            // create slide object
-                if (linkEl.getAttribute('data-type') == 'video') {
-                    item = {
-                      html: linkEl.getAttribute('data-video')
-                    };
-                } else {
-                    size = linkEl.getAttribute('data-size').split('x');
-                    item = {
-                        src: linkEl.getAttribute('href'),
-                        w: parseInt(size[0], 10),
-                        h: parseInt(size[1], 10)
-                    };
-                }
-
-	            if(figureEl.children.length > 1) {
-	                // <figcaption> content
-	                item.title = figureEl.children[1].innerHTML;
-	            }
-
-	            if(linkEl.children.length > 0) {
-	                // <img> thumbnail element, retrieving thumbnail url
-	                item.msrc = linkEl.children[0].getAttribute('data-echo');
-	            }
-
-	            item.el = figureEl; // save link to element for getThumbBoundsFn
-	            items.push(item);
-	        }
-
-	        return items;
-	    };
-
-	    // find nearest parent element
-	    var closest = function closest(el, fn) {
-	        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
-	    };
-
-	    // triggers when user clicks on thumbnail
-	    var onThumbnailsClick = function(e) {
-	        e = e || window.event;
-	        e.preventDefault ? e.preventDefault() : e.returnValue = false;
-
-	        var eTarget = e.target || e.srcElement;
-
-	        // find root element of slide
-	        var clickedListItem = closest(eTarget, function(el) {
-	            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
-	        });
-
-	        if(!clickedListItem) {
-	            return;
-	        }
-
-	        // find index of clicked item by looping through all child nodes
-	        // alternatively, you may define index via data- attribute
-	        var clickedGallery = clickedListItem.parentNode,
-	            childNodes = clickedListItem.parentNode.childNodes,
-	            numChildNodes = childNodes.length,
-	            nodeIndex = 0,
-	            index;
-
-	        for (var i = 0; i < numChildNodes; i++) {
-	            if(childNodes[i].nodeType !== 1) {
-	                continue;
-	            }
-
-	            if(childNodes[i] === clickedListItem) {
-	                index = nodeIndex;
-	                break;
-	            }
-	            nodeIndex++;
-	        }
-
-
-
-	        if(index >= 0) {
-	            // open PhotoSwipe if valid index found
-	            openPhotoSwipe( index, clickedGallery );
-	        }
-	        return false;
-	    };
-
-	    // parse picture index and gallery index from URL (#&pid=1&gid=2)
-	    var photoswipeParseHash = function() {
-	        var hash = window.location.hash.substring(1),
-	        params = {};
-
-	        if(hash.length < 5) {
-	            return params;
-	        }
-
-	        var vars = hash.split('&');
-	        for (var i = 0; i < vars.length; i++) {
-	            if(!vars[i]) {
-	                continue;
-	            }
-	            var pair = vars[i].split('=');
-	            if(pair.length < 2) {
-	                continue;
-	            }
-	            params[pair[0]] = pair[1];
-	        }
-
-	        if(params.gid) {
-	            params.gid = parseInt(params.gid, 10);
-	        }
-
-	        return params;
-	    };
-
-	    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
-	        var pswpElement = document.querySelectorAll('.pswp')[0],
-	            gallery,
-	            options,
-	            items;
-
-	        items = parseThumbnailElements(galleryElement);
-
-	        // define options (if needed)
-	        options = {
-
-	            // define gallery index (for URL)
-	            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
-
-	            getThumbBoundsFn: function(index) {
-	                // See Options -> getThumbBoundsFn section of documentation for more info
-	                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
-	                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
-	                    rect = thumbnail.getBoundingClientRect();
-
-	                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
-	            }
-
-	        };
-
-	        // PhotoSwipe opened from URL
-	        if(fromURL) {
-	            if(options.galleryPIDs) {
-	                // parse real index when custom PIDs are used
-	                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
-	                for(var j = 0; j < items.length; j++) {
-	                    if(items[j].pid == index) {
-	                        options.index = j;
-	                        break;
-	                    }
-	                }
-	            } else {
-	                // in URL indexes start from 1
-	                options.index = parseInt(index, 10) - 1;
-	            }
-	        } else {
-	            options.index = parseInt(index, 10);
-	        }
-
-	        // exit if index not found
-	        if( isNaN(options.index) ) {
-	            return;
-	        }
-
-	        if(disableAnimation) {
-	            options.showAnimationDuration = 0;
-	        }
-
-	        // Pass data to PhotoSwipe and initialize it
-	        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
-	        gallery.init();
-	    };
-
-	    // loop through all gallery elements and bind events
-	    var galleryElements = document.querySelectorAll( gallerySelector );
-
-	    for(var i = 0, l = galleryElements.length; i < l; i++) {
-	        galleryElements[i].setAttribute('data-pswp-uid', i+1);
-	        galleryElements[i].onclick = onThumbnailsClick;
-	    }
-
-	    // Parse URL and open gallery if it contains #&pid=3&gid=1
-	    var hashData = photoswipeParseHash();
-	    if(hashData.pid && hashData.gid) {
-	        openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
-	    }
-	};
-
-	// execute above function
-	initPhotoSwipeFromDOM('.gallery');
-
-		</script>
-
-	  {% endif %}
-	{% endblock %}
-</div>
-{% include 'piwik.html' %}
-</body>
-</html>
+  {% endfor %}
+  </div>
+{% endblock %}
diff --git a/sigal/themes/photoswipe/templates/base.html b/sigal/themes/photoswipe/templates/base.html
new file mode 100644
index 0000000..ce556f4
--- /dev/null
+++ b/sigal/themes/photoswipe/templates/base.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="{{ settings.html_language }}">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <title>{{ album.title }}</title>
+    <meta name="description" content="">
+    <meta name="author" content="{{ album.author }}">
+    <meta name="viewport" content="width=device-width">
+    {% block extra_head %}{% endblock extra_head %}
+    <link rel="stylesheet" href="{{ theme.url }}/styles.css">
+    {% include 'analytics.html' %}
+  </head>
+  <body>
+    {% include 'gtm.html' %}
+    <div class="container">
+      <h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1>
+
+      {% include 'links.html' %}
+
+      <div class="content">
+        {% include 'breadcrumb.html' %}
+        {% block content %}{% endblock %}
+
+        {% if album.description %}
+        <div id="description" class="row">
+        {{ album.description }}
+        </div>
+        {% endif %}
+      </div>
+
+      {% include 'footer.html' %}
+      {% block extra_footer %}{% endblock %}
+  </div>
+  {% include 'piwik.html' %}
+  </body>
+</html>
diff --git a/tests/sample/pictures/dir1/test2/21.md b/tests/sample/pictures/dir1/test2/21.md
index 576d6c7..5609d64 100644
--- a/tests/sample/pictures/dir1/test2/21.md
+++ b/tests/sample/pictures/dir1/test2/21.md
@@ -1 +1,4 @@
+Title: in"title"
 Order: 01
+
+in"description