Web template variables for thumbnail dimensions

Ideas for improvements and requests for new features in XnView Classic

Moderators: XnTriq, xnview

User avatar
XnTriq
Moderator & Librarian
Posts: 5616
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Web template variables for thumbnail dimensions

Post by XnTriq »

Most – if not all – of XnView's web templates are built with tables. The downside of this approach is that the thumbnail pages have a fixed number of columns.

I made a few “fluid” gallery templates years ago for my own personal use. They're based on lists or DIVs and have an integrated JavaScript lightbox.
Unfortunately, I always have to manually edit XnView's HTML output, because there currently is no way to retrieve the values of Width and Height from Create » Web Page... » Thumbnail. (#THUMB_WIDTH# & #THUMB_HEIGHT# apparently only work inside #THUMB_ROW_START# & #THUMB_ROW_END# or #THUMB_START# & #THUMB_END# or #THUMB2_START# and #THUMB2_END#.)

I'm requesting two new variables: #THUMB_WIDTH_MAX# and #THUMB_HEIGHT_MAX#
User avatar
xnview
Author of XnView
Posts: 33840
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

Post by xnview »

please send me a template?
Pierre.
User avatar
XnTriq
Moderator & Librarian
Posts: 5616
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Web template variables for thumbnail dimensions

Post by XnTriq »

Here's a barebones example:
[color=green]thumbs.html[/color] wrote:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> #TITLE#</title>
<style type="text/css">
ul {
list-style: none;
}
li {
margin: 0.5em;
padding: 0.5em;
position: relative;
width: 128px; /* thumbnail width */
height: 128px; /* thumbnail height */
float: left;
text-align: center;
border: 1px solid black;
}
a {
width: 128px; /* thumbnail width */
height: 128px; /* thumbnail height */
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
vertical-align: middle;
}
</style>
<!--[if IE]>
<style type="text/css">
a {
width: 130px; /* thumbnail width plus 2 pixels */
height: 130px; /* thumbnail height plus 2 pixels */
display: block;
}
span {
height: 100%;
display: inline-block;
vertical-align: middle;
}
</style>
<![endif]-->
</head>
<body>
<ul>
#THUMB2_START#
<li><a href="#ORG_SUBPATH#/#PIC_LINK#"><span></span><img src="#THUMB_LINK#" width="#THUMB_WIDTH#" height="#THUMB_HEIGHT#" alt="#THUMB_ALT#"></a></li>
#THUMB2_END#
</ul>
</body>
</html>
User avatar
XnTriq
Moderator & Librarian
Posts: 5616
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Web template variables for thumbnail dimensions

Post by XnTriq »

I can't get this one to work:
[color=green]thumbs.html[/color] wrote:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> #TITLE#</title>
<style type="text/css">
body {
text-align: center;
}
div#Gallery {
margin: 0 auto;
width: 90%;
border: 1px solid black;
}
div.Box {
margin: 1em;
width: 144px; /* thumbnail width plus 16 pixels */
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: top;
}
div.Thumbnail {
width: 144px; /* thumbnail width plus 16 pixels */
height: 144px; /* thumbnail height plus 16 pixels */
display: table-cell;
vertical-align: middle; 
border: 1px solid black;
}
div.Thumbnail * {
vertical-align: middle;
}
div.Thumbnail img {
border: 1px solid black;
}
div.Caption {
margin-top: 0.5em;
font-size: 0.76em;
}
</style>
<!--[if lt IE 8]> 
<style type="text/css">
div.Box {
display: inline;
}
div.Thumbnail {
display: block;
}
div.Thumbnail span {
width: 1px;
height: 100%;
display: inline-block;
}
</style>
<![endif]-->
</head>
<body>
<h1>#HEADER#</h1>
<div id="Gallery">
#THUMB2_START#
<div class="Box">
<div class="Thumbnail"><span></span><a href="#ORG_SUBPATH#/#PIC_LINK#"><img src="#THUMB_LINK#" width="#THUMB_WIDTH#" height="#THUMB_HEIGHT#" alt="#THUMB_ALT#" /></a></div>
<div class="Caption">#THUMB_TEXT#</div>
</div>
#THUMB2_END#
</div>
<p>#PAGE_GENERATED#</p>
</body>
</html>
User avatar
xnview
Author of XnView
Posts: 33840
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

Post by xnview »

XnTriq wrote:I can't get this one to work:
With this one, #THUMB_WIDTH# & #THUMB_HEIGHT# are not replaced?? I've tried and it works...
Pierre.
User avatar
XnTriq
Moderator & Librarian
Posts: 5616
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Web template variables for thumbnail dimensions

Post by XnTriq »

xnview wrote:With this one, #THUMB_WIDTH# & #THUMB_HEIGHT# are not replaced?? I've tried and it works...
OK, I found the problem :mrgreen:
If the template (thumb.html) is saved with LF instead of CR+LF line breaks, output is faulty:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> Title</title>
<style type="text/css">
body {
text-align: center;
}
div#Gallery {
margin: 0 auto;
width: 90%;
border: 1px solid black;
}
div.Box {
margin: 1em;
width: 144px; /* thumbnail width plus 16 pixels */
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: top;
}
div.Thumbnail {
width: 144px; /* thumbnail width plus 16 pixels */
height: 144px; /* thumbnail height plus 16 pixels */
display: table-cell;
vertical-align: middle;
border: 1px solid black;
}
div.Thumbnail * {
vertical-align: middle;
}
div.Thumbnail img {
border: 1px solid black;
}
div.Caption {
margin-top: 0.5em;
font-size: 0.76em;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
div.Box {
display: inline;
}
div.Thumbnail {
display: block;
}
div.Thumbnail span {
width: 1px;
height: 100%;
display: inline-block;
}
</style>
<![endif]-->
</head>
<body>
<h1>Header</h1>
<div id="Gallery">
_START#
<div class="Box">
<div class="Thumbnail"><span></span><a href="original/landscape.jpg"><img src="thumb/t_landscape.jpg" width="128" height="96" alt="" /></a></div>
<div class="Caption">landscape.png</div>
</div>
_START#
<div class="Box">
<div class="Thumbnail"><span></span><a href="original/portrait.jpg"><img src="thumb/t_portrait.jpg" width="96" height="128" alt="" /></a></div>
<div class="Caption">portrait.png</div>
</div>
_START#
<div class="Box">
<div class="Thumbnail"><span></span><a href="original/square.jpg"><img src="thumb/t_square.jpg" width="128" height="128" alt="" /></a></div>
<div class="Caption">square.png</div>
</div>
</div>
<p>This page was generated by <a href="http://www.xnview.com">XnView</a></p>
</body>
</html>
User avatar
xnview
Author of XnView
Posts: 33840
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

Post by xnview »

XnTriq wrote: Do you see a chance for implementing an enhancement like this:
#THUMB_WIDTH_MAX# and #THUMB_HEIGHT_MAX# are the max of all thumbnails size?
Pierre.
User avatar
XnTriq
Moderator & Librarian
Posts: 5616
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Web template variables for thumbnail dimensions

Post by XnTriq »

xnview wrote:#THUMB_WIDTH_MAX# and #THUMB_HEIGHT_MAX# are the max of all thumbnails size?
Yes, I'm referring to the values for Width and Height as entered by the user in the Web page Create dialog.

Would it be very difficult to allow basic arithmetic operations like addition, subtraction, multiplication, division and percentage?
User avatar
XnTriq
Moderator & Librarian
Posts: 5616
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Web template variables for thumbnail dimensions

Post by XnTriq »

Thanks for adding #THUMB_WIDTH_MAX# and #THUMB_HEIGHT_MAX# in version 2.23, Pierre.

It seems that these variables are only “active” if placed in between #THUMB_START# & #THUMB_END# and #THUMB2_START# & #THUMB2_END#.
Could you please make them “globally” available (like #TITLE#) so that they can be used in the document's header for CSS and JS includes?
[color=green]\XnView\WebTemplate\Test\thumb.html[/color] wrote:

Code: Select all

<head>
<title>#TITLE#</title>
<script type="text/javascript">
document.write("<style type=\"text/css\">" +
               "div.Box {" +
               "width: " + (#THUMB_WIDTH_MAX# + 16) + "px;" +
               "height: " + (#THUMB_HEIGHT_MAX# + 16) + "px;" +
               "}" +
               "</style>");
</script>
</head>
User avatar
xnview
Author of XnView
Posts: 33840
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

Post by xnview »

ok :)
Pierre.
User avatar
XnTriq
Moderator & Librarian
Posts: 5616
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Web template variables for thumbnail dimensions

Post by XnTriq »

xnview wrote:ok :)
:D Thanks!
User avatar
XnTriq
Moderator & Librarian
Posts: 5616
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Web template variables for thumbnail dimensions

Post by XnTriq »

I believe there's been a misunderstanding.
The current implementation of #THUMB_WIDTH_MAX# & #THUMB_HEIGHT_MAX# seems to return the values of Width & Height in Picture » Size maximum. Can you confirm this, Pierre?

I was referring to Width & Height of Thumbnail:
XnTriq wrote:Unfortunately, I always have to manually edit XnView's HTML output, because there currently is no way to retrieve the values of Width and Height from Create » Web Page... » Thumbnail.
p127539.png
User avatar
xnview
Author of XnView
Posts: 33840
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

Post by xnview »

right
Pierre.
User avatar
XnTriq
Moderator & Librarian
Posts: 5616
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Web template variables for thumbnail dimensions

Post by XnTriq »

XnTriq wrote:I believe there's been a misunderstanding.
The current implementation of #THUMB_WIDTH_MAX# & #THUMB_HEIGHT_MAX# seems to return the values of Width & Height in Picture » Size maximum.
Fixed in v2.35 :bugfixed:
19leunam93
Posts: 7
Joined: Thu Feb 18, 2016 10:05 pm

Re: Web template variables for thumbnail dimensions

Post by 19leunam93 »

Is it possible to share your “fluid” gallery templates you have created?
The default templates are all based on tables, which is outmoded in web-design...

Thanks
Post Reply