Lightroom web gallery template xhtml 1.0 strict

Photo :Nicolas Pirson
Go to my website : tatactic.be [FR] (Website about hepatitis)
nicolas.pirson.me [FR - EN] (current website)
business card - blog [FR - EN] (just for fun)
Nicolas Pirson CV page [FR] on tatactic.be
Action script 3 [EN]

Corrections du template galerie web HTML de photoshop lightroom afin de le rendre compatible XHTML 1.0 strict.

Que de temps passé à corriger le code créé par lightroom lors de la création de galerie web HTML simple afin de le rendre compatible XHTML - HTML 1.0 Strict selon les normes du W3C...

Voir le résultat en utilisant le template de galerie web HTML modifié sur tatactic.be (ici le template a aussi été modifié pour rester CSS 2.1 compatible).

Je n'avais pas eu l'énergie, le temps, de me pencher là-dessus mais en fait ça se fait tellement rapidement grâce à la documentation du code d'ADOBE qu'en 5 minutes c'était corrigé.
L'avantage, est qu'après modification du fichier .lrwebengine , tous les templates restent compatibles, d'où un gain réel de temps.

Pour ceux qui trouvent le code abscon (photographes, graphistes et autres), voici la recette de l'omelette de base (à vous d'y rajouter le bacon ou le fromage...) :
La première chose est de trouver le dossier de la galerie à modifier.

Dans le cas présent : LIGHTROOM HTML GALLERY. La galerie HTML par défaut de Lightroom.

Emplacement de Lightroom HTML Gallery :

Si vous travaillez sous WINDOWS 7 64 bits, vous trouverez ce dossier ici :
C:\Program Files\Adobe\Adobe Photoshop Lightroom [version de lightroom]\Shared\webengines\default_html.lrwebengine

Si vous utilisez un système différent, il suffit de rechercher le dossier default_html.lrwebengine.

BACKUP DES FICHIERS À MODIFIER :

Commencez à copier les fichiers suivants se trouvant dans ce dossier et que vous devrez modifier afin de les conserver au cas où... :

detail.html
grid.html
head.html

Personellement je les ai tous copiés dans un répertoire sur mon bureau avant modification.
J'ai ensuite gardé deux versions de chaque fichier.
1 fichier conservé avec l'extension "html" , l'autre version avec l'extension .bak comme backup.
Ceci permettant de les recopier par la suite dans le dossier d'origine en écrasant les fichiers originaux, et d'avoir une version .bak et .html pour ces trois fichiers.

Modification des fichiers :

Détail des trois fichiers :

detail.html = La partie <body> </body> des pages de chaque image (lorsque l'on clique sur une vignette).
grid.html = La partie <body> </body> des pages contenant les vignettes qui seront générées par photoshop / lightroom
head.html = La partie <head> </head> des pages.

Pour ce qui est des "erreurs" :

Attention! Essayez de comprendre et ne pas faire de copier-coller du code qui peut contenir des erreurs dans cette page html!!!

Vu le peu de modifications à apporter il est préférable de les effectuer manuellement dans les fichiers concernés.
Alternative :
Télécharger les trois fichiers au format .7z

Placer la balise <a> </a> (lien cliquable) hors d'une balise calque (<div> </div>) et de les replacer de manière à ce qu'ils entourent directement la balise image.
Modifier la balise <head> </head> de façon à refléter une page non pas "DTD HTML 4.01 Transitional" mais bien "DTD XHTML 1.0 Strict"

Pour head.html on modifiera donc le fichier original comme ceci :
Veiller à respecter les balises auto-fermantes " />" à la place de " >"

Fichier head.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<% --[[ HTML page metadata and stylesheets ]] %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="photography,software,photos,digital darkroom,gallery,image,photographer,adobe,photoshop,lightroom" />
<meta name="generator" content="Adobe Photoshop Lightroom" />
<title>$model.metadata.siteTitle.value</title>
<link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="$others/custom.css" />
<link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="$theRoot/resources/css/master.css" />
<% --[[ Scripting support for rollovers and (when previewed in Lightroom) live Update, photobin syncing ]] %>
<script type="text/javascript">
window.AgMode = "$mode";
cellRolloverColor="#A1A1A1";
cellColor="#949494";
<% if mode == 'preview' then %>
		window.AgOnLoad = function() {
		tellLightroomWhatImagesWeAreUsing(); 
		setActiveImageSize( "<%= mySize %>" );
		<% if image then %>
			callCallback( "showInPhotoBin", "$image.imageID" );
		<% end %>
}
<% end %>
</script>
<script type="text/javascript" src="$theRoot/resources/js/live_update.js">
</script>
<% --[[ Special hacks for Internet Explorer ]] %>
<!--[if lt IE 7.]> <script defer type="text/javascript" src="$theRoot/resources/js/pngfix.js">
</script>
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="$theRoot/resources/css/ie7.css"></link>
<![endif]-->
<!--[if lt IE 7.]> <link rel="stylesheet" href="$theRoot/resources/css/ie6.css"></link>
<![endif]-->
</head>
<% --[[ The main HTML page begins here ]] %>
<body>
		<% --[[ experimental; get colors from kuler]] %>
		<% if model.nonCSS.showKuler then %>
		<%@ include file="kuler.html" %>
		<% end %>
<div id="wrapper_$mySize">
<%
		local function fixUrlIfRelative( url )
url = tostring( url ) or ""
if string.find( url, "[a-z]+:" ) then
-- this url starts with something like http: or mailto:, so leave it alone
else
-- this url is probably relative, so we need to tack on theRoot to the beginning
-- of it, so no matter where the page we're currently viewing is placed in the 
-- output hierarchy, this link will still point to the same page
url = theRoot .. "/" .. url;
end
return url
end
--[[ Include the identity plate during preview to enable quick live update ]]
              local includeIdentityPlate = mode == 'preview' or model.appearance.logo.display
				if includeIdentityPlate then
				local url = fixUrlIfRelative( model.metadata.homePage.value )

		%>

<div id="model.nonCSS.idplateEnabled">

<div class="logo">
<a href="$url">
<img width="<%= getIdentityPlateSize().width %>" height="<%= getIdentityPlateSize().height %>" class="pngDelayDisplay" src="$others/logo.png" alt="Logo">
</a>
</div>
</div>

<%
end --[[ End conditionalize identity plate ]]
%>
<% --[[ Page header titles ]] %>
<div id="sitetitle">
<h1 onclick="clickTarget( this, 'metadata.siteTitle.value' );" id="metadata.siteTitle.value" class="textColor">$model.metadata.siteTitle.value</h1>
</div>
<div id="collectionHeader">
<h1 onclick="clickTarget( this, 'metadata.groupTitle.value' );" id="metadata.groupTitle.value" class="textColor">$model.metadata.groupTitle.value</h1>
<p onclick="clickTarget( this, 'metadata.groupDescription.value' );" id="metadata.groupDescription.value" class="textColor">$model.metadata.groupDescription.value
</p>
</div>

Pour le fichier grid.html : déplacer les balises <a> et </a> afin qu'elles entourent la balise <img> et non une balise <div> </div>.
Attention aussi à bien fermer la balise <img> (qui doit être une balise auto-fermante elle-aussi. CAD terminée par "/>" et non par ">" seul)

Fichier grid.html

 <%
              --[[ Define some variables to make locating other resources easier
              firstPage was defined in our manifest.]]
			local others = "content"
			local theRoot = "."
			local mySize = "thumb"
			%>
			<% --[[ Include the page header]] %>
			<%@ include file="head.html" %>
			<% --[[ Main grid area ]] %>
<div id="stage">
	<div id="index">
		<lr:ThumbnailGrid>
			<%
				--[[ Logic for putting borders around all the grid cells ]]
				local borderFunc = function( row, column )
				local result = ''
				if column == columns then result = ' borderRight' end
				if row == rows then result = result .. ' borderBottom' end
				return result
				end
				%>
          <% --[[ The grid ]] %>
<lr:GridPhotoCell>
<div class="thumbnail borderTopLeft<%= borderFunc( row, column ) %>" onmouseover="window.gridOn( this.parentNode, 'ID<%= image.imageID %>_thumb' );" onmouseout="window.gridOff( this.parentNode );" onclick="window.location.href='$others/<%= image.exportFilename %>_large.html'">
<div class="itemNumber">$cellIndex</div>
<div style="margin-left:<%= 80 - math.floor( image.renditions.thumb.width / 2 ) %>px; margin-top:<%= 80 - math.floor( image.renditions.thumb.height / 2 ) %>px;">
<% if model.nonCSS.dropShadows then %>
<div class="dropShadow">
<div class="inner">
<% end %>
<a href="$others/<%= image.exportFilename %>_large.html" onclick="return needThumbImgLink;">
<img src="$others/images/thumb/<%= image.exportFilename %>.jpg" id="ID<%= image.imageID %>_thumb" alt="" class="thumb" />
</a>
<% if model.nonCSS.dropShadows then %>
</div>
</div>
<% end %>
</div>
</div>
</lr:GridPhotoCell>
<lr:GridEmptyCell>
<div class="emptyThumbnail borderTopLeft <%= borderFunc( row, column ) %>"></div>
</lr:GridEmptyCell>
<lr:GridRowEnd>
<div class="clear">
</div>
</lr:GridRowEnd>
</lr:ThumbnailGrid>
</div>
</div>
<div class="clear">
</div>     <% --[[ Pagination section ]] %>
<% if numGridPages > 1 then %>
<div class="pagination">
<ul>
<lr:Pagination>
<lr:CurrentPage>
<li class="current textColor">$page</li>
</lr:CurrentPage>
<lr:OtherPages>
<li class="textColor"> <a href="$link">$page</a> </li>
</lr:OtherPages>
<lr:PreviousEnabled>
<li class="previous textColor">
<a class="paginationLinks" href="$link">
<%= LOC "$$$/AgWPG/Templates/HTML/output/Previous=Previous" %></a>
</li>
</lr:PreviousEnabled>
<lr:PreviousDisabled>
<li class="previous textColor"> <%= LOC "$$$/AgWPG/Templates/HTML/output/Previous=Previous" %> </li>
</lr:PreviousDisabled>
<lr:NextEnabled>
<li class="next textColor"> <a class="paginationLinks" href="$link">
<%= LOC "$$$/AgWPG/Templates/HTML/output/Next=Next" %></a>
</li>
</lr:NextEnabled>
<lr:NextDisabled>
<li class="next textColor"> <%= LOC "$$$/AgWPG/Templates/HTML/output/Next=Next" %> </li>
</lr:NextDisabled>
</lr:Pagination>
</ul>
</div>
<% end %>
<% --[[ Include the page footer]] %>

<%@ include file="foot.html" %>

Pour le fichier grid.html : déplacer les balises <a> et </a> afin qu'elles entourent la balise <img> et non une balise <div> </div>

Fichier detail.html

<%
--[[ Define some variables to make locating other resources easier
firstPage was defined in our manifest.]]
local image = getImage( index )
local theRoot = ".."
local others = "."
local mySize = "large"
%>
<% --[[ Include the page header]] %>
<%@ include file="head.html" %>
<% --[[ Main image area ]] %>
<div id="stage2">
<div id="previewFull" class="borderTopLeft borderBottomRight">
<div id="detailTitle" class="detailText">
$image.metadata.title
</div>
<% --[[ Pagination section ]] %>
<div class="detailNav">
<ul>
<lr:Pagination>
<lr:PreviousEnabled>
<li class="previous"> <a class="paginationLinks detailText" href="$link"><%= LOC "$$$/AgWPG/Templates/HTML/output/Previous=Previous" %></a> </li>
</lr:PreviousEnabled>
<lr:PreviousDisabled>
<li class="previous detailText"> <%= LOC "$$$/AgWPG/Templates/HTML/output/Previous=Previous" %> </li>
</lr:PreviousDisabled>
<li class="index"> <a href="$gridPageLink" class="detailLinks detailText"><%= LOC "$$$/AgWPG/Templates/HTML/output/Index=Index" %></a> </li>
<lr:NextEnabled>
<li class="next"> <a class="paginationLinks detailText" href="$link"><%= LOC "$$$/AgWPG/Templates/HTML/output/Next=Next" %></a> </li>
</lr:NextEnabled>
<lr:NextDisabled>
<li class="next detailText"> <%= LOC "$$$/AgWPG/Templates/HTML/output/Next=Next" %> </li>
</lr:NextDisabled>
</lr:Pagination>
</ul>
</div>
<%
--[[
Logic for centering the image on the page.  We've decided to implement a rather complicated
layout system for the image depending on whether it can fit nicely in the same area
occupied by the grid.  That coupled with the fact that HTML doesn't center things very
well means its a little harder yet.  The solution we adopt is to calculate the left margin
for the image, and then position the element manually.
]]
local imageBorderWidth = 0
local imgWidth = image.renditions.large.width
local imgHeight = image.renditions.large.height
if model.nonCSS.showImageBorderLarge then
imageBorderWidth = model.nonCSS.imageBorderWidth
end
local gridDefinedWidth = model.nonCSS.numCols * 161 + 1
local imagePlusBorderDefinedWith = 2 * imageBorderWidth + model.photoSizes.large.width + 30
local stageWidth = math.max( gridDefinedWidth, imagePlusBorderDefinedWith )
local previewX = math.floor( math.max( 15, ( stageWidth - imgWidth ) / 2 ) ) - imageBorderWidth
%>
<div style="margin-left:<%= previewX %>px;">
<%
local pathToANode="parentNode.parentNode"
if model.nonCSS.dropShadows then
pathToANode = "parentNode.parentNode.parentNode.parentNode" %>
<div class="dropShadow">
<div class="inner">
<% end %>
<a href="$gridPageLink">
<img src="images/large/<%= image.exportFilename %>.jpg"
class="previewFullImage preview"
id="previewImage"
alt="$image.metadata.title"
<% if mode == 'preview' then %>
width=<%= imgWidth %>
height=<%= imgHeight %>
<% end %>
onclick="var node=<%= pathToANode %>; if( node.click ) { return node.click(); } else { return true; }" />
<% if model.nonCSS.dropShadows then %>
</a>
</div>
</div>
<% end %>
</div>
<div style="clear:both; height:5px"></div>
<% --[[ Caption ]] %>
<div id="detailCaption" class="detailText">
$image.metadata.description
</div>
</div>
</div>
<div class="clear">
</div>
<% --[[ Include the page footer]] %>
<%@ include file="foot.html" %>