Come fare riferimento a un'immagine per nome specificato nelle impostazioni?

Sviluppatore
1

in un componente tematico, che mostra un’immagine (cappello) sullo schermo
per utilizzare un’immagine in scss, funziona con il nome della sua risorsa direttamente in questo modo,
queste immagini sono definite in 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"
  }
}

per utilizzare queste immagini in scss, funziona bene se si utilizza direttamente il nome della risorsa come questo

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

Voglio aggiungere un’impostazione per scegliere un’immagine.
in settings.yml, ho questo, per selezionare un’immagine di cappello da mostrare sullo schermo

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

Potrei usare if else in scss per usare l’immagine, ma questo blocco if else potrebbe essere troppo lungo …

    @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;
    }

Ho provato a usare una funzione in scss

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

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

ma questo ottiene un url come
https://www.domain.com/stylesheets/assets/decorations/squirrel2.png
questo non funziona, dovrebbe essere risolto invece come questo…
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

Qualcuno potrebbe dare un suggerimento, grazie mille :slight_smile: …

2

Credo che tu possa usare l’impostazione direttamente usando l’interpolazione.

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

3

Grazie Arkshine.

con questa sintassi, ho scelto sequirrel2 per hat_type nelle impostazioni.

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

nella pagina web, ho controllato gli stili, è stato convertito in questo…

image
image624×214 22.3 KB

immagino
all’interno della funzione url(), deve essere una variabile squirrel2, mentre "#{$hat_type}", questo dà una stringa $squirrel2…?

e ho provato questo

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

è stato renderizzato come questo, ancora non va bene
image

4

Prova ad aggiungere un / all’inizio del percorso di quel file assets.

5

grazie @Firepup650
ho provato ad aggiungere uno slash prima di assets, non funziona neanche, aggiunge uno slash in mezzo,
ma non lo converte nell’url reale, dovrebbe essere qualcosa tipo
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

6

Hai ragione; pensavo funzionasse dalla mia parte, ma immagino di no. :thinking:

Ecco un’alternativa: impostare una proprietà CSS personalizzata tramite js.

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

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

settings.theme_uploads conterrà un elenco dei tuoi caricamenti.
Ad esempio:
image

Quindi, in base alla tua impostazione, imposti la proprietà personalizzata.

Nota che, dai miei test, non funziona fare url(var(--hat-url)), ecco perché ho passato url() direttamente nella proprietà personalizzata.

1 Mi Piace