Galeria HTML ¶

Visão geral ¶

A Galeria HTML é uma ferramenta para exportar um conjunto de álbuns ou imagens para uma página HTML.

Esta ferramenta poderosa pode exportar seus álbuns para uma galeria de imagens web compatível com HTML. Você pode selecionar facilmente as imagens ou os álbuns a serem exportados para uma página HTML e definir diversos designs e parâmetros para a renderização HTML. A codificação UTF-8 é usada para melhor internacionalização.

Usando o assistente ¶

Modo de seleção de página da galeria HTML¶

Para iniciar a ferramenta, use a entrada de menu Ferramentas ‣ Criar galeria HTML Ctrl+Alt+Shift+H ou o ícone correspondente na aba Ferramentas na barra lateral direita. A ferramenta exibirá uma visualização para selecionar o conteúdo a ser exportado, seja a partir da seleção de itens atuais ou de uma lista de álbuns. O modo de seleção Álbuns permite selecionar itens dos álbuns que você deseja exportar para HTML. Basta marcar os respectivos álbuns na lista hierárquica aninhada. Você pode usar as três abas seguintes, Etiquetas, Pesquisas e Rótulos, para refinar sua seleção com base em etiquetas, rótulos ou resultados de pesquisas anteriores no digiKam.

A página da galeria HTML para selecionar itens¶

O próximo passo é selecionar um Tema para gerar a galeria.

A página da galeria HTML para selecionar tema¶

Dependendo do tema escolhido, você pode ter opções adicionais para ajustar a aparência da galeria.

A próxima captura de tela mostra a configuração dos parâmetros do tema (aqui o tema Clássico por exemplo).

A página da galeria HTML para ajustar os parâmetros do tema¶

Para todos os temas selecionados, você pode ajustar as configurações das imagens e miniaturas na galeria.

A página da galeria HTML para ajustar as propriedades das imagens e miniaturas¶

Na seção Propriedades da imagem você pode salvar imagens modificadas ou usar imagem original.

Para imagens modificadas, você pode selecionar como formato de saída JPEG (menor tamanho de arquivo, mas com perdas) e PNG (sem perdas e licença livre) e definir recursos específicos de compactação de imagem. Se o espaço em disco for um problema, verifique a compactação da imagem de destino e reduza o nível de compactação em relação ao valor padrão do aplicativo hospedeiro.

Marcando a caixa de Tamanho máximo, você pode definir o tamanho máximo da imagem de destino (em pixels) com a caixa de rotação à direita. Imagens maiores que esse valor serão reduzidas, mas imagens menores não serão modificadas.

Nota

Se o formato de arquivo JPEG for selecionado para redimensionamento das imagens de destino, todas as informações Exif serão preservadas dos arquivos JPEG originais.

A seção Propriedades da miniatura permite que você defina o formato, a qualidade e o tamanho das miniaturas na galeria.

A página da galeria HTML para configurar a saída¶

Esta página define as configurações de onde e como armazenar a galeria com todas as suas imagens associadas. Selecione uma pasta ou adicione uma nova pasta com permissão de gravação onde você deseja que a galeria seja salva. Serão criadas duas subpastas com o nome da pasta do seu álbum e o nome do tema, contendo tudo.

Uma janela de progresso será exibida para fornecer feedback ao usuário. Pressione o botão Cancelar se desejar cancelar o processo durante esta etapa.

A página da galeria HTML para mostrar o progresso durante a geração da galeria¶

Por fim, a galeria HTML gerada é exibida em um navegador.

O navegador exibindo a galeria HTML no final¶

Criando um novo tema ¶

A ferramenta de galeria HTML pode facilmente criar sites muito diferentes com base em temas. Esta seção explica como criar um novo tema.

Primeiros passos ¶

Um tema é uma pasta que contém pelo menos dois arquivos:

Um Arquivo de área de trabalho (.desktop) descrevendo o tema.

Um arquivo template.xsl para gerar os arquivos HTML.

Quando a ferramenta está em execução, ela faz o seguinte:

Cria uma pasta de saída.

Para cada coleção de imagens:

Cria uma pasta.

Gera miniaturas (quadradas por padrão).

Gera as imagens.

Opcionalmente, copia as imagens originais.

Copia a pasta do tema para a pasta de saída.

Gera um arquivo XML descrevendo as coleções de imagens: gallery.xml.

Gera os arquivos HTML aplicando template.xsl ao gallery.xml.

O arquivo de área de trabalho ¶

O arquivo da área de trabalho descreve o tema. As informações nele contidas são usadas na página de seleção de tema da ferramenta.

É um arquivo INI e se parece com o exemplo a seguir:

[Desktop Entry]
Type=Theme
Name=Hello World
Comment=A demonstration theme

[X-HTMLGallery Author]
Name=The Author
Url=http://example.com/themes/helloworld

[X-HTMLGallery Preview]
Name=Preview's Caption
Url=preview.png

O formato de arquivo área de trabalho (.desktop) é usado para facilitar as traduções de entrada. Se você olhar o arquivo .desktop de um dos temas fornecidos com a ferramenta, encontrará algo assim:

[Desktop Entry]
Name=Simple
Name[br]=Eeun
Name[cs]=Jednoduchý
Name[cy]=Syml
Name[da]=Simpel
...

O bom é que quando seu tema é integrado aos temas padrões da galeria HTML, os tradutores internacionalizam o arquivo de área de trabalho para você.

O arquivo de visualização de imagem usado para ilustrar o tema no assistente será colocado na pasta raiz do tema.

Criando um novo tema a partir de outro ¶

A maneira mais fácil de começar é copiar um tema e modificá-lo. As pastas geralmente podem ser encontradas no Linux em /usr/share/apps/digikam/themes/. Escrever nesta pasta requer acesso root, então não criaremos nosso tema lá. Em vez disso, faça o seguinte em um console:

Crie uma pasta de tema em sua pasta pessoal:

mkdir -p ~/.local/share/digikam/themes/

Vá para esta pasta:

cd ~/.local/share/digikam/themes/

Copie o tema Neve (pasta snow) para esta pasta, com um novo nome, como, por exemplo, snow2:

cp -r /usr/share/apps/digikam/themes/snow snow2

Renomeie o arquivo de área de trabalho conforme necessário:

cd snow2
mv snow.desktop snow2.desktop

Edite snow2.desktop para remover todas as entradas Name[…] e substitua Name=Snow por Name=Snow 2.

Pronto, agora você pode abrir o digiKam e iniciar a ferramenta de galeria HTML. O tema Snow 2 deve aparecer na lista de temas.

Gerando HTML usando regras XSL ¶

O arquivo template.xsl é responsável por gerar os arquivos HTML a partir do arquivo gallery.xml. É um arquivo padrão no estilo ini e tem a seguinte aparência:

<?xml version="1.0" encoding="UTF-8"?>
<collections>
 <collection>
  <name>Name of first collection</name>
  <fileName>collection_folder</fileName>
  <comment>Collection comment</comment>
  <image>
   <title>Image Title</title>
   <description>Image Description</description>
   <date>2009-08-27T09:53:26</date>
   <full fileName="pict1279.jpeg" height="450" width="600"/>
   <thumbnail fileName="thumb_pict1279.jpeg" height="80" width="80"/>
   <!-- If there is an original image, you will get the 'original' tag -->
   <original fileName="original_pict1279.jpeg" height="3000" width="4000"/>

  </image>
  <image>
   <title>Image Title</title>
   <date>2009-08-27T09:55:33</date>
   <description>Image Description</description>
   <full fileName="pict1280.jpeg" height="450" width="600"/>
   <thumbnail fileName="thumb_pict1280.jpeg" height="80" width="80"/>
   <original fileName="original_pict1279.jpeg" height="3000" width="4000"/>
  </image>
  ...
 </collection>

 <collection>
  <name>Name of second collection</name>
  ...
 </collection>
</collections>

Não explicaremos a sintaxe XSLT aqui. Você poderá encontrar a documentação necessária na internet. Recomendamos o tutorial de XSLT aqui para aprender XSLT.

No entanto, vale ressaltar que você pode utilizar o EXSLT, um conjunto de extensões para XSLT. Em particular, o elemento exslt:document é extremamente útil, pois permite gerar vários documentos a partir do mesmo arquivo.

A ferramenta de galeria HTML não impõe restrições à organização de arquivos HTML. Você pode gerar um arquivo por imagem ou apenas um por coleção. Pode-se imaginar um tema que contenha apenas um arquivo HTML e use JavaScript para exibir as diferentes imagens. Já existe um tema que utiliza frames. Você pode até gerar arquivos CSS dinamicamente, se desejar.

Sobre as traduções ¶

Você não deve codificar nenhum texto no modelo, mas sim usar os parâmetros i18n. Por exemplo, em vez de usar isto:

<a href="previous">Previous</a>
| <a href="next">Next</a>

Faça isto:

<a href="previous"><xsl:value-of select="$i18nPrevious"/></a>
| <a href="next"><xsl:value-of select="$i18nNext"/></a>

É muito mais detalhado, mas dessa forma o usuário obterá uma saída HTML localizada.

Se você quiser usar parâmetros i18n em atributos, faça assim:

<a href="previous" title="{$i18nPrevious}"><img src="previous.png"/></a>
| <a href="next" title="{$i18nNext}"><img src="next.png"/></a>

Por enquanto, os parâmetros gerais i18n disponíveis são:

i18nPrevious

i18nNext

i18nCollectionList

i18nOriginalImage

i18nUp

E as propriedades da imagem são:

i18nexifimagemake (“Fabricante”)

i18nexifimagemodel (“Modelo”)

i18nexifimageorientation (“Orientação da imagem”)

i18nexifimagexresolution (“Resolução X da Imagem”)

i18nexifimageyresolution (“Resolução Y da Imagem”)

i18nexifimageresolutionunit (“Unidade de Resolução de Imagem”)

i18nexifimagedatetime (“Data e hora da Imagem”)

i18nexifimageycbcrpositioning (“Posicionamento YCBCR”)

i18nexifphotoexposuretime (“Tempo de exposição”)

i18nexifphotofnumber (“Número F”)

i18nexifphotoexposureprogram (“Índice de exposição”)

i18nexifphotoisospeedratings (“Classificações de velocidade ISO”)

i18nexifphotoshutterspeedvalue (“Valor da velocidade do obturador”)

i18nexifphotoaperturevalue (“Valor da abertura”)

i18nexifphotofocallength (“Distância focal”)

Se precisar de mais parâmetros i18n, envie uma solicitação à Equipe do Projeto.

Imagens e arquivos CSS ¶

Você pode usar imagens, arquivos CSS ou outros arquivos no seu tema. Basta colocá-los na pasta do tema e a ferramenta os copiará para a pasta de saída.

Imagens originais ¶

Conforme explicado anteriormente, se o usuário selecionar a opção Incluir as imagens originais, o arquivo gallery.xml conterá as etiquetas <original />. Se esta etiqueta estiver presente, a página da imagem deverá conter um link para baixar a imagem original.

Aqui está um exemplo:

<xsl:if test="original/@fileName != ''">
      <p>
           <a href="{original/@fileName}"><xsl:value-of select="$i18nOriginalImage"/></a>
      </p>
 </xsl:if>

Miniaturas não quadradas ¶

Por padrão, as miniaturas são cortadas para que fiquem quadradas e tenham o mesmo tamanho. Isso facilita a criação do estilo HTML/CSS. No entanto, se o seu tema estiver pronto para lidar com miniaturas de tamanhos diferentes, adicione este trecho ao seu arquivo .desktop:

[X-HTMLGallery Options]
Allow-non-square-thumbnails=true

O usuário poderá então selecionar se os quadrados devem ou não ser quadrados. Para miniaturas não quadradas, o tamanho especificado da miniatura se torna o tamanho do lado maior da miniatura.

Parâmetros do tema ¶

Talvez você queira oferecer uma maneira para o usuário personalizar seu tema. Por exemplo, você pode fornecer alguns arquivos CSS alternativos ou permitir que o usuário personalize a cor de fundo. Isso é fácil de fazer.

Declarando um parâmetro ¶

Primeiro, você precisa declarar seu parâmetro. Edite seu arquivo .desktop e adicione algo assim:

[X-HTMLGallery Parameter bgColor]
Name=Background Color
Type=color
Default=#123456

Agora inicie a ferramenta e selecione seu tema. Após pressionar Avançar, você deverá ver uma página de opções com um botão de cor inicializado com a cor #123456.

Usando o valor do parâmetro ¶

Em template.xsl, você pode obter o valor do seu parâmetro assim:

<xsl:value-of select="$bgColor"/>

Para alterar a cor de fundo da tag body, você escreveria algo assim:

<body bgcolor="{$bgColor}">
...
</body>

Referência do parâmetro ¶

Aqui está uma descrição mais completa de como declarar parâmetros. Um parâmetro é declarado por uma seção chamada X-HTMLGallery Parameter algumNome. algumNome deve ser substituído pelo nome que você deseja usar em template.xsl.

A chave Name define o texto que será exibido na página de opções. Como este é um arquivo de desktop, ele pode ser traduzido como as outras chaves.
A chave Type define o tipo do parâmetro. No momento da redação deste texto, pode ser um dos seguintes:
- caption
- string
- color
- list
- int
A chave Default define o valor padrão do parâmetro.

Chaves de parâmetro de lista ¶

Um parâmetro de lista permite que o usuário selecione um item de uma lista. Para declarar os itens disponíveis, você deve usar dois conjuntos de chaves: Value-N e Caption-N, onde N é a posição do item, começando em 0.

Value-N é o valor interno do item. Este é o valor que será definido como parâmetro.

Caption-N é o valor exibido do item. Este é o texto que será exibido na lista.

Aqui está um exemplo: o parâmetro style do tema Simple:

[X-HTMLGallery Parameter style]
Name=Style
Type=list
Default=natural.css
Value-0=natural.css
Caption-0=Natural
Value-1=dark.css
Caption-1=Dark

Como você pode ver, o usuário poderá escolher entre Natural ou Dark. Dependendo da escolha do usuário, <xsl:value-of select=’$style’/> será expandido para natural.css ou dark.css.

Chaves de parâmetro int ¶

Um parâmetro int permite que o usuário selecione um inteiro usando uma caixa de rotação. Além do valor padrão, você pode definir os valores mínimo e máximo usando as chaves Min e Max.

Aqui está um exemplo:

[X-HTMLGallery Parameter size]
Name=Size
Type=int
Default=12
Min=4
Max=28

Chaves de parâmetro string e caption ¶

Um parâmetro de string permite que o usuário insira uma única string para definir regras de configuração, por exemplo. Um parâmetro de caption permite que o usuário insira várias strings com suporte para verificação ortográfica para definir uma Descrição ou um Título.

Palavras finais ¶

Este é o final deste capítulo, então agora é hora de você ser criativo e começar a adicionar novos temas.

Quando terminar, não hesite em enviar seu trabalho para integração oficial no digiKam. Imagine como você ficará orgulhoso de ver seu novo tema incluído na lista oficial. Consulte a página de como contribuir no site do projeto digiKam para obter mais detalhes.