Wie kann man mit einem Namen auf ein Bild verweisen, der in den Einstellungen angegeben ist?

Entwickler
1

in einer Themenkomponente, die ein Bild (Hut) auf dem Bildschirm anzeigt

Um ein Bild in SCSS zu verwenden, funktioniert es direkt mit seinem Asset-Namen wie folgt:
Diese Bilder sind in about.json definiert

{
  "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"
  }
}

Um diese Bilder in SCSS zu verwenden, funktioniert es gut, wenn der Asset-Name direkt wie folgt verwendet wird:

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

Ich möchte eine Einstellung hinzufügen, um ein Bild auszuwählen.
In settings.yml habe ich dies, um einen Hutbild auszuwählen, der auf dem Bildschirm angezeigt werden soll:

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

Ich könnte if-else in SCSS verwenden, um das Bild zu verwenden, aber dieser if-else-Block könnte zu lang sein …

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

Ich habe versucht, eine Funktion in SCSS zu verwenden

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

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

aber dies gibt eine URL wie
https://www.domain.com/stylesheets/assets/decorations/squirrel2.png
dies funktioniert nicht, es sollte stattdessen so aufgelöst werden…
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

Könnte mir jemand einen Hinweis geben, vielen Dank :slight_smile: …

2

Ich glaube, Sie können die Einstellung direkt mit Interpolation verwenden.

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

3

Danke Arkshine.

Mit dieser Syntax habe ich squirrel2 für den hat_type in den Einstellungen ausgewählt.

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

Auf der Webseite habe ich die Stile überprüft, und es wurde in Folgendes umgewandelt…

image
image624×214 22.3 KB

Ich vermute, dass innerhalb der Funktion url() eine Variable squirrel2 benötigt wird, während "#{$hat_type}" einen String $squirrel2 ergibt…?

Und ich habe Folgendes versucht:

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

Es wurde wie folgt gerendert, immer noch nicht richtig:
image

4

Versuchen Sie, ein / am Anfang des Pfads zu den Assets hinzuzufügen.

5

Danke @Firepup650
Ich habe versucht, ein / vor assets einzufügen, es funktioniert auch nicht, es fügt ein / in der Mitte ein,
aber es konvertiert es nicht in die echte URL, es sollte so etwas sein wie
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

6

Du hast recht; ich dachte, es würde auf meiner Seite funktionieren, aber ich schätze nicht. :thinking:

Hier eine Alternative: eine benutzerdefinierte CSS-Eigenschaft über JS setzen.

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

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

settings.theme_uploads enthält eine Liste deiner Uploads.
Zum Beispiel:
image

Dann, basierend auf deiner Einstellung, setzt du die benutzerdefinierte Eigenschaft.

Beachte, dass es nach meinen Tests nicht funktioniert, url(var(--hat-url)) zu verwenden. Deshalb habe ich url() direkt in die benutzerdefinierte Eigenschaft übergeben.

1 „Gefällt mir“