0

我正在尝试apostrophe-images-widgets为我的网站创建自定义布局。我目前已经在lib/modules/apostrophe-images-widgets/views/widget.html. 我遇到的问题是，每当我选择要放入自定义区域的图像时，apos.attachments.url都会调用两次：一次是我选择的图像，一次是undefined附件。

我的自定义widget.html看起来像这样：

<a href="/"><img class="logo" src="{{ apos.attachments.url(image.attachment, { size: 'full'}) }}" /></a>

我的整个lib目录如下所示：

自定义库

我app.js的设置是默认配置。

我的习惯layout.html是像这样引用图像：

{{
    apos.area(data.page, 'web-logo', {
        widgets: {
            'apostrophe-images': {
                size: 'full'
            }
        }
    })
}}

我不确定我可以给你什么其他信息，除了这里抛出的异常apostrophe-attachments/lib/api.js：

self.url = function(attachment, options) {
  options = options || {};

  // THROWS ERROR AT `attachment._id`
  var path = '/attachments/' + attachment._id + '-' + attachment.name;
  if (!options.uploadfsPath) {
    path = self.uploadfs.getUrl() + path;
  }
// other code
}

我不太确定在哪里可以找到解决方案......我还能提供什么，请告诉我。

我没有覆盖index.jsofapostrophe-images-widgets或apostrophe-images

我得到的确切错误很长，但这是堆栈跟踪的开始

TypeError: Cannot read property '_id' of undefined

不是很有帮助，但就是这样。

感谢您的阅读和任何帮助！

4

1 回答 1

1

我是 P'unk Avenue 的 Apostrophe 的首席建筑师。

如果您查看模块widgetBase.html中的apostrophe-images-widgets内容，您会发现它image并没有直接传递给模板。相反，撇号总是将数据作为data对象的属性传递给模板。在小部件的情况下，与小部件关联的数据以data.widget.

images 小部件特别扩展了pieces 小部件，它可能显示多个项目。所以它的模式中有一个连接，你可以在数组属性中找到实际的片段（图像）data.widget._pieces。

最后一个问题：有时这些连接有它们自己的“关系属性”，在这种情况下是裁剪坐标（如果有的话），它与实际图像是分开的。所以数组中的每个条目实际上是一个具有item属性（图像）和其他与裁剪相关的属性的对象。因此，需要一行额外的代码来从数组中的每个条目中获取实际项目。

这是您的代码的工作版本：

{%- for entry in data.widget._pieces -%}
  {# Works whether there's a relationship in the join or not. Normally there always #}
  {# is for slideshows, but just in case someone really hates cropping... -Tom #}
  {%- set image = entry.item or entry -%}
  <a href="/"><img class="logo" src="{{ apos.attachments.url(image.attachment, { size: 'full'}) }}" /></a>
{%- endfor -%}

希望这有帮助！

PS 还有一件事：不要在您的地区名称中使用连字符。您会注意到 Apostrophe 正在显示有关它的警告。如果您愿意，可以使用 CamelCase。

于 2017-03-01T13:23:37.533 回答