E’ chiaro, trovo Lightroom un buon prodotto, lo uso normalmente trovandone i pregi e i difetti.
Dal mio lato ‘oscuro’, quello legato all’informatica, ho ereditato il fatto che un programma è uno strumento di lavoro, ma è tanto migliore quanto più è versatile.
Girando per il web mi sono imbattuto in questo post di Andy Rahn, apparso sul blog di John Nack.
Ho deciso di tradurlo e proporlo sul mio blog in italiano.

Una veloce introduzione alla costruzione di template per il modulo ‘Web’ di Adobe Lightroom
[di Andy Rahn – Traduzione e adattamento di Corrado Ignoti]

Il modulo ‘web’ di Lightroom supporta l’uso di template che permettono ai designer di creare delle gallerie di fotografie personalizzate che possono essere visualizzate direttamente all’interno del programma. Per la verità Lightroom supporta sia template per la produzione di web gallery basate su HTML che quelli per la produzione di gallery basate su flash. In questo articolo ci focalizzeremo, però, sulla produzione di gallerie basate su HTML.

Un template HTML è costituito da:

  • Un file denominato galleryMaker.xml ovvero il file che descrive la galleria, sono presenti in questo file le descrizioni di come deve apparire il pannello laterale del template, la lista delle immagini che sono necessarie al funzionamento del template e sono presenti le dichiarazioni e le inizializzazioni di alcuni variabili che verranno utlizzate per la costruzione dei file HTML finali.
  • Un file denominato transformer.xslt, serve per convertire quanto descritto dal file galleryMaker.xml in HTML, fogli di stile (CSS) e tutto quando serve per la visualizzazione della galleria in HTML sul web.
  • Una serie di altri file collaterali quali, CSS personalizzati dall’utente, icone ecc, ecc.

Faremo una serie di esempi per dimostrare le capacità di questo sistema di pubblicazione. Alla fine del post è presente un file .zip che contiene un template di esempio.

Il modulo web di LR utilizza XSLT per la creazione delle pagine HTML, sarebbe meglio avere una certa famigliarità con il linguaggio per capire meglio il contentuto di questo post. Ci sono molti buoni tutorial sull’uso di XSLT in giro per internet. Sicuramente uno fatto molto bene è quello presente su [W3Schools]

galleryMaker.xml

Questo file è composto, essenzialmente, da tre sezioni:

  • la prima contiene informazioni circa il template, viene indicato il nome del template e quello di chi l’ha creato. Questa sezione è definita con il nome di "galleryInfo"
  • nella seconda sezione sono definite una serie di variabili alle quali l’utente ha accesso dal pannello che si trova sulla destra di LR nel modulo Web
  • nella terza sono definite le impostazioni di default per i pannelli "Custom Settings" e "Image Settings" che sono presenti nel pannello di destra del modulo web

Di seguito viene presentato un file di esempio:

<?xml version="1.0" encoding="utf-8"?>
<galleryMaker xmlns:ag="http://ns.adobe.com/silver/1.0">
  <galleryInfo>
    <amg ver="0.5" />
    <thumbnail path="preview.jpg" />
    <galleryName>Demo Template</galleryName>

    <galleryDescription></galleryDescription>
    <gallerVersion ver="1.0" />
    <livePreview enabled="yes" />
    <creator company="Adobe Systems, Inc." designer="Adobe Lightroom Engineering" />
    <category>Web photo gallery</category>

    <identifier>com.adobe.wpg.demo1t</identifier>
    <ag:galleryType>HTML</ag:galleryType>
    <ag:maximumGallerySize>20</ag:maximumGallerySize>
  </galleryInfo>

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  <ag:compatabilty>
    <ag:id>com.adobe.lightroom.default2</ag:id>
  </ag:compatabilty>
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

  <ag:perImage>
    <description heightInLines="3" title="Caption" />
  </ag:perImage>
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  <sizes>
    <size height="130" name="thumb" width="130" />

  </sizes>
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  <mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml">
    <mx:Model id="metadata">
      <siteInfo>
        <title ag:liveUpdateTarget="#liveUpdateSiteTitle">Site Title</title>

      </siteInfo>
    </mx:Model>
    <mx:Model id="appearance">
      <body>
        <cssID>body</cssID>

        <background-color>#4c4c4c</background-color>
      </body>
    </mx:Model>
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    <mx:VBox ag:layout="fill_horizontal=1,">

      <mx:HBox ag:layout="fill_horizontal=1,">
        <mx:Label text="Site Title" />
      </mx:HBox>
      <mx:HBox ag:layout="fill_horizontal=1,">
        <mx:TextInput ag:layout="fill_horizontal=1,width=1," id="siteTitle" />
      </mx:HBox>

    </mx:VBox>
    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    <mx:Binding destination="appearance.siteTitle.color" source="foregroundColor.selectedColor" />
    <mx:Binding destination="foregroundColor.selectedColor" source="appearance.siteTitle.color" />
    <mx:Binding destination="metadata.siteInfo.title" source="siteTitle.text" />
    <mx:Binding destination="siteTitle.text" source="metadata.siteInfo.title" />

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  </mx:Application>
</galleryMaker>

transformer.xslt

Questo file trasforma un file in XML in file HTML che possono essere messi su un server web qualsiasi e che comporranno la nostra galleria. Tale file deve essere salvato nella stessa directory nella quale abbiamo messo il file galleryMaker.xml

Giusto per vedere come è fatto questo file ne mettiamo uno di esempio subito qui di seguito:

 

<?xml version="1.0"?>
<xsl:stylesheet
	version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<xsl:output method="xml" indent="yes"/>

	<xsl:param name="siteTitle" select="/photoCollection/display/metadata/siteInfo/@title" />

	<xsl:template match="photoCollection">
		<files>
			<!-- copy source xml to a file for ease of development -->
			<file name="source.xml">
				<xsl:copy-of select="/" />
			</file>
			<!-- A ultra simple index page -->
			<xsl:call-template name="index.html" />
		</files>
	</xsl:template>
</xsl:stylesheet>

…e adesso è ora di provare

Per prima cosa è necessario creare la una cartella, la chiameremo DemoTemplate all’interno di ……

La directory webgalleries non esisterà e sarà necessario crearla. Adesso è sufficiente lanciare Lightroom, selezionare una o più immagini e passare al modulo web, fra la lista dei template disponibili dovreste proprio vedere il nostro "Demo Template". Non c’è in realtà molto da vedere quando selezionate il template appena creato, sul vostro disco dovrebbe comparire, però, un file "source.xml".

Per trovarlo è sufficiente accedere alla directory /tmp, all’interno di questa troverete una cartella che ha come nome un numero generato casualmente, all’interno di questa cartella troverete il ricercato file source.xml.

Spero di avervi messo un po’ di appetito….. il continuo nel prossimo post 🙂

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *