Apostrophe CMS 中的自定义图片库

Question

图片的所有可能尺寸是多少？

本质上，我如何获得已 "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。

Answer 1

我是 P'unk Avenue 的 Apostrophe 的首席开发人员。

我认为您的目标是改变 apostrophe-images-widgets 的呈现方式。

你可以通过在你自己的项目中创建lib/modules/apostrophe-images-widgets/views/widget.html来做到这一点（不要在node_modules中修改它，只需在你的项目中创建一个并行文件夹).

从 Apostrophe 的相应文件夹中复制 widget.html 文件。

然后你可以根据自己的喜好修改它。

此处记录了可用尺寸：

http://apostrophecms.org/docs/tutorials/getting-started/adding-editable-content-to-pages.html#code-size-code

一定要利用提供的实用程序来正确构建它们的 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

有关创建完全自定义小部件的非常好的介绍。

Apostrophe CMS 中的自定义图片库

Custom Image Gallery in Apostrophe CMS

apostrophe-cms