Добавление параметров в виджеты-изображения-апострофы напрямую - PullRequest
Новая
       15

Добавление параметров в виджеты-изображения-апострофы напрямую

1 голос
/ 28 мая 2020

Я улучшил несколько виджетов изображений, напрямую расширив 'apostrophe-images-widgets'. Возможно, это не лучшая практика, но я использовал это с самого начала. Я начал кодировать с помощью apostrophe-cms, и он работал хорошо. Мой виджет слайдов, например, использует эти строки только в индексе. js: 

module.exports = {
  extend: 'apostrophe-images-widgets',
  piecesModuleName: 'apostrophe-images',
  label: 'Slider Widget'
};

Теперь мой виджет. html выглядит следующим образом: 

<div class="slider fullscreen">
  <ul class="slides">

    {% block items %}

      {% for entry in data.widget._pieces %}
        {% set image = entry.item or entry %}
        {% set relationship = entry.relationship %}

        <li>
          <img
            data-image src="{{ apos.attachments.url(image.attachment, { size: data.options.size or 'full', crop: relationship }) }}"
            srcset="{{ apos.images.srcset(image.attachment) }}"
            sizes="{{ data.options.sizesAttr or '100vw' }}"
            alt="{{ image.title }}"
          >

          <div class="caption {{ image.align }}">

            {% block title %}
              <h3 class="accent-color truncate hide-on-small-only"
                {% if image.titleColor %}
                  style="color:{{ image.titleColor }}"
                {% endif %}
              >
                {{ image.title }}
              </h3>
            {% endblock %}

            {% block description %}
              {% if image.description %}
                <p class="flow-text"
                  {% if image.descriptionColor %}
                    style="color:{{ image.descriptionColor }}"
                  {% endif %}
                >
                  {{ image.description | nlbr }}
                </p>
              {% endif %}
            {% endblock %}

          </div>

          {% block credit %}
            {% if image.credit %}
              <div class="credit">
                {% if image.creditUrl %}
                    <a href="{{ image.creditUrl }}" target="_blank">
                {% endif %}
                      <span>{{ image.credit }}</span>
                {% if image.creditUrl %}
                    </a>
                {% endif %}
            </div>
            {% endif %}
          {% endblock %}

        </li>

      {% endfor %}
    {% endblock %}

  </ul>
</div>

Теперь мой вопрос в том, как я могу добавить параметры, такие как sizesAttr и focalPoint: true et c, в мой виджет Slider?

Как я уже сказал выше, если это возможно, я не хочу добавлять дополнительные поля, например вы объяснили здесь : 

  addFields: [
    {
      name: '_image',
      type: 'joinByOne',
      withType: 'apostrophe-image',
      label: 'Image',
      required: true,
      idField: 'imageId',
      filters: {
        projection: {
          attachment: true,
          description: true,
          title: true
        }
      }
    }
  ]

Необходимо было бы переписать виджет для расширения: apostrope-pieces-widgets вместо apostrope-images-widgets и так далее. Итак, моя идея состоит в том, чтобы добавить желаемые параметры напрямую с помощью beforeConstruct, к сожалению, это не сработало, поэтому я застрял там: 

module.exports = {
  extend: 'apostrophe-images-widgets',
  piecesModuleName: 'apostrophe-images',
  label: 'Slider Widget',
  beforeConstruct: function(self, options) {
    if (options.focalPoint === undefined) {
      options.focalPoint = true;
    }
  }
};

У вас есть подсказка, как я могу это сделать? Возможно, в вашем коде есть пример того, как вы добавляли параметры с beforeConstruct или даже с html с помощью nujucks с такими переменными, как эта {%- set data.widget.options ... -%}?

1 Ответ

1 голос
/ 28 мая 2020

Вы имеете дело с двумя разными типами опций, но оба они объявлены в одном месте. focalPoint - это встроенная опция, включающая пользовательский интерфейс фокусной точки (который затем позволяет вам получить информацию о фокусной точке позже), а sizesAttr - это пример из документации настраиваемой опции, которую вы можете создать для ваших конкретных c потребности.

В обоих случаях они передаются в параметры виджета области в шаблоне страницы или фрагмента страницы . Таким образом, это может быть default.html для страницы "по умолчанию" или show.html для страницы показа типа части, например: 

{{ apos.area(data.page, 'content', {
  widgets: {
    'image': {
      sizesAttr: '(min-width: 1024px) 50vw, 100vw',
      focalPoint: true
    }
  }
}) }}

(data.page будет указано c для страницы, но будет data.piece для страницы show части)

Затем в шаблонах виджетов (ваш widget.html) они упоминаются как свойства на data.options, как вы можете видеть с sizesAttr в вашем примере. Точно так же вы можете добавить любую случайную опцию, например foo: 'bar', в конфигурацию виджета области, а затем указать его как data.options.foo в шаблоне виджета.

focalPoint не так полезно ссылаться напрямую. В качестве встроенной опции он включает специальные функции для точки фокусировки, на которую затем ссылаются в шаблонах с помощью таких методов, как apos.attachments.hasFocalPoint(). В документации есть больше об этом .

...