diff options
| 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/template_album.html | |
| parent | 8d5ff019af0a5a87e74632f53a8cc8cf34060db9 (diff) | |
| download | cataract-e927155e589881b63d39f559e6a04fa0d6005b8c.tar.xz | |
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.
Diffstat (limited to 'templates/fluid/template_album.html')
| -rw-r--r-- | templates/fluid/template_album.html | 69 |
1 files changed, 39 insertions, 30 deletions
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")) --> <!-- $(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")) --> <!-- $(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> |