quarta-feira, 30 de julho de 2008

JCE Edição de Artigos - Inserindo uma imagem

Yo!

Como prometido, esta é continuação do post que falava da edição de artigos com o JCE, e o assunto de hoje é inserção de imagens.

Nível: noob

Downloads úteis:
Pré-requisitos: Estar utilizando o cms JOOMLA versão 1.0.13 ou 1.0.15 (versões que tenho 100% de certeza que funciona), pode ser que funcione para versões anteriores, mas as garantidas são as citadas acima. Este tutorial também leva em conta que você tem o JCE Admin instalado no joomla de seu site.

Objetivo: Editar um artigo qualquer no joomla via JCE utilizando os estilos de seu tema.

Para quem: Este tutorial é destinado a Usuários Publicadores que não tem muita experiência, então, se você já se considera experiente no assunto, ou é um webdesign que caiu de paraquedas aqui, este não é um tutorial para você!





Inserindo imagens no seu artigo

Para inserir uma imagem em um artigo ou página qualquer via JCE, você tem que primeiramente ter esta imagem salva no seu servidor, para então poder utilizá-la. O Joomla até permite que você copie e cole uma imagem direto da internet (roubando de outra página por exemplo), mas este não é um procedimento recomendável, visto que quando o proprietário do site despublicar o artigo origem da imagem, ou o site sair do ar por um motivo qualquer, você também será prejudicado. Sendo assim, segue o passo a passo para a inserção de imagens no JCE e algumas consideraçõs sobre o posicionamento das mesmas.

Passo 1: Escolha o artigo à ser editado e clique em editar, ou clique em novo e digite todo o artigo (caso você tenha escolhido partir de um artigo em branco) ;

Passo 2: Para inserir uma imagem no seu artigo, clique no botão Inserir/Editar imagem


Passo 3: A caixa que vai abrir tem várias funções, aqui eu vou explicar somente as mais importantes, e deixo o resto para os mais curiosos explorarem.

Segue uma descrição da janela acima, clique na imagem para ampliar:

1 - Esta é a área onde ficam listadas as pastas de imagens do site, clicando em alguma delas, seu conteúdo irá abrir na área 2, conforme mapeado na imagem.
2 - Conforme escrito acima, este é o local onde as imagens de uma pasta específica aparecem. Bem semelhante ao explorer do windows.
3 - A área de detalhes nos fornece informações importantes sobre a imagem escolhida, como tamanho em bites, dimensões e tipo do arquivo.
4 - Botão Directory up: este botão sobe um nível de diretório, por exemplo, se você estiver explorando o conteúdo de uma pasta, ele sai desta pasta e volta para o root.
5 - New folder: conforme o próprio nome diz, cria uma nova pasta. É bastante útil separar as imagens quando o site ficar sobrecarregado. Isto economiza um bom tempo na sua próxima consulta.
6 - Upload: o mais importante deste conjunto de botões, o botão upload envia uma imagem do seu computador para o banco de dados do site;
7 - Alignment: alinha a imagem em relação ao texto, as opções mais importantes são, centralizar, à direita, à esquerda, topo e baixo;
8 - Border: adiciona uma borda à imagem, é possivel escolher a cor da borda e seu estilo.

Passo 4: para inserir uma imagem no texto, escolha a pasta onde a imagem está, ou envie uma imagem do seu computador, escolha o alinhamento, redimensione à vontade, escolha ou não usar bordas e clique em insert, no parte de baixo/direita da janela.

Passo 5: para editar uma imagem que já está inserida no site, clique no mesmo botão que você usou para inserir a imagem, e depois de altera-la, clique em update.

Bom, é isso, t++ galera!

Um comentário:

Recife Vip Entertainment disse...

Olá, boa noite,

Nunca dá certo, toda vez que eu coloco uma imagem a esquerda o texto fica abaixo da imagem,já tentei vários editores, não sei se é algo no CSS, quando estou no edidor o texto fica normal, mas quando vou visualizar no site #fail. para vcs entenderem coloquei 2 prints no ar, o 1º é a imagem no editor como gostaria que ficasse, a 2ª imagem é como está ficando no site vejam só.

imagem 1
http://www.recifevip.com.br/imagem1.png

imagem 2
http://www.recifevip.com.br/imagem.png


Espero que possam me ajudar, desde já agradeço.