Как сослаться на изображение по имени, указанному в настройках?

Разработка
1

В компоненте темы, который отображает изображение (шляпа) на экране,

Чтобы использовать изображение в SCSS, достаточно указать его имя ассета напрямую, например:
Эти изображения определены в 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",
  }
}

Использование этих изображений в SCSS работает корректно, если указывать имя ассета напрямую, как здесь:

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

Я хочу добавить настройку для выбора изображения. В settings.yml у меня есть следующее, чтобы выбрать изображение шляпы для отображения на экране:

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

Я мог бы использовать конструкцию if-else в SCSS для выбора изображения, но этот блок if-else может оказаться слишком длинным…

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

Я попробовал использовать функцию в SCSS:

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

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

Однако это возвращает URL вида:
https://www.domain.com/stylesheets/assets/decorations/squirrel2.png
Это не работает. Вместо этого URL должен быть разрешён следующим образом…
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

Не могли бы вы дать подсказку? Большое спасибо :-)…

2

Я считаю, что вы можете использовать настройку напрямую с помощью интерполяции.

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

3

Спасибо, Arkshine.

С этим синтаксисом я выбрал sequirrel2 для hat_type в настройках.

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

На веб-странице, проверив стили, я увидел, что это преобразовалось в следующее…

image
image624×214 22.3 KB

Полагаю,
внутри функции url() должна быть переменная $squirrel2,
а "$#{$hat_type}" возвращает строку $squirrel2… ?

А я попробовал так:

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

Это отобразилось так, всё ещё неправильно:
image

4

Попробуйте добавить / в начало этого пути к ресурсам.

5

Спасибо, @Firepup650!
Пытался добавить / перед assets, но это тоже не сработало — слэш появляется посередине.
Однако это не преобразует путь в настоящий URL. Должно получиться что-то вроде:
https://www.domain.com/uploads/db9860/original/3X/9/1/91d36fdb030047c6390f9ca85604fdbfd2e3fc12.png

6

Вы правы; я думал, что у меня это работало, но,看来, нет. :thinking:

Вот альтернатива: установка пользовательского CSS-свойства через JS.

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

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

settings.theme_uploads будет содержать список ваших загрузок.
Например:
image

Затем, в зависимости от вашего настройки, вы устанавливаете пользовательское свойство.

Обратите внимание, что по моим тестам, конструкция url(var(--hat-url)) не работает, поэтому я передаю url() напрямую в пользовательское свойство.