> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dkscripts.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Fotos das Roupas

> Como servir as fotos reais das peças exibidas na loja e no guarda-roupa

# 📸 Fotos das Roupas

As fotos reais são o que transforma o guarda-roupa em uma coleção visual, em vez de uma lista de números. Esta página explica como ativá-las.

<Info>
  As fotos **não vêm dentro do recurso**. Elas precisam ser servidas por **HTTP** — um Apache, um nginx ou um CDN apontando para a pasta das imagens. O protocolo `nui://` não funciona aqui.
</Info>

<Note>
  Sem fotos configuradas, a interface continua funcionando normalmente e usa o **ícone da categoria** no lugar da imagem. Nada quebra.
</Note>

***

## Gerando as fotos

A DK publica gratuitamente o **dk\_autophoto**, que fotografa cada peça de cada categoria e já salva os arquivos no formato esperado pelo skinshop.

<Steps>
  <Step title="Rode o dk_autophoto" icon="camera">
    Ele percorre as variações e gera as imagens.
  </Step>

  <Step title="Hospede a pasta gerada" icon="server">
    Aponte um servidor HTTP (Apache, nginx, CDN) para ela.
  </Step>

  <Step title="Ajuste o baseUrl" icon="link">
    Coloque o endereço público em `itemImages.baseUrl`.
  </Step>
</Steps>

***

## Configuração

Arquivo: `config/shared/config.lua`

```lua theme={null}
itemImages = {
    enabled = true,
    baseUrl = "http://localhost/clothes",
    pathTemplate = "{model}/{category}/{drawable}_{texture}.{ext}",
    ext = "webp",
    categoryMap = {},
    knownModels = {
        [GetHashKey("mp_m_freemode_01")] = "mp_m_freemode_01",
        [GetHashKey("mp_f_freemode_01")] = "mp_f_freemode_01",
    },
},
```

| Opção          | Padrão                       | Função                                            |
| -------------- | ---------------------------- | ------------------------------------------------- |
| `enabled`      | `true`                       | Liga o uso de fotos reais                         |
| `baseUrl`      | `"http://localhost/clothes"` | Endereço HTTP base, **sem barra no final**        |
| `pathTemplate` | veja abaixo                  | Monta o caminho de cada imagem                    |
| `ext`          | `"webp"`                     | Extensão dos arquivos                             |
| `categoryMap`  | `{}`                         | Traduz o id da categoria para outro nome de pasta |
| `knownModels`  | 2 modelos freemode           | Liga o hash do ped ao nome usado no caminho       |

<Warning>
  O padrão `http://localhost/clothes` só funciona se esse endereço **realmente servir** as imagens. Na maioria dos servidores ele precisa ser trocado.
</Warning>

***

## O template de caminho

```lua theme={null}
pathTemplate = "{model}/{category}/{drawable}_{texture}.{ext}"
```

As substituições disponíveis:

| Marcador     | Vira                                            |
| ------------ | ----------------------------------------------- |
| `{model}`    | Nome do modelo de ped (ex.: `mp_m_freemode_01`) |
| `{category}` | Id da categoria (ex.: `torso`)                  |
| `{drawable}` | Número da variação                              |
| `{texture}`  | Número da textura                               |
| `{ext}`      | A extensão definida em `ext`                    |

Com o template padrão, a jaqueta 4 na textura 0 de um personagem masculino é buscada em:

```
http://localhost/clothes/mp_m_freemode_01/torso/4_0.webp
```

<Tip>
  Se as suas fotos já estão organizadas de outro jeito, ajuste o template em vez de renomear os arquivos. Ele aceita qualquer combinação dos marcadores acima.
</Tip>

***

## Nomes de pasta diferentes

Quando o id da categoria e o nome da pasta não batem, use o `categoryMap`:

```lua theme={null}
categoryMap = {
    tshirt = "shirt",
    torso = "jacket",
},
```

Categoria fora dessa lista usa o mesmo id nos dois lados.

***

## Peds addon

O `{model}` do caminho sai do `knownModels`:

```lua theme={null}
knownModels = {
    [GetHashKey("mp_m_freemode_01")] = "mp_m_freemode_01",
    [GetHashKey("mp_f_freemode_01")] = "mp_f_freemode_01",
    [GetHashKey("meu_ped_addon")] = "meu_ped_addon",
},
```

<Warning>
  Ped que **não estiver na lista** cai no `mp_m_freemode_01`. Se o servidor usa peds addon com roupas próprias, cadastre-os aqui — senão as fotos exibidas serão as do modelo padrão.
</Warning>

***

## Desligando

```lua theme={null}
itemImages = {
    enabled = false,
},
```

A interface passa a usar o **ícone da categoria** em todos os cards. Tudo continua funcionando: só o visual muda.

***

## ❓ As fotos não aparecem

<AccordionGroup>
  <Accordion title="Confira o endereço" icon="link" defaultOpen>
    Abra no navegador a URL completa de uma peça, montada pelo template:

    ```
    http://SEU-ENDERECO/clothes/mp_m_freemode_01/torso/4_0.webp
    ```

    Se ela não abre no navegador, também não vai abrir na interface.
  </Accordion>

  <Accordion title="Confira a barra final do baseUrl" icon="slash">
    O `baseUrl` **não deve terminar com barra** — o template já começa com o nome do modelo.
  </Accordion>

  <Accordion title="Confira a extensão" icon="file-image">
    O `ext` precisa bater com os arquivos gerados. O `dk_autophoto` salva em `webp` por padrão.
  </Accordion>

  <Accordion title="Confira o modelo do ped" icon="user">
    Se o servidor usa peds addon, eles precisam estar no `knownModels`. Caso contrário, o script busca as fotos do `mp_m_freemode_01`.
  </Accordion>

  <Accordion title="Confira o nome das pastas" icon="folder">
    Categorias com nome de pasta diferente do id precisam estar no `categoryMap`.
  </Accordion>
</AccordionGroup>

<Card title="Configurações Compartilhadas" icon="sliders" href="/scripts/skinshop/configs/sh-config" horizontal>
  O restante do `config/shared/config.lua`.
</Card>