1.1

CHANGELOG.md

@@ -3,6 +3,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1]
+
+- Set zola minimum version to 0.17
+- Updated responsive images to use the new `page.colocated_path`
+- Hooks names updated for consistency
+- Added class parameter for responsive images
+- Added `images::image()` macro and `image_original` shortcode for images that don't want resizing (eg: animated gifs)
+
 ## [1.0]
 
 - Packaged the theme based on the work of mr-karan and hugo-ink

sass/blog.scss

@@ -10,8 +10,14 @@
     img {
       // max-width: 800px;
       max-height: 90vh;
-
       border-radius: var(--border-radius);
+
+      &.small {
+
+        max-height: none;
+        width: 100%;
+        max-width: 500px;
+      }
     }
   }
 }
@@ -99,6 +105,7 @@
   padding: 0;
   margin: 1rem 0;
 
+
   li {
     display: inline-block;
 

templates/base.html

@@ -38,7 +38,7 @@
         {% if config.extra.avatar %}
 		<div class="avatar">
 			<a href="/">
-                {{ images::responsive_image(path="", src=config.extra.avatar, default_size=128, sizes=[64,128,256,512], alt=config.title  ) }}
+                {{ images::responsive_image(path="", src=config.extra.avatar, default_size=128, sizes=[64,128,256], alt=config.title  ) }}
 			</a>
 		</div>
 	    {% endif %}

templates/gallery.html

@@ -13,7 +13,7 @@
   {# { set image = resize_image(path=post.path ~ image, width=256, height=256, format=config.extra.image_format, quality=config.extra.thumbnail_quality) %} #}
   <li class="thumbnail">
     <a href="{{ post.permalink | safe }}" title="{{ post.title }} - {{ post.date }}">
-      {{ images::responsive_thumbnail(path="", src=post.path ~ image, default_size=128, sizes=[128,256], alt=post.title  ~ " - "  ~ post.date ) }}
+      {{ images::responsive_thumbnail(path=post.colocated_path, src=image, default_size=128, sizes=[128,256], alt=post.title  ~ " - "  ~ post.date ) }}
     </a>
 
   </li>

templates/macros/hooks.html

@@ -1,6 +1,10 @@
 {% extends "base.html" %}
 
 {# Page hooks #}
-{% macro above_page(page) %}{% endmacro above_page %}
-{% macro below_page(page) %}{% endmacro below_page %}
-{% macro below_tags(page) %}{% endmacro below_tags %}
+{% macro post_above_content(page) %}{% endmacro above_page %}
+{% macro post_below_content(page) %}{% endmacro below_page %}
+{% macro post_below_tags(page) %}{% endmacro below_tags %}
+
+{% macro posts_below_title(page) %}
+<span class="description"> {{page.description}} </span>
+{% endmacro posts_below_title %}

templates/macros/images.html

@@ -1,15 +1,20 @@
 {% extends "base.html" %}
 
+
+{% macro image(path, src, alt, class="") %}
+<img alt="{{ alt }}" title="{{ alt }}" src="{{ get_url(path=path ~ src) | safe }}" class="{{ class }}" />
+{% endmacro image %}
+
 {# 
     Original author: crepererum https://github.com/getzola/even/pull/48/files 
     Adapted to Inky template by jimmyff
 #}
 
-{% macro responsive_image(path, src, alt, default_size, sizes) %}
+{% macro responsive_image(path, src, alt, default_size, sizes, class="") %}
 {% if config.extra.image_resizing_disabled and config.extra.image_resizing_disabled == true %}
-<img alt="{{ alt }}" src="{{ src | safe }}" />
+{{ image(path=path, src=src, alt=alt, class=class) }}
 {% else %}
-    {% set abspath = "./" ~ path ~ src  %}
+    {% set abspath = path ~ src  %}
     {% set meta = get_image_metadata(path=abspath) %}
     {% set width = meta.width %}
     {% set srcset_list = [] %}
@@ -21,16 +26,16 @@
     {% endif %}
     {% endfor %}
     {% set default_resized = resize_image(format=config.extra.image_format, path=abspath, width=default_size, op="fit_width", quality=config.extra.image_quality) %}
-    <img alt="{{ alt }}" src="{{ default_resized.url | safe }}" srcset="{{ srcset_list | join(sep=", ") | safe }}" />
+    <img alt="{{ alt }}" title="{{ alt }}" src="{{ default_resized.url | safe }}" srcset="{{ srcset_list | join(sep=", ") | safe }}" class="{{ class }}" />
 {% endif %}
 {% endmacro responsive_image %}
 
 
-{% macro responsive_thumbnail(path, src, alt, default_size, sizes) %}
+{% macro responsive_thumbnail(path, src, alt, default_size, sizes, class="") %}
 {% if config.extra.image_resizing_disabled and config.extra.image_resizing_disabled == true %}
-    <img alt="{{ alt }}" src="{{ src | safe }}" />
+{{ image(path=path, src=src, alt=alt, class=class) }}
 {% else %}
-    {% set abspath = "./" ~ path ~ src  %}
+    {% set abspath = path ~ src  %}
     {% set meta = get_image_metadata(path=abspath) %}
     {% set width = meta.width %}
     {% set srcset_list = [] %}
@@ -42,6 +47,6 @@
     {% endif %}
     {% endfor %}
     {% set default_resized = resize_image(format=config.extra.image_format, path=abspath, width=default_size, height=default_size, op="fill", quality=config.extra.thumbnail_quality) %}
-    <img alt="{{ alt }}" src="{{ default_resized.url | safe }}" srcset="{{ srcset_list | join(sep=", ") | safe }}" />
+    <img alt="{{ alt }}" title="{{ alt }}" src="{{ default_resized.url | safe }}" srcset="{{ srcset_list | join(sep=", ") | safe }}" class="{{ class }}" />
 {% endif %}
 {% endmacro responsive_thumbnail %}

templates/post.html

@@ -15,11 +15,11 @@
       <h1 class="title">{{ page.title }} {% if page.draft %}<span class="draft">Draft</span>{% endif %}</h1>
     </div>
   </div>
-  {{ hooks::above_page(page=page) }}  
+  {{ hooks::post_above_content(page=page) }}  
   <article>{{ page.content | safe }}</article>
 
   
-  {{ hooks::below_page(page=page) }}  
+  {{ hooks::post_below_content(page=page) }}  
   {% if page.taxonomies is containing ("tags") %}
   <ul class="tags">
     {% for tag in page.taxonomies["tags"] %}
@@ -28,6 +28,6 @@
   </ul>
   {% endif %}
   
-  {{ hooks::below_tags(page=page) }}  
+  {{ hooks::post_below_tags(page=page) }}  
 </section>
 {% endblock content %}

templates/posts.html

@@ -16,11 +16,11 @@
         </div>
       </div>
       <div class="matter">
-        <h4 class="title small">
+        <div class="title small">
           <a href="{{ post.permalink | safe }}">{{ post.title }}</a>
           {% if post.draft %}<span class="draft">Draft</span>{% endif %}
-        </h4>
-        <span class="description"> {{post.description}} </span>
+        </div>
+        {{ hooks::posts_below_title(page=post) }} 
       </div>
     </div>
   </li>

templates/shortcodes/image.html

@@ -1,5 +1,3 @@
 
 {% import "macros/images.html" as images -%}
-
-{{ images::responsive_image(path=page.path, src=src, default_size=config.extra.images_default_size, sizes=config.extra.images_sizes, alt=alt  ) }}
-
+{{ images::responsive_image(path=page.colocated_path, src=src, default_size=config.extra.images_default_size, sizes=config.extra.images_sizes, alt=alt, class=class | default(value="") ) }}

templates/shortcodes/image_original.html

@@ -0,0 +1,3 @@
+
+{% import "macros/images.html" as images -%}
+{{ images::image(path=page.path, src=src, alt=alt, class=class | default(value="") ) }}

templates/taxonomy_single.html

@@ -16,11 +16,11 @@
           </div>
         </div>
         <div class="matter">
-          <h4 class="title small">
+          <div class="title small">
             <a href="{{ post.permalink | safe }}">{{ post.title }}</a>
             {% if post.draft %}<span class="draft">Draft</span>{% endif %}
-          </h4>
-          <span class="description"> {{post.description}} </span>
+          </div>
+          {{ hooks::posts_below_title(page=post) }} 
         </div>
       </div>
     </li>

theme.toml

@@ -3,7 +3,7 @@ description = "An elegant and understated theme for Zola"
 license = "MIT"
 homepage = "https://github.com/jimmyff/zola-inky"
 # The minimum version of Zola required
-min_version = "0.4.0"
+min_version = "0.17.0"
 # An optional live demo URL
 demo = "https://jimmyff.github.io/zola-inky/"