Imagens e Vetores

Um dos principais usos da pasta /assets é o armazenamento de arquivos estáticos como imagens e vetores. Não só esses dois tipos de arquivos, claro. Se você precisar de outros tipos de arquivos como por exemplo, PDFs, vídeos, documentos de texto, a pasta /assets também estará para jogo. Mas esse não será o nosso foco nesse momento.

Imagens

A pasta /assets geralmente tem subpastas com o nome igual à extensão dos arquivos. Mas no caso das imagens, isso não será levado em consideração. Toda imagem, seja ela JPG, PNG, GIF, WEBP, ou qualquer seja o seu tipo, deverá ser armazenada dentro da pasta /assets/imgs do projeto.

Apenas devem estar nessa pasta arquivos que precisem ser servidos de forma estática. Arquivos que passem a ser servido de forma dinâmica pelo WordPress devem ser removidos da pasta.

Arquivos de exemplo ou de teste

Às vezes na criação da composição visual do tema usamos arquivos apenas para marcar o território, para um conteúdo em uma tag <img>, antes de aquele conteúdo ser substituido por uma URL dinâmica que virá do backend. A imagem pode até ser a mesma que estará na versão final, mas não está sendo puxada do destino correto.

Quando este é o caso, criamos uma pasta chamada /mockups dentro de /assets/img/ para armazenar este tipo de arquivo. No momento do projeto em que não são mais necessários estes mockups, a pasta é deletada.

Já outro caso, temos outras imagens também que são de exemplo, mas não por faltar uma implementação dinâmica, ou algo neste sentido, mas porque é feito para apresentação e venda do tema em si, sem ter foco em nenhum cliente em específico. Nesse caso, você joga essas imagens numa pasta /exemplos.

Na hora de iniciar o tema para algum cliente, a pasta /exemplos já pode ser cortada fora desde o início. A não ser que você queira, claro, usar os exemplos como mockup em um primeiro momento.

Então, resumindo: A pasta /mockup pode ser criada e alimentada à vontade durante o desenvolvimento, mas não deve subir para produção. E a pasta /exemplo só sobe para produção quando se trata da apresentação do tema para venda.

Placeholders

A imagem no site veio quebrada, está puxando um URL que não existe? É interessante manter uma pasta /placeholders na pasta de imagens para gerenciar esses casos. Nesta pasta você armazena as imagens que aparecem quando, bem... não existe uma imagem.

Outras pastas

Pastas internas podem ser criadas para classificar imagens de acordo com temas que você precisar. Se você tem fotos de parceiros, por exemplo, pode criar uma pasta chamada /parceiros para armazenar as imagens desses parceiros para serem exibidas no site.

Mas, claro, sempre recomendamos que imagens possam ser cadastradas em algum lugar. Então nem esse exemplo é um bom exemplo. Mantenha a pasta /assets/imgs/ o mais enxuta possível. Não é muito legal um tema que é pouco customizável.

Vetores

Semelhante às imagens, os vetores (SVG) terão uma pasta dedicada a eles, que é a pasta /assets/svg. Todos os vetores que serão necessários ao tema para exibição estática devem estar dentro desta pasta.

Uso de temáticas

Geralmente existem muitos ícones que são servidos no site de forma estática. E diferente de antigamente quando os ícones eram imagens PNG, ou até mesmo GIF, hoje sabemos que a melhor prática é ter tudo vetorizado.

Vetores a serem removidos

Como no caso das imagens, podemos ter ícones que são utilizados apenas como exemplo: Um logo fictício que é usado apenas para venda, algum ícone que está sendo usado que ainda não é a versão final. Então as pastas /mockups e /exemplos também podem ser utilizadas dentro de /assets/svg.

Conclusão

Bom, agora você já sabe quais as práticas para manter as pastas de imagens e vetores. Não tem realmente muito segredo.

No próximo capítulo falaremos de arquivos mais complexos, que são os arquivos .css e .js. Até lá!