Apostrophe CMS 中的自定义图片库
Custom Image Gallery in Apostrophe CMS
图片的所有可能尺寸是多少?
本质上,我如何获得已 "attached" 到页面的图像列表?由于默认图库有限,我正在尝试创建自己的图片库。这是否意味着我应该创建自己的扩展 'apostrophe-images-widgets' 的小部件?
所以一旦我这样做,将小部件添加到页面,并添加图像,我如何获得图像列表?我想获得缩略图大小,以及要放置在模式中的更大尺寸的图像?有哪些可用的尺寸?
这是显示 Apostrophe 附带的默认图片库的代码:
{%- for entry in data.widget._pieces -%}
{%- set image = entry.item or entry -%}
{%- set relationship = entry.relationship -%}
<div data-slideshow-item class="apos-slideshow-item{% if loop.first %} apos-current{% endif %}{% block itemClass %}{% endblock %}" style="background-image: url({{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }})">
{%- block title -%}
<h4>{{ image.title }}</h4>
{%- endblock -%}
<img data-image src="{% block imgSrc %}{{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }}{% endblock %}"/>
{%- endfor -%}
这是撇号资产的文档:http://apostrophecms.org/docs/modules/apostrophe-assets/index.html
文档记录了一些可能的大小,但感觉不完整。我没有遵循如何为单个资产的多种尺寸请求多个 URL。
我是 P'unk Avenue 的 Apostrophe 的首席开发人员。
我认为您的目标是改变 apostrophe-images-widgets
的呈现方式。
你可以通过在你自己的项目中创建lib/modules/apostrophe-images-widgets/views/widget.html
来做到这一点(不要在node_modules中修改它,只需在你的项目中创建一个并行文件夹).
从 Apostrophe 的相应文件夹中复制 widget.html
文件。
然后你可以根据自己的喜好修改它。
此处记录了可用尺寸:
一定要利用提供的实用程序来正确构建它们的 URL,就像股票 widget.html
所做的一样。
当然,我相信你也想换播放器JavaScript。为此,您将创建:
lib/modules/apostrophe-images-widgets/public/js/always.js
在你的项目中。复制并粘贴原件作为起点。它很短,所以我会在这里引用它:
// example of a widget manager with a play method.
// You don't need this file at all if you
// don't need a player.
apos.define('apostrophe-images-widgets', {
extend: 'apostrophe-pieces-widgets',
construct: function(self, options) {
self.play = function($widget, data, options) {
$widget.projector(options);
};
}
});
(顺便说一句,你需要缩进四个空格来引用 Stack Overflow 上的代码。我建议在文本编辑器中这样做,然后复制和粘贴。对我来说工作可靠。)
此默认版本调用我们的 "jquery projector" plug-in 来制作幻灯片动画。您可以在副本中删除该行(但至少保留一个空的 self.play
方法,以便覆盖我们的默认实现)。那么根本就没有动画。或者您可以编写自己的逻辑。
play
的 $el
参数是引用相关小部件的 jQuery 对象。始终使用它来确定 find()
的范围,抵制在页面级别使用 $(...)
做所有事情的诱惑。
如果您确实喜欢我们的小部件,但希望在某些情况下有不同的行为,您可以使用新名称对其进行扩展(在 app.js 中):
modules: {
'my-slideshow-widgets': {
extend: 'apostrophe-images-widgets'
}
}
然后您将创建 lib/modules/my-slideshow-widgets
,并将 my-slideshow
包含在某些区域允许的小部件和站点周围的单例中,但其他方面遵循与上述相同的模式。
另请参阅:
http://apostrophecms.org/docs/tutorials/getting-started/custom-widgets.html
有关创建完全自定义小部件的非常好的介绍。
图片的所有可能尺寸是多少?
本质上,我如何获得已 "attached" 到页面的图像列表?由于默认图库有限,我正在尝试创建自己的图片库。这是否意味着我应该创建自己的扩展 'apostrophe-images-widgets' 的小部件?
所以一旦我这样做,将小部件添加到页面,并添加图像,我如何获得图像列表?我想获得缩略图大小,以及要放置在模式中的更大尺寸的图像?有哪些可用的尺寸?
这是显示 Apostrophe 附带的默认图片库的代码:
{%- for entry in data.widget._pieces -%}
{%- set image = entry.item or entry -%}
{%- set relationship = entry.relationship -%}
<div data-slideshow-item class="apos-slideshow-item{% if loop.first %} apos-current{% endif %}{% block itemClass %}{% endblock %}" style="background-image: url({{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }})">
{%- block title -%}
<h4>{{ image.title }}</h4>
{%- endblock -%}
<img data-image src="{% block imgSrc %}{{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }}{% endblock %}"/>
{%- endfor -%}
这是撇号资产的文档:http://apostrophecms.org/docs/modules/apostrophe-assets/index.html
文档记录了一些可能的大小,但感觉不完整。我没有遵循如何为单个资产的多种尺寸请求多个 URL。
我是 P'unk Avenue 的 Apostrophe 的首席开发人员。
我认为您的目标是改变 apostrophe-images-widgets
的呈现方式。
你可以通过在你自己的项目中创建lib/modules/apostrophe-images-widgets/views/widget.html
来做到这一点(不要在node_modules中修改它,只需在你的项目中创建一个并行文件夹).
从 Apostrophe 的相应文件夹中复制 widget.html
文件。
然后你可以根据自己的喜好修改它。
此处记录了可用尺寸:
一定要利用提供的实用程序来正确构建它们的 URL,就像股票 widget.html
所做的一样。
当然,我相信你也想换播放器JavaScript。为此,您将创建:
lib/modules/apostrophe-images-widgets/public/js/always.js
在你的项目中。复制并粘贴原件作为起点。它很短,所以我会在这里引用它:
// example of a widget manager with a play method.
// You don't need this file at all if you
// don't need a player.
apos.define('apostrophe-images-widgets', {
extend: 'apostrophe-pieces-widgets',
construct: function(self, options) {
self.play = function($widget, data, options) {
$widget.projector(options);
};
}
});
(顺便说一句,你需要缩进四个空格来引用 Stack Overflow 上的代码。我建议在文本编辑器中这样做,然后复制和粘贴。对我来说工作可靠。)
此默认版本调用我们的 "jquery projector" plug-in 来制作幻灯片动画。您可以在副本中删除该行(但至少保留一个空的 self.play
方法,以便覆盖我们的默认实现)。那么根本就没有动画。或者您可以编写自己的逻辑。
play
的 $el
参数是引用相关小部件的 jQuery 对象。始终使用它来确定 find()
的范围,抵制在页面级别使用 $(...)
做所有事情的诱惑。
如果您确实喜欢我们的小部件,但希望在某些情况下有不同的行为,您可以使用新名称对其进行扩展(在 app.js 中):
modules: {
'my-slideshow-widgets': {
extend: 'apostrophe-images-widgets'
}
}
然后您将创建 lib/modules/my-slideshow-widgets
,并将 my-slideshow
包含在某些区域允许的小部件和站点周围的单例中,但其他方面遵循与上述相同的模式。
另请参阅:
http://apostrophecms.org/docs/tutorials/getting-started/custom-widgets.html
有关创建完全自定义小部件的非常好的介绍。