fluid: Use CSS media queries to determine displayed image size

This is a huge step forward in terms of usability and simplicity. Image sizes are now determined by browser automatically based on window width. As a result the image size switch buttons have been removed and only a single page is generated (index.html). Note: in order to make image title, description and EXIF table dynamically aligned to the image width, "display: table" and relatives were used. This may not be the best webdesigner practice but it's an effective and sufficient approach for the moment.
author: Tomas Bzatek <tbzatek@users.sourceforge.net> 2016-09-23 22:36:52 +0200
committer: Tomas Bzatek <tbzatek@users.sourceforge.net> 2016-09-23 22:36:52 +0200
commit: e927155e589881b63d39f559e6a04fa0d6005b8c (patch)
tree: 0c224c6373ed60a2ee7e3bed5b03896d81510487 /templates/fluid
parent: 8d5ff019af0a5a87e74632f53a8cc8cf34060db9 (diff)
download: cataract-e927155e589881b63d39f559e6a04fa0d6005b8c.tar.xz
3 files changed, 45 insertions, 68 deletions
diff --git a/templates/fluid/fluid.xml b/templates/fluid/fluid.xml
index 49e8547..9bdba19 100644
--- a/templates/fluid/fluid.xml
+++ b/templates/fluid/fluid.xml
@@ -53,43 +53,6 @@
       <picture_size>preview</picture_size>
     </album>
 
-    <define name="THEME_SIZE_PREVIEW" />
-    <define name="BORDER_STYLE" value="border_single" />
-  </theme>
-
-  <theme enabled="yes">
-    <index>
-      <template>template_index.html</template>
-      <target_filename>index_big.html</target_filename>
-      <thumbnail_size>thumbnail</thumbnail_size>
-      <protected_thumbnail>emblems-readonly_120.png</protected_thumbnail>
-    </index>
-
-    <album>
-      <template>template_album.html</template>
-      <target_filename>index_big.html</target_filename>
-      <picture_size>original</picture_size>
-    </album>
-
-    <define name="THEME_SIZE_BIG" />
-    <define name="BORDER_STYLE" value="border_single" />
-  </theme>
-
-  <theme enabled="yes">
-    <index>
-      <template>template_index.html</template>
-      <target_filename>index_hires.html</target_filename>
-      <thumbnail_size>thumbnail</thumbnail_size>
-      <protected_thumbnail>emblems-readonly_120.png</protected_thumbnail>
-    </index>
-
-    <album>
-      <template>template_album.html</template>
-      <target_filename>index_hires.html</target_filename>
-      <picture_size>hires</picture_size>
-    </album>
-
-    <define name="THEME_SIZE_HIRES" />
     <define name="BORDER_STYLE" value="border_single" />
   </theme>
 
diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css
index 547ff6f..b0dc29a 100644
--- a/templates/fluid/styles.css
+++ b/templates/fluid/styles.css
@@ -385,7 +385,7 @@ div.photos {
 div.photos div.photo {
   margin-top: 60px;
   margin-bottom: 80px;
-  display: inline-block;
+  display: inline-table;
   text-align: left;
 }
 
@@ -394,6 +394,11 @@ div.photo img {
   margin-bottom: 4px;
 }
 
+div.photos div.photo-content {
+  display: table-caption;
+  caption-side: bottom;
+}
+
 div.photo div.photo-title {
   font-family: 'Open Sans', sans-serif;
   text-align: center;
diff --git a/templates/fluid/template_album.html b/templates/fluid/template_album.html
index 0552074..721fc15 100644
--- a/templates/fluid/template_album.html
+++ b/templates/fluid/template_album.html
@@ -9,6 +9,19 @@
 	<link href="$(TEMPLATES_PATH)styles.css" type="text/css" rel="stylesheet" media="screen, print" />
         <script type="text/javascript">var NUM_PHOTOS = $(TOTAL_ITEMS);</script>
 	<script type="text/javascript" src="$(TEMPLATES_PATH)scripts.js">onLoad();</script>
+	<style>
+@media screen and (min-width: 1600px) {<!-- $(BEGIN_IMG_LIST) -->
+<!-- $(BEGIN_LIST_PICTURE_ALL_SIZES) --><!-- $(ifdef(HAVE_IMG_SIZE_ORIGINAL)) -->
+  div.photo#photo-$(ITEM_INDEX) img {  width: $(IMG_SIZE_W__ORIGINAL)px;  height: $(IMG_SIZE_H__ORIGINAL)px;  }<!-- $(endif(HAVE_IMG_SIZE_ORIGINAL)) --><!-- $(END_LIST_PICTURE_ALL_SIZES) -->
+<!-- $(END_IMG_LIST) -->
+}
+
+@media screen and (min-width: 2100px) {<!-- $(BEGIN_IMG_LIST) -->
+<!-- $(BEGIN_LIST_PICTURE_ALL_SIZES) --><!-- $(ifdef(HAVE_IMG_SIZE_HIRES)) -->
+  div.photo#photo-$(ITEM_INDEX) img {  width: $(IMG_SIZE_W__HIRES)px;  height: $(IMG_SIZE_H__HIRES)px;  }<!-- $(endif(HAVE_IMG_SIZE_HIRES)) --><!-- $(END_LIST_PICTURE_ALL_SIZES) -->
+<!-- $(END_IMG_LIST) -->
+}
+	</style>
 </head>
 <body>
 
@@ -44,31 +57,38 @@
 
 <div class="photos photostream-hide">
   <!-- $(BEGIN_IMG_LIST) -->
-    <!-- $(BEGIN_LIST_PICTURE) -->
+    <!-- $(BEGIN_LIST_PICTURE_ALL_SIZES) -->
       <div class="photo" id="photo-$(ITEM_INDEX)">
         <div class="position_marker" id="i$(ITEM_INDEX)"></div>
-        <img src="$(IMG_SRC)" width="$(IMG_SIZE_W)" height="$(IMG_SIZE_H)" alt="" id="$(value(BORDER_STYLE))"/>
-        <div class="photo-title"><!-- $(IMG_TITLE) --></div>
-        <a href="javascript: toggle_exif_visibility($(ITEM_INDEX));" class="exif-icon" id="exif_icon-$(ITEM_INDEX)" title="Show/hide metadata information"><i class="fa fa-info"></i></a>
-        <div class="photo-text" style="max-width: $(IMG_SIZE_W)px;"><!-- $(IMG_DESCRIPTION) --></div>
-        <div class="photo-exif" id="exif_table-$(ITEM_INDEX)">
-          <div class="photo-exif-sub" style="max-width: $(IMG_SIZE_W)px;">
-            <a href="#i$(ITEM_INDEX)"><span class="seg" title="Image reference link"><i class="fa fa-anchor"></i><!-- $(IMG_FILENAME) --></span></a>
-            <!-- $(ifdef(HAVE_EXIF)) -->
-              <span class="seg" title="Date and time"><i class="fa fa-calendar"></i><!-- $(get_exif_value_fixed("Exif.Photo.DateTimeOriginal")) --></span>
-              <span class="seg" title="Shutter speed and aperture number"><i class="fa fa-cog"></i><!-- $(get_exif_value_fixed("Exif.Photo.ExposureTime")) --> &nbsp; <!-- $(get_exif_value_fixed("Exif.Photo.FNumber")) --></span>
-              <span class="seg" title="Focal length"><i class="fa fa-sliders"></i><!-- $(get_exif_value_fixed("Exif.Photo.FocalLength")) --></span>
-              <span class="seg" title="ISO Speed setting"><i class="fa fa-film"></i>ISO <!-- $(get_exif_value_fixed("Exif.Photo.ISOSpeedRatings")) --></span>
-              <span class="seg" title="Camera model"><i class="fa fa-camera"></i><!-- $(get_exif_value_fixed("Exif.Image.Model")) --></span>
-              <!-- $(if (have_exif_key ("__disabled__Exif.CanonSi.CameraTemperature"))) -->
-                <span class="seg" title="Camera temperature"><i class="fa fa-cloud"></i><!-- $(get_exif_value_fixed("Exif.CanonSi.CameraTemperature")) --></span>
-              <!-- $(endif (have_exif_key ())) -->
-            <!-- $(endif(HAVE_EXIF)) -->
+        <picture>
+          <!-- $(ifdef(HAVE_IMG_SIZE_HIRES)) --><source media="(min-width: 2100px)" srcset="$(IMG_SRC__HIRES)"><!-- $(endif(HAVE_IMG_SIZE_HIRES)) -->
+          <!-- $(ifdef(HAVE_IMG_SIZE_ORIGINAL)) --><source media="(min-width: 1600px)" srcset="$(IMG_SRC__ORIGINAL)"><!-- $(endif(HAVE_IMG_SIZE_ORIGINAL)) -->
+          <source media="(max-width: 1600px)" srcset="$(IMG_SRC)">
+          <img src="$(IMG_SRC)" width="$(IMG_SIZE_W)" height="$(IMG_SIZE_H)" alt="" id="$(value(BORDER_STYLE))"/>
+        </picture>
+        <div class="photo-content">
+          <div class="photo-title"><!-- $(IMG_TITLE) --></div>
+          <a href="javascript: toggle_exif_visibility($(ITEM_INDEX));" class="exif-icon" id="exif_icon-$(ITEM_INDEX)" title="Show/hide metadata information"><i class="fa fa-info"></i></a>
+          <div class="photo-text" id="i$(ITEM_INDEX)"><!-- $(IMG_DESCRIPTION) --></div>
+          <div class="photo-exif" id="exif_table-$(ITEM_INDEX)">
+            <div class="photo-exif-sub" id="i$(ITEM_INDEX)">
+              <a href="#i$(ITEM_INDEX)"><span class="seg" title="Image reference link"><i class="fa fa-anchor"></i><!-- $(IMG_FILENAME) --></span></a>
+              <!-- $(ifdef(HAVE_EXIF)) -->
+                <span class="seg" title="Date and time"><i class="fa fa-calendar"></i><!-- $(get_exif_value_fixed("Exif.Photo.DateTimeOriginal")) --></span>
+                <span class="seg" title="Shutter speed and aperture number"><i class="fa fa-cog"></i><!-- $(get_exif_value_fixed("Exif.Photo.ExposureTime")) --> &nbsp; <!-- $(get_exif_value_fixed("Exif.Photo.FNumber")) --></span>
+                <span class="seg" title="Focal length"><i class="fa fa-sliders"></i><!-- $(get_exif_value_fixed("Exif.Photo.FocalLength")) --></span>
+                <span class="seg" title="ISO Speed setting"><i class="fa fa-film"></i>ISO <!-- $(get_exif_value_fixed("Exif.Photo.ISOSpeedRatings")) --></span>
+                <span class="seg" title="Camera model"><i class="fa fa-camera"></i><!-- $(get_exif_value_fixed("Exif.Image.Model")) --></span>
+                <!-- $(if (have_exif_key ("__disabled__Exif.CanonSi.CameraTemperature"))) -->
+                  <span class="seg" title="Camera temperature"><i class="fa fa-cloud"></i><!-- $(get_exif_value_fixed("Exif.CanonSi.CameraTemperature")) --></span>
+                <!-- $(endif (have_exif_key ())) -->
+              <!-- $(endif(HAVE_EXIF)) -->
+            </div>
           </div>
         </div>
       </div>
       <br/>
-    <!-- $(END_LIST_PICTURE) -->
+    <!-- $(END_LIST_PICTURE_ALL_SIZES) -->
     <!-- $(BEGIN_LIST_SEPARATOR) -->
       <div class="separator" id="photo-$(ITEM_INDEX)-sep"><!-- $(LIST_SEPARATOR_TITLE) --></div>
     <!-- $(END_LIST_SEPARATOR) -->
@@ -84,17 +104,6 @@
 
 </div>
 
-<!--  ##  Buttons  -->
-<div class="buttons photostream-hide">
-  <a href="index.html" title="Small size" class="size-button"><i class="fa fa-picture-o small <!-- $(ifdef(THEME_SIZE_PREVIEW)) -->active<!-- $(endif(THEME_SIZE_PREVIEW)) -->"></i></a>
-  <!-- $(if (have_album_image_size ("original"))) -->
-    <a href="index_big.html" title="Normal size" class="size-button"><i class="fa fa-picture-o <!-- $(ifdef(THEME_SIZE_BIG)) -->active<!-- $(endif(THEME_SIZE_BIG)) -->"></i></a>
-  <!-- $(endif (have_album_image_size ())) -->
-  <!-- $(if (have_album_image_size ("hires"))) -->
-    <a href="index_hires.html" title="Large size" class="size-button"><i class="fa fa-picture-o big <!-- $(ifdef(THEME_SIZE_HIRES)) -->active<!-- $(endif(THEME_SIZE_HIRES)) -->"></i></a>
-  <!-- $(endif (have_album_image_size ())) -->
-</div>
-
 <a class="photostream-force-hide" id="photostream-close" href="javascript: cancel_photostream_mode();" title="Quit the photo stream mode"><i class="fa fa-times"></i></a>
 <span class="photostream-force-hide" id="photostream-position-label">1 / <!-- $(TOTAL_ITEMS) --></span>
author	Tomas Bzatek <tbzatek@users.sourceforge.net>	2016-09-23 22:36:52 +0200
committer	Tomas Bzatek <tbzatek@users.sourceforge.net>	2016-09-23 22:36:52 +0200
commit	e927155e589881b63d39f559e6a04fa0d6005b8c (patch)
tree	0c224c6373ed60a2ee7e3bed5b03896d81510487 /templates/fluid
parent	8d5ff019af0a5a87e74632f53a8cc8cf34060db9 (diff)
download	cataract-e927155e589881b63d39f559e6a04fa0d6005b8c.tar.xz