Web template variables for thumbnail dimensions
Moderators: XnTriq, helmut, xnview
-
- Moderator & Librarian
- Posts: 6387
- Joined: Sun Sep 25, 2005 3:00 am
- Location: Ref Desk
Web template variables for thumbnail dimensions
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#
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#
-
- Author of XnView
- Posts: 44883
- Joined: Mon Oct 13, 2003 7:31 am
- Location: France
-
- Moderator & Librarian
- Posts: 6387
- Joined: Sun Sep 25, 2005 3:00 am
- Location: Ref Desk
Re: Web template variables for thumbnail dimensions
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>
-
- Moderator & Librarian
- Posts: 6387
- Joined: Sun Sep 25, 2005 3:00 am
- Location: Ref Desk
Re: Web template variables for thumbnail dimensions
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>
-
- Author of XnView
- Posts: 44883
- Joined: Mon Oct 13, 2003 7:31 am
- Location: France
Re: Web template variables for thumbnail dimensions
With this one, #THUMB_WIDTH# & #THUMB_HEIGHT# are not replaced?? I've tried and it works...XnTriq wrote:I can't get this one to work:
Pierre.
-
- Moderator & Librarian
- Posts: 6387
- Joined: Sun Sep 25, 2005 3:00 am
- Location: Ref Desk
Re: Web template variables for thumbnail dimensions
OK, I found the problemxnview wrote:With this one, #THUMB_WIDTH# & #THUMB_HEIGHT# are not replaced?? I've tried and it works...
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>
-
- Author of XnView
- Posts: 44883
- Joined: Mon Oct 13, 2003 7:31 am
- Location: France
Re: Web template variables for thumbnail dimensions
#THUMB_WIDTH_MAX# and #THUMB_HEIGHT_MAX# are the max of all thumbnails size?XnTriq wrote: Do you see a chance for implementing an enhancement like this:
Pierre.
-
- Moderator & Librarian
- Posts: 6387
- Joined: Sun Sep 25, 2005 3:00 am
- Location: Ref Desk
Re: Web template variables for thumbnail dimensions
Yes, I'm referring to the values for Width and Height as entered by the user in the Web page Create dialog.xnview wrote:#THUMB_WIDTH_MAX# and #THUMB_HEIGHT_MAX# are the max of all thumbnails size?
Would it be very difficult to allow basic arithmetic operations like addition, subtraction, multiplication, division and percentage?
-
- Moderator & Librarian
- Posts: 6387
- Joined: Sun Sep 25, 2005 3:00 am
- Location: Ref Desk
Re: Web template variables for thumbnail dimensions
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?
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>
-
- Author of XnView
- Posts: 44883
- Joined: Mon Oct 13, 2003 7:31 am
- Location: France
-
- Moderator & Librarian
- Posts: 6387
- Joined: Sun Sep 25, 2005 3:00 am
- Location: Ref Desk
Re: Web template variables for thumbnail dimensions
Thanks!xnview wrote:ok
-
- Moderator & Librarian
- Posts: 6387
- Joined: Sun Sep 25, 2005 3:00 am
- Location: Ref Desk
Re: Web template variables for thumbnail dimensions
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:
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.
You do not have the required permissions to view the files attached to this post.
-
- Author of XnView
- Posts: 44883
- Joined: Mon Oct 13, 2003 7:31 am
- Location: France
-
- Moderator & Librarian
- Posts: 6387
- Joined: Sun Sep 25, 2005 3:00 am
- Location: Ref Desk
Re: Web template variables for thumbnail dimensions
Fixed in v2.35XnTriq 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.
-
- Posts: 7
- Joined: Thu Feb 18, 2016 10:05 pm
Re: Web template variables for thumbnail dimensions
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
The default templates are all based on tables, which is outmoded in web-design...
Thanks