apostrophe-images-widgetsカスタムウィジェットは、apos.attachments.urlを2回呼び出します。

Question

自分のサイトにカスタムapostrophe-images-widgetsレイアウトを作成しようとしています。私は現在、lib/modules/apostrophe-images-widgets/views/widget.htmlのhtmlテンプレートのプロジェクトレベルの上書きを作成しました。私が持っている問題は、自分のカスタムエリアに配置する画像を選択するたびにapos.attachments.urlが2回呼び出されます。選択した画像で1回、添付ファイル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にここにスローされる例外以外の何inforamtion私はあなたを与えることができ、わからない：

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 
} 

私は解決策を見つけるためにどこに見えるかについてあまりにも確信していません...私が提供できる他の何か、私に知らせてください。

私は私が得る正確なエラーが長いですが、ここではスタックトレース

TypeError: Cannot read property '_id' of undefined

ない非常に役立つのスタートですが、それはそれだapostrophe-images-widgetsのindex.jsまたはapostrophe-images

をオーバーライドしていません。

読んでいただきありがとうございました！

Answer 1

私はP'unk AvenueのApostropheの主任建築家です。

モジュールのwidgetBase.htmlを見ると、imageがテンプレートに直接渡されないことがわかります。代わりに、アポストロフィは常にdataオブジェクトのプロパティとしてテンプレートにデータを渡します。また、ウィジェットの場合、ウィジェットに関連付けられたデータはdata.widgetとして渡されます。

特にイメージウィジェットは、複数のアイテムを表示する可能性があるピースウィジェットを拡張します。したがって、そのスキーマに結合があり、配列プロパティdata.widget._piecesの実際の部分（イメージ）を見つけることができます。

1つの最後のしわ：時には、これらの結合には、実際の画像とは別のクロッピング座標（存在する場合）の独自の「関係プロパティ」があります。したがって、配列の各エントリは、実際にはitemプロパティ（イメージ）とクロップに関する他のプロパティを持つオブジェクトです。したがって、配列の各エントリから実際の項目をフェッチするために、1行のコードが必要になります。これは便利です

{%- 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.あなたの地域名にハイフンを使用しないでください。アポストロフィに警告が表示されています。あなたが望むなら、あなたはCamelCaseを使うかもしれません。