Como referenciar uma imagem pelo nome especificado na configuração?

Dev
1

em um componente de tema, que exibe uma imagem (chapéu) na tela
para usar uma imagem em scss, funciona com o nome do seu recurso diretamente assim,
essas imagens são definidas em about.json

{
  "name": "christmas-decorations",
  "about_url": "",
  "license_url": "",
  "author": "",
  "assets": {
    "red-hat1": "assets/decorations/red-hat1.png",
    "red-hat2": "assets/decorations/red-hat2.png",
    "squirrel2": "assets/decorations/squirrel2.png"
  }
}

para usar essas imagens em scss, funciona bem se usar o nome do recurso diretamente como este

background: transparent url($red-hat1) top left no-repeat;

quero adicionar uma configuração para escolher uma imagem.
em settings.yml, tenho isto, para selecionar uma imagem de chapéu para exibir na tela

hat_type:
  default: red-hat1
  type: enum
  choices:
    - red-hat1
    - red-hat2
    - squirrel2

eu poderia usar if else em scss para usar a imagem, mas este bloco if else poderia ser muito longo …

    @if $hat_type == "red-hat1" {
      background: url($red-hat1) no-repeat center;
    } @else if $hat_type == "red-hat2" {
      background: url($red-hat2) no-repeat center;
    } @else if $hat_type == "squirrel2" {
      background: url($squirrel2) no-repeat center;
    }

Tentei usar uma função em scss

 background: url(get_image($hat_type)) no-repeat center;

@function get_image($name){
  @return "assets/decorations/" + $name + ".png"
}

mas isso retorna uma url como
https://www.domain.com/stylesheets/assets/decorations/squirrel2.png
isso não funciona, deveria ser resolvido assim em vez disso…
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

alguém poderia dar uma dica, muito obrigado :slight_smile: …

2

Acredito que você possa usar a configuração diretamente usando interpolação.

background: transparent URL(\"$#{$hat_type}\") top left no-repeat;

3

obrigado Arkshine.

com esta sintaxe, escolhi sequirrel2 para o hat_type nas configurações.

background: transparent url("$#{$hat_type}") top left no-repeat;

na página web, verifiquei os estilos, ele é convertido nisto…

image
image624×214 22.3 KB

acho que
dentro da função url(), precisa ser uma variável squirrel2, enquanto "#{$hat_type}", isso dá uma string $squirrel2…?

e eu tentei isto

background: transparent url("assets/decorations/#{$decoration_image}.png") top left no-repeat;

ele é renderizado como isto, ainda não está certo
image

4

Tente adicionar uma / no início desse caminho de assets.

5

obrigado @Firepup650
tentei adicionar uma / antes de assets, também não funcionou, adiciona uma / no meio,
mas não a converte na url real, deveria ser algo como
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

6

Você está certo; pensei que funcionava do meu lado, mas acho que não. :thinking:

Aqui uma alternativa: definir uma propriedade CSS personalizada via js.

document.documentElement.style.setProperty(
  "--hat-url",
  `url(${settings.theme_uploads[settings.hat_type]}`
);

body {
  background: var(--hat-url);
}

settings.theme_uploads conterá uma lista de seus uploads.
Por exemplo:
image

Em seguida, com base na sua configuração, você define a propriedade personalizada.

Note que, pelos meus testes, não funciona fazer url(var(--hat-url)), é por isso que passei o url() diretamente na propriedade personalizada.

1 curtida