Web template variables for thumbnail dimensions

Post by **XnTriq** » Mon Sep 15, 2014 3:00 am

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#

Post by **xnview** » Tue Sep 16, 2014 12:59 pm

please send me a template?

Post by **XnTriq** » Tue Sep 16, 2014 11:30 pm

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>

Post by **XnTriq** » Wed Sep 17, 2014 2:30 am

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>

Post by **xnview** » Wed Sep 17, 2014 8:43 am

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...

Post by **XnTriq** » Wed Sep 17, 2014 7:00 pm

xnview wrote:With this one, #THUMB_WIDTH# & #THUMB_HEIGHT# are not replaced?? I've tried and it works...

OK, I found the problem

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>

Post by **xnview** » Thu Sep 18, 2014 1:04 pm

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?

Post by **XnTriq** » Thu Sep 18, 2014 2:30 pm

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?

Post by **XnTriq** » Sun Sep 06, 2015 2:00 am

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>

Post by **xnview** » Mon Sep 07, 2015 1:26 pm

Post by **XnTriq** » Wed Sep 09, 2015 2:15 am

xnview wrote:ok

Thanks!

Post by **XnTriq** » Fri Sep 11, 2015 4:00 am

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

Post by **xnview** » Fri Sep 11, 2015 2:20 pm

right

Post by **XnTriq** » Tue Jan 05, 2016 2:30 pm

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

19leunam93 · Post by **19leunam93** » Fri Feb 19, 2016 10:05 am

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

XnView Software

Web template variables for thumbnail dimensions

Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions

Re: Web template variables for thumbnail dimensions