Question

我正在尝试为我的网站创建自定义apostrophe-images-widgets布局。我目前在lib/modules/apostrophe-images-widgets/views/widget.html中为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.js或apostrophe-images-widgets

的apostrophe-images

我得到的确切错误很长，但这是stacktrace的开始

TypeError: Cannot read property '_id' of undefined

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

感谢阅读和给予的任何帮助！

Answer 1

我是P＆＃39; unk Avenue的Apostrophe的首席架构师。

如果您查看widgetBase.html模块中的apostrophe-images-widgets，您会发现image未直接传递给模板。相反，Apostrophe始终将数据作为data对象的属性传递给模板。对于窗口小部件，与窗口小部件关联的数据将作为data.widget传递。

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

最后一个皱纹：有时这些连接具有＆＃34;关系属性＆＃34;在这种情况下，裁剪坐标（如果有的话）与实际图像分开。因此，数组中的每个条目实际上都是具有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 -%}

希望这有用！

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

撇号 - 图像 - 小部件自定义小部件调用apos.attachments.url两次

1 个答案: