Comment référencer une image par son nom spécifié dans les paramètres ?

Dev
1

dans un composant de thème, qui affiche une image (chapeau) à l’écran
pour utiliser une image en scss, cela fonctionne directement avec son nom d’actif comme ceci,
ces images sont définies dans 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"
  }
}

pour utiliser ces images en scss, cela fonctionne bien si vous utilisez directement le nom de l’actif comme ceci

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

Je veux ajouter un paramètre pour choisir une image.
dans settings.yml, j’ai ceci, pour sélectionner une image de chapeau à afficher à l’écran

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

Je pourrais faire un if else dans le scss pour utiliser l’image, mais ce bloc if else pourrait être trop long …

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

J’ai essayé d’utiliser une fonction en scss

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

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

mais cela donne une url comme
https://www.domain.com/stylesheets/assets/decorations/squirrel2.png
cela ne fonctionne pas, cela devrait plutôt être résolu comme ceci…
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

quelqu’un pourrait donner une piste, merci beaucoup :slight_smile: …

2

Je pense que vous pouvez utiliser le paramètre directement en utilisant l’interpolation.

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

3

Merci Arkshine.

Avec cette syntaxe, j’ai choisi squirrel2 pour le hat_type dans les paramètres.

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

Sur la page web, j’ai vérifié les styles, il est converti en ceci…

image
image624×214 22.3 KB

Je suppose
qu’à l’intérieur de la fonction url(), il doit s’agir d’une variable squirrel2, tandis que "#{$hat_type}" donne une chaîne $squirrel2… ?

Et j’ai essayé ceci

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

il est rendu comme ceci, toujours pas correct
image

4

Essayez d’ajouter un / au début de ce chemin d’accès aux ressources.

5

merci @Firepup650
j’ai essayé d’ajouter un / avant assets, ça ne marche pas non plus, ça ajoute un / au milieu,
mais ça ne le convertit pas en l’URL réelle, ça devrait être quelque chose comme
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

6

Vous avez raison ; je pensais que cela fonctionnait de mon côté, mais je suppose que non. :thinking:

Voici une alternative : définir une propriété CSS personnalisée via js.

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

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

settings.theme_uploads contiendra une liste de vos téléchargements.
Par exemple :
image

Ensuite, en fonction de votre réglage, vous définissez la propriété personnalisée.

Notez que, d’après mes tests, cela ne fonctionne pas en faisant url(var(--hat-url)), c’est pourquoi j’ai passé url() directement dans la propriété personnalisée.

1 « J'aime »