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á!