2

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

本质上，我如何获得已“附加”到页面的图像列表？我正在尝试创建自己的图片库，因为默认图库是有限的。这是否意味着我应该创建自己的小部件来扩展“撇号图像小部件”？

因此，一旦我这样做，并将小部件添加到页面并添加图像，我如何获取图像列表？我想获得缩略图大小，以及要放置在模态中的更大尺寸的图像？所有可能的尺寸有哪些？

下面是显示 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。

4

1 回答 1

2

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

我认为你的目标是改变apostrophe-images-widgets渲染方式。

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

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

然后，您可以根据需要对其进行修改。

此处记录了可用的尺寸：

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 投影仪”插件来动画幻灯片。您可以在副本中删除该行（但至少保留一个空self.play方法，以便覆盖我们的默认实现）。然后根本就没有动画。或者您可以编写自己的逻辑。

to的$el参数play是一个引用相关小部件的 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

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

于 2017-01-13T15:48:32.483 回答