Add support for squared thumbnails

Disabled by default, only very simple center crop implemented.
The SQUARED_SIMPLE_SHAVE_AMOUNT constant may be slightly adjusted
according to future experience. It's a really dumb algorithm which
may not be suitable for every picture.

Looking for a fast and smart algorithm to determine image weight center
and radius, i.e. focus on object of interest. The OpenCV's face recognition
features are worth to test and consider, though I fear the speed issues.

4 files changed, 45 insertions, 7 deletions

diff --git a/templates/styles.css b/templates/styles.css
index 0a42f53..8c3aaf2 100644
--- a/templates/styles.css
+++ b/templates/styles.css
@@ -222,6 +222,11 @@ div.album_item img.portrait {
    padding-top: 1em;
 }
 
+div.album_item img.squared {
+   /* squared */
+   padding-top: 1em;
+}
+
 .album_thumb_text {
    /*  CSS positioning sucks^2  */ 
    position: absolute;
@@ -347,6 +352,16 @@ div.index_item img {
 /*   padding-right: 7.7em;  disabled --  word wrap  */
    top: 0.65em;
 }
+
+.album_text_squared {
+   font-size: 190%;
+   font-weight: bold;
+   position: relative;
+   left: 10.3em;
+/*   padding-right: 10.5em;  disabled --  word wrap  */
+   top: 0.65em;
+}
+
 .album_subtext {
    font-size: 150%;
    position: relative;
@@ -363,6 +378,14 @@ div.index_item img {
    top: 2.5em;
 }
 
+.album_subtext_squared {
+   font-size: 150%;
+   position: relative;
+   left: 13.1em;
+/*   padding-right: 13.4em;  disabled --  word wrap  */
+   top: 2.5em;
+}
+
 .album_note {
    position: absolute;
    right: 2.3em;
diff --git a/templates/template-album.tmpl b/templates/template-album.tmpl
index c018057..aaff9ef 100644
--- a/templates/template-album.tmpl
+++ b/templates/template-album.tmpl
@@ -40,7 +40,7 @@
           <img src="$(IMG_THUMBNAIL)" alt="$(IMG_TITLE)" />
           <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
         </a>
-      </div>  
+      </div>
     <!-- $(END_IMG_LIST_LANDSCAPE) -->
     <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
       <div class="album_item" id="$(IMG_LIST_ID)">
@@ -48,8 +48,16 @@
           <img src="$(IMG_THUMBNAIL)" alt="$(IMG_TITLE)" class="portrait" />
           <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
         </a>
-      </div>  
+      </div>
     <!-- $(END_IMG_LIST_PORTRAIT) -->
+    <!-- $(BEGIN_IMG_LIST_SQUARED) -->
+      <div class="album_item" id="$(IMG_LIST_ID)">
+        <a href="$(IMG_SUBPAGE)">
+          <img src="$(IMG_THUMBNAIL)" alt="$(IMG_TITLE)" class="squared" />
+          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
+        </a>
+      </div>
+    <!-- $(END_IMG_LIST_SQUARED) -->
     <!-- $(BEGIN_LIST_SEPARATOR) -->
       <div class="separators">
         <div class="index_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
@@ -75,4 +83,3 @@
 
 </body>
 </html>
-
diff --git a/templates/template-index.tmpl b/templates/template-index.tmpl
index b2c7dba..77504e7 100644
--- a/templates/template-index.tmpl
+++ b/templates/template-index.tmpl
@@ -42,7 +42,7 @@
            <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
            <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
         </a>
-      </div>  
+      </div>
     <!-- $(END_IMG_LIST_LANDSCAPE) -->
     <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
       <div class="index_item" id="$(IMG_LIST_ID)">
@@ -52,8 +52,18 @@
            <span class="album_subtext_portrait"><!-- $(IMG_DESCRIPTION) --></span>
            <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
         </a>
-      </div>  
+      </div>
     <!-- $(END_IMG_LIST_PORTRAIT) -->
+    <!-- $(BEGIN_IMG_LIST_SQUARED) -->
+      <div class="index_item" id="$(IMG_LIST_ID)">
+        <a href="$(ALBUM_SUBPATH)">
+           <img src="$(IMG_THUMBNAIL)" alt="" />
+           <span class="album_text_squared"><!-- $(IMG_TITLE) --></span><br />
+           <span class="album_subtext_squared"><!-- $(IMG_DESCRIPTION) --></span>
+           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+        </a>
+      </div>
+    <!-- $(END_IMG_LIST_SQUARED) -->
     <!-- $(BEGIN_LIST_SEPARATOR) -->
       <div class="separators">
         <div class="album_list_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
@@ -79,4 +89,3 @@
 
 </body>
 </html>
-
diff --git a/templates/template-view_photo.tmpl b/templates/template-view_photo.tmpl
index 7fe58e2..7557846 100644
--- a/templates/template-view_photo.tmpl
+++ b/templates/template-view_photo.tmpl
@@ -74,4 +74,3 @@
 
 </body>
 </html>
-