legacy-knowledge-base
公開されました Jun. 30, 2025

ページ設定でOpenGraphの画像プレビューがピクセル化されて見える

written-by

Sorin Pop

How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!

While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.

legacy-article

learn-legacy-article-disclaimer-text

問題

OpenGraphと画像に関する問題に直面しています。 OpenGraphはフルサイズの画像の代わりにプレビュー画像を使用します。 そのため、Twitter/XやFacebookでは画像が小さすぎて使えない。

さらに解明と調査を進めると、この問題を次のように説明することができる。 ステップ

1. portal-extでは、このプロパティを使用します:

dl.file.entry.preview.document.max.width=500

(デフォルトは1000)

2. ポータルを起動し、新しいウィジェット・ページの追加を開始する。
3. 左側のOpen Graphタブをクリックする。
4. ローカルPCから、1601x664ピクセルのサイズの添付画像ファイルを選択します。
5. 下にスクロールして、プレビューのセクションを見てください。
結果

    • この画像はかなりピクセル化されています。

    • また、URLの末尾に次の部分があることにもお気づきだろう。 &imagePreview=1

    • この画像を右クリックして保存すると、解像度が300ピクセルになっていることに気づくだろう(元の画像はもっと大きいので、ピクセル化されて見えるのはそのためだ)--この解像度300は、アダプティブメディア(サムネイル)の2番目の解像度に対応しているようだ。 顧客のサムネイルの解像度は128ピクセルなので、彼らにとって画像はさらに画素数が多く見える。

    • ステップ1を省略した場合(そのプロパティの値を下げないようにした場合)、結果の画像の解像度は1000になります(そのため、それほどピクセル化されておらず、見栄えが良くなります) - これは、最初のAM解像度(プレビュー1000x0)に対応しているようです。

環境

  • 7.3, 7.4

解像度

  • これは適切なコンフィギュレーションの問題だ。 そのことだ:

    • dl.file.entry.preview.document.max.widthを500に設定する。
    • 同時に、最大幅1000ピクセルのアダプティブ・メディア解像度(プレビュー1000x0)を持つ。

    は少し矛盾しているように思える。 そして解決策は、この矛盾を取り除くことである。

    • dl.file.entry.preview.document.max.widthを1000に戻す。
    • プレビュー1000x0 "のAM解像度を変更する(または新しい解像度を作成して使用する)ことにより、最大幅を500にする(ただし、この場合でもこの問題に遭遇する。)

追加情報

  • 私たちのエンジニアと分析したところ、バグではないようです。 この動作はアダプティブ・メディアの結果であり、dl.file.entry.preview.document.max.widthプロパティがどのように影響するかということです。 一度プロパティが低く設定されると、アダプティブメディアの画像解像度「Preview {value}x0」は設定された値に変更されますが、その後再度プロパティを変更してもアップスケールされないことに注意することが重要です。

    &imagePreview=1のurlについて、これは意図的なものです。 このアイデアは、一般的に、最終的な画像として意図されていないため、より小さく、より少ないリソースを必要とするプレビューを指すことです。

    したがって、私たちは、前述の設定の可能性によってこの問題を解決することを提案します。

did-this-article-resolve-your-issue

legacy-knowledge-base