¿Cómo referirse a una imagen por nombre especificado en la configuración?

Desarrollador
1

en un componente de tema, que muestra una imagen (sombrero) en pantalla
para usar una imagen en scss, funciona con su nombre de activo directamente así,
estas imágenes se definen en 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 estas imágenes en scss, funciona bien si se usa el nombre del activo directamente así

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

Quiero agregar una configuración para elegir una imagen.
en settings.yml, tengo esto, para seleccionar una imagen de sombrero para mostrar en pantalla

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

Podría usar un if else en scss para usar la imagen, pero este bloque if else podría ser demasiado largo …

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

Intenté usar una función en scss

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

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

pero esto obtiene una url como
https://www.domain.com/stylesheets/assets/decorations/squirrel2.png
esto no funciona, debería resolverse así en su lugar…
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

¿Alguien podría dar una pista, muchas gracias :slight_smile: …

2

Creo que puedes usar la configuración directamente usando interpolación.

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

3

Gracias Arkshine.

con esta sintaxis, elegí sequirrel2 para el hat_type en la configuración.

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

en la página web, revisé los estilos, se convirtió en esto…

image
image624×214 22.3 KB

supongo
dentro de la función url(), necesita ser una variable squirrel2, mientras que "#{$hat_type}", esto da una cadena $squirrel2… ?

y lo intenté

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

se renderizó como esto, todavía no está bien
image

4

Intenta agregar un / al principio de esa ruta de assets.

5

gracias @Firepup650
intenté añadir una / antes de assets, tampoco funciona, añade una / en el medio,
pero no la convierte en la url real, debería ser algo como
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

6

Tienes razón; pensé que funcionaba de mi lado, pero supongo que no. :thinking:

Aquí tienes una alternativa: establecer una propiedad CSS personalizada a través de js.

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

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

settings.theme_uploads contendrá una lista de tus subidas.
Por ejemplo:
image

Luego, según tu configuración, estableces la propiedad personalizada.

Ten en cuenta que, según mis pruebas, no funciona hacer url(var(--hat-url)), por eso pasé url() directamente en la propiedad personalizada.

1 me gusta