Я улучшил несколько виджетов изображений, напрямую расширив 'apostrophe-images-widgets'. Возможно, это не лучшая практика, но я использовал это с самого начала. Я начал кодировать с помощью apostrophe-cms, и он работал хорошо. Мой виджет слайдов, например, использует только эти строки в index.js:
module.exports = {
extend: 'apostrophe-images-widgets',
piecesModuleName: 'apostrophe-images',
label: 'Slider Widget'
};
Теперь мой 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?
Как я уже сказал выше, если это возможно, я не хочу добавлять дополнительные поля, как вы объяснили здесь:
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 ... -%}?
