Inserir Imagem nas Páginas

Escrito por Mario SAM

Quando a gente começa a editar as páginas do Magento, na tentativa de personalizar nosso template/tema, sempre surge a dúvida “como inserir uma imagem na página?“.

E não estou falando de inserir uma foto no produto. Estou me referindo a banners, imagens de fundo, fotos da empresa, imagem em botões, etc.

Então existem basicamente 4 (quatro) formas de inserir imagens no seu template, que veremos abaixo.

1. Arquivo CSS (folhas de estilo)

Imagino que essa seja a forma mais fácil e rápida de inserir imagens na tela. Basta você abrir o arquivo:

skin > frontend > default > default > css > styles.css

Você pode alterar os diretórios default/default pelo nome do seu template/tema.

Para inserir uma imagem via css, veja o exemplo abaixo:

body { background: url(../images/nome_imagem.gif); }

Detalhe importante, a imagem que você fez referência no código deve existir no diretório:

skin > frontend > default > default > images

Esse formato é recomendado quando você precisa de imagens para compor o visual do seu template, criar uma estética pro site, como imagens de fundo, papel de parede, botões, ícones, etc.

2. Páginas de CMS

Bom, talvez o css não seja a forma mais fácil e rápida. Quando você acessa o backend do Magento e vai criar/alterar uma página ou um bloco estático, existe um editor de conteúdo que facilita muito a edição, inclusive na hora de incluir imagens (em poucos cliques), sem necessidade de códigos.

Mas, caso você prefira usar códigos, segue um exemplo:

Mario SAM

Lembrando que, se você não usar o editor para enviar a imagem, vai precisar submeter o arquivo manualmente até o diretório images.

Este formato é indicado para situações onde você precisa inserir imagens de conteúdo, que estão relacionadas ao texto da página, ou ainda imagens promocionais como banners. Por exemplo, se você tem uma página falando sobre sua empresa, pode inserir uma foto da sua empresa ou da sua equipe.

3. Arquivo phtml

Em geral, essa alternativa é pouco utilizada, ou pelo menos deveria ser pouco utilizada. Já que os arquivos phtml deveriam servir apenas para estruturar os elementos visuais (html) e organizar o conteúdo das páginas.

Porém vão existir situações onde será necessário utilizar o código abaixo:

Mario SAM

Reforçando… a imagem precisa ser enviada para o diretório images do seu template/tema.

Quando você vai utilizar este formato? Provavelmente quando estiver desenvolvendo módulos para Magento ou personalizando elementos específicos de um template, e precisar inserir uma imagem que não se ajusta bem ao css.

4. Arquivo XML

É uma alternativa válida, mas que deve ser usada com muita ponderação. Os arquivos de template XML são responsáveis por montar a estrutura do tema, e deve-se evitar ao máximo utilizar estes arquivos para inserir conteúdo de página, procure usar esses arquivos apenas para configurar a estrutura das páginas.

Mas, se precisar inserir imagens usando xml, veja um exemplo:

images/sua_imagem.jpg
Mario SAM é meu pastor e nada me faltará.

Você pode incluir as tags action method dentro de um block ou um reference. E como qualquer uma das opções anteriores, aqui também você precisa enviar o arquivo para o diretório indicado (images).

Quando usar este modelo? Quando você quiser dificultar a vida dos “alteradores de código“. Digamos que você criou um módulo, e deseja inserir a marca da sua empresa na página. Utilizar o formato xml seria uma boa alternativa.

Outras opções

Existem outras formas de inserir uma imagem na página? Sim, existem!

Mas são alternativas mais complexas, muito específicas, e não irei abordar neste post. Mas pra você ter uma idéia, outras formas de inserir imagens no Magento seriam através de:

– Código Javascript (ou ajax)

– Banco de dados (variáveis personalizadas)

iFrame (como aqueles plugins do facebook)

Então alternativas é que não faltam. Escolha o seu modelo e comece a trabalhar.

Sucesso!

O Autor

Mario SAM

Desenvolvedor Magento com certificação M1 Developer e M1 FrontEnd Developer. Graduado em Web Design e Programação, pós-graduado em Gestão de Projetos e TI. Não sou matemático mas estou aqui para somar.