From: David ‘Bombe’ Roden Date: Fri, 31 Jul 2015 08:53:34 +0000 (+0200) Subject: Rework pretty much all image displaying code X-Git-Url: https://git.pterodactylus.net/?p=Sone.git;a=commitdiff_plain;h=a404c9c2b1908f4b9181d8e60f11b846812757fb Rework pretty much all image displaying code --- diff --git a/src/main/java/net/pterodactylus/sone/web/ImageBrowserPage.java b/src/main/java/net/pterodactylus/sone/web/ImageBrowserPage.java index 5674ee8..58aee5c 100644 --- a/src/main/java/net/pterodactylus/sone/web/ImageBrowserPage.java +++ b/src/main/java/net/pterodactylus/sone/web/ImageBrowserPage.java @@ -72,6 +72,7 @@ public class ImageBrowserPage extends SoneTemplatePage { templateContext.set("albumRequested", true); templateContext.set("album", album.orNull()); templateContext.set("page", request.getHttpRequest().getParam("page")); + templateContext.set("albumPage", request.getHttpRequest().getParam("albumPage")); return; } String imageId = request.getHttpRequest().getParam("image", null); @@ -86,6 +87,7 @@ public class ImageBrowserPage extends SoneTemplatePage { Optional sone = webInterface.getCore().getSone(soneId); templateContext.set("soneRequested", true); templateContext.set("sone", sone.orNull()); + templateContext.set("albumPage", request.getHttpRequest().getParam("albumPage")); return; } String mode = request.getHttpRequest().getParam("mode", null); diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css index 68c9878..49f2cba 100644 --- a/src/main/resources/static/css/sone.css +++ b/src/main/resources/static/css/sone.css @@ -734,6 +734,11 @@ textarea { width: 95%; } +#sone .images { + display: table; + width: 100%; +} + #sone .album-row, #sone .image-row { display: table-row; border-collapse: separate; @@ -748,7 +753,8 @@ textarea { position: relative; margin-top: 1ex; margin-bottom: 1ex; - height: 120px; + height: 122px; + overflow: hidden; } #sone .image { diff --git a/src/main/resources/static/images/broken-album.png b/src/main/resources/static/images/broken-album.png new file mode 100644 index 0000000..324d9c4 Binary files /dev/null and b/src/main/resources/static/images/broken-album.png differ diff --git a/src/main/resources/static/images/broken-image.png b/src/main/resources/static/images/broken-image.png new file mode 100644 index 0000000..1725c10 Binary files /dev/null and b/src/main/resources/static/images/broken-image.png differ diff --git a/src/main/resources/static/javascript/sone.js b/src/main/resources/static/javascript/sone.js index 07c5b3d..3235f51 100644 --- a/src/main/resources/static/javascript/sone.js +++ b/src/main/resources/static/javascript/sone.js @@ -1878,6 +1878,22 @@ var currentSoneMenuId; /** Timeout handler for the next-to-show Sone context menu. */ var currentSoneMenuTimeoutHandler; +function replaceImagesWithErrorWithBrokenImages() { + var replaceImage = function(imageElement, sourcePath) { + $(imageElement).attr("src", sourcePath) + .attr("width", "160") + .attr("height", "120") + .attr("style", "position: absolute; top: 0px; left: 0px; opacity: .25"); + }; + + $(".image-in-album .image img").error(function () { + replaceImage(this, "images/broken-image.png"); + }); + $(".album .image img").error(function () { + replaceImage(this, "images/broken-album.png"); + }); +} + $(document).ready(function() { /* rip out the status update textarea. */ @@ -2005,6 +2021,8 @@ $(document).ready(function() { /* activate status polling. */ setTimeout(getStatus, 5000); + replaceImagesWithErrorWithBrokenImages(); + /* reset activity counter when the page has focus. */ $(window).focus(function() { focus = true; diff --git a/src/main/resources/templates/imageBrowser.html b/src/main/resources/templates/imageBrowser.html index a237c7f..3a720b6 100644 --- a/src/main/resources/templates/imageBrowser.html +++ b/src/main/resources/templates/imageBrowser.html @@ -391,51 +391,46 @@ <%first>

<%= Page.ImageBrowser.Header.Images|l10n|html>

<%include include/pagination.html pageParameter=="page"> +
<%/first> - <%if loop.count|mod divisor==3>
<%/if> -
- -
- <% image|image-link max-width==250 max-height==250 mode==enlarge title=image.title> -
-
-
<% image.title|html>
-
<% image.description|parse sone=image.sone|render>
-
- <%if album.sone.local> -
- - - - -
- - -
- -
<%include include/pagination.html pageParameter=="page"><%/last> <%/foreach> <%if album.sone.local> @@ -614,32 +609,19 @@ <%first>

<%= Page.ImageBrowser.Header.Albums|l10n|html>

<%include include/pagination.html pagination=albumPagination pageParameter=="page"> +
<%/first> - <%if loop.count|mod divisor==3>
<%/if> + <%if loop.even>
<%/if>
-
- - <%ifnull album.albumImage> - <% album.title|html> (<%album.sone.niceName|html>) - <%else> - <% album.albumImage|image-link max-width==250 max-height==250 mode==enlarge title=album.title> - <%/if> - -
-
-
<%album.sone.niceName|html>
-
<% album.title|html> (<%= View.Sone.Stats.Images|l10n 0=album.images.size>)
-
<% album.description|parse sone=album.sone|render>
-
+ <%include include/viewAlbum.html>
<%= false|store key==endRow> - <%if loop.count|mod divisor==3 offset==1><%= true|store key==endRow><%/if> + <%if loop.odd><%= true|store key==endRow><%/if> <%last><%= true|store key==endRow><%/last> - <%if endRow> -
- <%/if> + <%if endRow>
<%/if> <%last> +
<%include include/pagination.html pagination=albumPagination pageParameter=="page"> <%/last> <%/foreach> diff --git a/src/main/resources/templates/include/browseAlbums.html b/src/main/resources/templates/include/browseAlbums.html index 74bf714..4961e74 100644 --- a/src/main/resources/templates/include/browseAlbums.html +++ b/src/main/resources/templates/include/browseAlbums.html @@ -1,9 +1,47 @@ -<%foreach albums album> - <%first>

<%= Page.ImageBrowser.Header.Albums|l10n|html>

<%/first> - <%if loop.count|mod divisor==3>
<%/if> - <%include include/viewAlbum.html> +<%foreach albums album|paginate pageSize=core.preferences.imagesPerPage page=albumPage> + <%first> +

<%= Page.ImageBrowser.Header.Albums|l10n|html>

+ <%include include/pagination.html pageParameter=="albumPage"> +
+ <%/first> + <%if loop.even>
<%/if> +
+ + <%include include/viewAlbum.html> +
<%= false|store key==endRow> - <%if loop.count|mod divisor==3 offset==1><%= true|store key==endRow><%/if> + <%if loop.odd><%= true|store key==endRow><%/if> <%last><%= true|store key==endRow><%/last> <%if endRow>
<%/if> + <%last> +
+ <%include include/pagination.html pageParameter=="albumPage"> + <%/last> + + <%if album.sone.local> +
+ + + + +
+ + +
+ + +
+ <%/if> <%/foreach> diff --git a/src/main/resources/templates/include/pagination.html b/src/main/resources/templates/include/pagination.html index 80248d4..b2bafcd 100644 --- a/src/main/resources/templates/include/pagination.html +++ b/src/main/resources/templates/include/pagination.html @@ -7,4 +7,5 @@
<%if ! pagination.last>»<%else>»<%/if>
+
<%/if> diff --git a/src/main/resources/templates/include/viewAlbum.html b/src/main/resources/templates/include/viewAlbum.html index 0821909..8a3d6de 100644 --- a/src/main/resources/templates/include/viewAlbum.html +++ b/src/main/resources/templates/include/viewAlbum.html @@ -1,45 +1,17 @@ -
- -
- - <%ifnull album.albumImage> - <% album.title|html> - <%else> -
- <% album.albumImage|image-link class==album-image max-width==250 max-height==250 mode==enlarge title=album.title> -
-
[link album]
+
+
+ + <%ifnull album.images.random> + + <%else> + <% album.images.random|image-link max-width==160 max-height==120 mode==enlarge title=album.title> <%/if>
-
-
<% album.title|html> (<%= View.Sone.Stats.Images|l10n 0=album.images.size>)
-
<% album.description|parse sone=album.sone|render>
+
+
[link album]
+
<% album.title|html>
+
<% =View.Post.LinkedAlbum.SizeAndAuthor|l10n 0=album.sone.niceName 1=album.images.size|html|replace needle=="[link]" replacement==''|replace needle=='[/link]' replacement==''|replace needle=='' replacement=album.sone.id>
+
<% album.description|parse sone=album.sone|render>
- <%if album.sone.local> -
- - - - -
- - -
- - -
- <%/if>
diff --git a/src/main/resources/templates/include/viewImage.html b/src/main/resources/templates/include/viewImage.html new file mode 100644 index 0000000..4e9087b --- /dev/null +++ b/src/main/resources/templates/include/viewImage.html @@ -0,0 +1,12 @@ +
+
+ + <% image|image-link max-width==160 max-height==120 mode==enlarge title=image.title> + +
+
+
[link image]
+
<% image.title|html>
+
<% image.description|parse sone=image.sone|render>
+
+
diff --git a/src/main/resources/templates/include/viewPost.html b/src/main/resources/templates/include/viewPost.html index d150d4f..5ce2d28 100644 --- a/src/main/resources/templates/include/viewPost.html +++ b/src/main/resources/templates/include/viewPost.html @@ -38,19 +38,9 @@
<%foreach parts part> <%if part.class.simpleName|match value==AlbumPart> -
-
-
-
- <% part.album.albumImage|image-link max-width==160 max-height==90 mode==enlarge title=part.album.title> -
-
-
-
<% part.album.title|html>
-
<% =View.Post.LinkedAlbum.SizeAndAuthor|l10n 0=part.album.sone.niceName 1=part.album.images.size|html|replace needle=="[link]" replacement==''|replace needle=='[/link]' replacement==''|replace needle=='' replacement=part.album.sone.id>
-
<% part.album.description|parse sone=part.album.sone|render>
-
-
+ <% part.album.images.random|store key==image> +
+ <%include include/viewAlbum.html album=part.album>
<%/if> <%/foreach>