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: 4918
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Web template variables for thumbnail dimensions

Postby 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#

User avatar
xnview
Author of XnView
Posts: 27359
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

Postby xnview » Tue Sep 16, 2014 12:59 pm

please send me a template?
Pierre.

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

Re: Web template variables for thumbnail dimensions

Postby XnTriq » Tue Sep 16, 2014 11:30 pm

Here's a barebones example:

thumbs.html 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: 4918
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Web template variables for thumbnail dimensions

Postby XnTriq » Wed Sep 17, 2014 2:30 am

I can't get this one to work:

thumbs.html 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: 27359
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

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

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

Re: Web template variables for thumbnail dimensions

Postby 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 :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: 27359
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

Postby 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?
Pierre.

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

Re: Web template variables for thumbnail dimensions

Postby 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?

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

Re: Web template variables for thumbnail dimensions

Postby 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?

\XnView\WebTemplate\Test\thumb.html 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: 27359
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

Postby xnview » Mon Sep 07, 2015 1:26 pm

ok :)
Pierre.

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

Re: Web template variables for thumbnail dimensions

Postby XnTriq » Wed Sep 09, 2015 2:15 am

xnview wrote:ok :)

:D Thanks!

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

Re: Web template variables for thumbnail dimensions

Postby 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

User avatar
xnview
Author of XnView
Posts: 27359
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Web template variables for thumbnail dimensions

Postby xnview » Fri Sep 11, 2015 2:20 pm

right
Pierre.

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

Re: Web template variables for thumbnail dimensions

Postby 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 :bugfixed:

19leunam93
Posts: 7
Joined: Thu Feb 18, 2016 10:05 pm

Re: Web template variables for thumbnail dimensions

Postby 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


Return to “Classic - Suggestions”

Who is online

Users browsing this forum: No registered users and 2 guests