Exibir código-fonte para Produto com imagem na Descrição

{|
|-
| colspan=2; style="border:0px solid; vertical-align:top;" |
{| cellpadding="0" cellspacing="2" style="width:822px; vertical-align:top; text-align: right;"
| [[Imagem:Volt.png|link=E-commerce]]
|}
|-
| colspan=2 style="border:1px solid #cccccc; vertical-align:top;" |
{| cellpadding="2" cellspacing="2" style="width:822px; vertical-align:top; text-align: left;"
| <font color=red>'''Atenção:'''</font> Os produtos do E-commerce já possuem uma [[Produtos Cadastrados#Incluir ou Excluir Imagens dos Produtos|galeria de imagens]] de fácil utilização.

A utilização desta opção somente é recomendável como um último recurso no caso de possuir alguma imagem, que necessite ser exibida com um tamanho maior do que o tamanho de exibição da visualização da galeria de imagens do produto no E-commerce.

Geralmente no caso de imagens com texto, que na visualização das imagens do produto no E-commerce o texto fique ilegível e o redimensionamento da imagem para um tamanho menor também prejudique a correta visualização da imagem.
----
'''Para incluir imagens na Descrição do produto, siga o procedimento:'''
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom074.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 
1. No campo '''Descrição''', posicione o cursor "|" no local onde deseja inserir uma imagem.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom075.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 2. Clique no botão de '''Inserir/editar imagem''' [[Imagem:NSP_089_19.png|link=]].
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom076.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 3. Será aberta a tela '''Inserir/editar imagem'''.
Clique no botão [[Imagem:NSP_089_15.png|link=]] á direita do campo '''Endereço da imagem'''.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom077.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 4. Será aberta a tela do '''Responsive Filemanager'''.
No canto superior esquerdo, clique no botão '''Enviar um arquivo''' [[Imagem:NSP_096.png|link=]].
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom078.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 5. Será aberta a aba '''Base upload''' para transferência de arquivos para o servidor.
Clique no botão '''Add file(s)'''.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom079.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 6. Procure e selecione o arquivo da imagem em seu computador, após clique em '''Abrir'''.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom080.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 7. Clique no botão '''Start upload''' para iniciar a transferência do arquivo da imagem de sua máquina para o servidor.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom081.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 8. Após terminar de transferir o arquivo da imagem de seu computador para o servidor clique em 

[[Imagem:NSP_101.png|link=]]
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom082.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 9. Será retornado para lista de arquivos do '''Responsive Filemanager'''.
10. Para selecionar a imagem a ser inserida na descrição do produto, clique sobre a imagem.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom083.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 11. Será retornado para a tela '''Inserir/editar imagem'''.
Note que no campo '''Endereço da imagem''' será automaticamente preenchido com o endereço da imagem no servidor e o campo '''Dimensões''' com as dimensões em pixels da imagem.

Clique em [[Imagem:NSP_109.png|link=]].
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom 084.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 
12. Aguarde, a imagem será inserida no local em que estava posicionado o cursor "|".

13. Termine o preenchimento dos campos da tela de inclusão de cadastro de produto.

14. Quando terminar, no final da tela clique no botão '''Continuar'''.
|}
|-
| style="border:1px solid #cccccc; vertical-align:center;" |
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:center; text-align: center;"
| [[Imagem:Ecom045.png|400px|Clique para ampliar]]
|}
| style="border:1px solid #cccccc; background:#f5f5f5; vertical-align:top;"|
{| cellpadding="2" cellspacing="2" style="width:408px; vertical-align:top; text-align: left;"
| 15. Você será direcionado para a página de inclusão de imagens do produto que acaba de cadastrar.

16. No campo '''Imagem''' clique no botão '''Escolher arquivo'''.

17. Selecione o arquivo da imagem em seu computador.

18. Clique no botão '''gravar imagem'''.

19. Aguarde a transferência do arquivo da imagem de seu computador para o servidor.

20. Após terminar a inclusão das imagens do produto clique no botão '''Finalizar''' localizado ao final da tela.
----
Após a inclusão, a imagem será exibida logo abaixo com as opções:
* '''Destaque''': Selecione essa opção se deseja que essa seja a imagem principal de visualização do produto.
* '''Remover''': clique nessa opção para excluir a imagem.
|}
|-
| colspan=2; style="border:0px solid; vertical-align:top;" |
{| cellpadding="0" cellspacing="2" style="width:822px; vertical-align:top; text-align: right;"
| [[Imagem:Volt.png|link=E-commerce]]
|}
|}