Add photo id in breadcrumb

theme/static/css/main.css

@@ -40,6 +40,10 @@ header h2 {
   flex: 1;
 }
 
+header h2 a {
+  text-decoration: underline dotted;
+}
+
 footer {
   text-align: center;
   font-size: .8rem;

theme/templates/album.html

@@ -12,7 +12,7 @@
   {% for media in album.medias %}
     <li class="thumbnail">
       <a href="{{ media.url }}.html">
-        <img src="{{ media.thumbnail }}" alt="{{ media.title }}">
+        <img id="{{ media.url }}" src="{{ media.thumbnail }}" alt="{{ media.title }}">
       </a>
     </li>
   {% endfor %}

theme/templates/base.html

@@ -18,10 +18,15 @@
         {% if album.breadcrumb %}
           <h2>
             {% for url, title in album.breadcrumb %}
-            » <a href="{{ url }}">{{ title }}</a>
+              {% if loop.last and media is defined %}
+                » <a href="{{ url }}#{{ media.url }}">{{ title }}</a>
+              {% else %}
+                » <a href="{{ url }}">{{ title }}</a>
+              {% endif %}
             {% endfor -%}
-            {% block extra_breadcrumb %}
-            {% endblock %}
+            {% if media is defined %}
+              » <a href="{{ media.url }}.html">{{ media.title }}</a>
+            {% endif %}
           </h2>
         {% endif %}
         {% include "links.html" %}

theme/templates/media.html

@@ -10,10 +10,6 @@
 <meta name="twitter:card" content="summary_large_image">
 {% endblock %}
 
-{% block extra_breadcrumb %}
-» <a href="{{ media.url }}.html">{{ media.title }}</a>
-{% endblock %}
-
 {% block content %}
 <div>
   <img src="{{ media.url }}" alt="{{ media.title }}">