COMO INSERIR IMAGENS COM LEGENDAS NO
JORWIKI
por Paulo Fávari
Sumário
Por que não consigo deixar as fotos com o estilo da wikipedia?.........................................................1
Primeira saída.......................................................................................................................................1
Segunda saída.......................................................................................................................................1
O que eu consegui................................................................................................................................2
Analisando o código.............................................................................................................................2
Parte html.........................................................................................................................................2
Parte wiki.........................................................................................................................................3
Recapitulando (ou Guia Rápido de Valores de Atributos)....................................................................3
Sobre as imagens..................................................................................................................................4
Por que não consigo deixar as fotos com o estilo da wikipedia?
O servidor wiki do nosso trabalho não aloca fotos. Por outro lado, o código wiki para
inserir fotos ([[Imagem:nome_da_imagem.jpg]]) impede o uso de imagens externas,
vindas de outros sites.
É aí que está o prolema: como não consigo alocar imagens no servidor, também não
consigo ter boxes para imagens e legendas.
Primeira saída
Uma saída seria criar uma tabela utilizando código wiki colocando o endereço da imagem
como conteúdo de uma das células:
{| class=”wikitable”
|| url_da_imagem
|}
No entanto, surge outro problema: o código class=”wikitable” não interpretado
corretamente pelo servidor wiki – é uma proteção que o servidor tem. Quando o servidor
wiki lê essa parte do código ele joga essa parte do código para a tabela e não para a
célula, como deveria ocorrer (tá, eu sei que pouca gente vai entender isso, mas os que
souberem o que eu estou falando vão entender).
Logo, voltamos à estaca zero.
Segunda saída
Mas e se eu utilizar código html? Sinto te informar, amiguinho, mas o servidor wiki impede
a utilização da tag <img>, que insere imagens. Ou seja, fodeu também.
Mas não queiram o servidor mal, todas essas limitações (assim como o que acontece com
os vídeos) existem por questões de segurança.
O que eu consegui
Bom, o que eu consegui foi uma mescla de código wiki com código html. Não ficou 100%
igual ao resultado da wikipedia, mas parece bem. Em outras palavras, fica mais bonito.
Eis o código:
<div class="thumb tright">
<div style="width: 182px;">
{| border="0"
|| url_da_imagem
|}
</div>
<div class="thumbcaption" style="width:
182px;">legenda_aqui</div>
</div>
O que está em vermelho é o código html, o que está em azul, wiki.
Analisando o código
Vamos analisar agora parte a parte o código. Sempre lembrando que É NECESSÁRIO
FECHAR TODAS AS TAGS, INDEPENDENTE DE QUAL SEJA O CÓDIGO.
Parte html
<div class="thumb tright">
<div style="width: 182px;">
A tag <div> cria uma célula de uma tabela. É com base nela que burlaremos as
dificuldades impostas pelo wiki. Isso se deve ao fato de que a vigilância para essa tag não
é tão grande (muaahahahha).
O que dará o estilo wiki nos boxes das fotos são justamente esses códigos coloridos. Mas
o que eles fazem?
class="thumb tright" definirá o estilo de cores e bordas do fundo do box (aquele
cinza com borda fina).
As opções para essa tag são:
thumb tright = deixará o box à direita
thumb tleft = deixará o box à esquerda
thumb = sem nenhuma predefinição (fica a esquerda também)
style="width: 182px;" definirá o tamanho do box. Na verdade isso é um conjunto
de tag html com predefinições de CSS, mas ninguém precisa saber disso.
Os possíveis valores de width são:
Tamanho em pixel = ele vai fixar o tamanho da largura célula no número de pixels
inserido. Atenção: é necessário colocar o px depois do número.
Tamanho em porcentagem = ele vai fixar um tamanho da largura relativo à
resolução da página. Ou seja, se a página estiver em 800x600 e o width for de 10%, o
box terá 60px. Atenção: é necessário colocar o % depois do número.
Pode ser usado, também, em vez de width, height. O resultado é análogo ao width,
mas o atributo alterado é a altura. No entanto, se height for utilizado, a legenda pode
ficar com o tamanho diferente do que o da figura.
<div class="thumbcaption" style="width: 182px;">legenda_aqui</div>
class="thumbcaption" = define o estilo de cores e bordas da legenda. Não altere.
style="width: 182px;" = é o mesmo atributo citado anteriormente. Se usar algum
valor para width antes, utilize O MESMO VALOR AQUI. Caso contrário, a legenda pode
ficar maior ou menor que a imagem.
legenda_aqui = é o espaço para inserir a legenda.
Atenção: feche todas as tags.
Parte wiki
{| border="0"
|| url_da_imagem
|}
Este é o comando básico para inserir uma tabela em wiki. Utilizaremos a tabela por um
simples motivo: o seu conteúdo é interpretado pelo servidor wiki como quase qualquer
coisa. Explico: se colocar um texto, será interpretado como texto; se colocar um link, será
um link; se colocar o endereço de uma imagem, aparecerá a imagem (ihuuuul); se colocar
um código de um vídeo, ele não aparecerá porque a tag <embed> é bloqueada pelo
servidor.
Então, vamos às explicações:
{| border="0"
|| url_da_imagem
|}
border="0" = é o tamanho da borda que aparecerá, ou seja, nenhuma. Mas como
assim? Explico: essa tabela não é para aparecer, é só para ser um suporte à imagem. Se
o valor for alterado para 1 ou mais, o resultado será uma borda de tabela bem no estilo
mais tosco de Word. Deixe no valor 0, ok?
|- = esse comando é necessário porque ele termina a seção de atributos da tabela e
inicia a tabela em si.
url_da_imagem = é o endereço da imagem COM A EXTENSÃO, só isso.
Recapitulando (ou Guia Rápido de Valores de Atributos)
<div class="(thumb tright ou thumb tleft ou thumb)">
<div style="width: ([tamanho]px ou [tamanho]%);">
{| border="0"
|| url_da_imagem
|}
</div>
<div class="thumbcaption" style="width: ([tamanho]px ou [tamanho]
%);">legenda_aqui</div>
</div>
Para cores iguais, valores iguais.
Sobre as imagens
Elas devem ter o tamanho esperado para o artigo. Isso porque o código wiki aceita, mas
NÃO REDIMENSIONA imagens. Então, redimensione manualmente, utilizando o Paint,
por exemplo, antes de subir a imagem para a web. Ou escolha alguma imagem na web
com o tamanho certo para o artigo.
Recomendo imagens de 180px de largura.
É isso, galera! Espero ter ajudado.