Localize download URL in image fragment in 7.2.x writing a custom fragment

問題

ドキュメントライブラリでホストされている各言語の異なるドキュメントをダウンロードするために、フラグメントイメージのリンクを翻訳することはできません。

Environment

Liferay DXP 7.2 および 7.3

解決策

以下の手順で、サイト内で利用可能な各言語のURLの翻訳を可能にする、カスタマイズ可能な独自のフラグメントイメージを作成することができます。なお、これはあくまでこの機能を実現するための提案であり、特定のユースケースごとに適合させ、テストする必要があります。
このフィールドはローカライズ可能であるため、テキスト型フィールド <lfr-editable id="text-href-editable" type="text">を使用してカスタムフラグメントを作成する必要があります。
まず、現在のイメージフラグメントのソースコードを Site Builder > Page fragments > Collections > Default > Basic components > Image fragment の 3-dot menu > Copy to and select your collectionからコピーしてください。
このフラグメントがコピーされたら、編集可能なテキスト用のコンテナ <div id="text-href-content" style="display:none;">を追加する必要があります。デフォルトでは、編集モードになるまで非表示になります。これには、URLの値（ <lfr-editable id="text-href" type="text">）を翻訳するための要素が含まれています。ビューモードになると、翻訳されたURLテキストが <div id="text-href">の中に入り、ダウンロードリンクの href 属性にコピーされます <a id="localized-href" href="#">。その結果、HTMLフラグメントの構造は次のようになります：
```
<div class="component-image pb-${configuration.bottomSpacing} overflow-hidden text-${configuration.imageAlign}">
  <div id="text-href-content" style="display:none;">
    Translate URL:
    <div id="text-href">
      <lfr-editable id="text-href" type="text"></lfr-editable>
    </div>
  </div>
  <a id="localized-href" href="#">
    <lfr-editable id="image-square" type="image">
      <img id="custom-img" alt="Responsive Image" class="${configuration.imageSize}" src="" />
    </lfr-editable>
   </a>
</div>
```

このHTMLを動作させるためには、JavaScriptセクションに以下のコードスニペットが必要です：

const queryString = window.location.search;

const hrefContent = document.getElementById("text-href-content");

if (hrefContent) {
  hrefContent.style.display = "none";
}

if(queryString && URLSearchParams) {
  const urlParams = new URLSearchParams(queryString);
  const p_l_mode = urlParams.get('p_l_mode');

  if (p_l_mode === "edit") {
    if (hrefContent) {
      hrefContent.style.display = "block";
    }
  }
} else if (!queryString) {
  console.log("queryString not found");
} else if (!URLSearchParams) {
  console.log("Method URLSearchParams not supported");
}

const hrefEl = document.getElementById("text-href");

const href = hrefEl.textContent || hrefEl.innerText;

document.getElementById("localized-href").href = href;

このコードは、ナビゲーションURLに p_l_mode というパラメータが存在するかどうかを読み取り、編集モードかどうかを検出します。存在する場合は、要素ID text-href-content を表示して、ユーザーが編集してローカライズできるようにし、表示モードになったら要素ID text-href がリンクID localized-hrefに翻訳テキストを提供します。

追加情報

JavaScriptのコードスニペットの例では、 URLSearchParams を使ってリンクからパラメータを取得していますが、これはInternet Explorer 11ではサポートされていません（ URLSearchParams#browser_compatibilityを参照してください）。 IE11での対応が必要な場合は、これを正規表現で変更しないと同じ結果が得られません。
DXP 7.4 からは、Image フラグメントのリンクを翻訳することができます。この変更は、 LPS-102358の下で行われました。
フラグメントフィールドの詳細については、当社のドキュメントをご覧ください：フラグメント固有のタグ.

7.2.xでカスタムフラグメントを書くと、イメージフラグメントのダウンロードURLがローカライズされます。

問題

Environment

解決策

追加情報