APM対応時のwp-oembed-blog-cardにおけるサムネイル画像の不具合

0
いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #3064
    Hajime Megane Ogushi
    参加者
    17

    該当ページ
    https://case-shinjuku.com/system/amp

    通常表示
    https://case-shinjuku.com/system/

    wp-oembed-blog-cardが表示するサムネイルの箇所が抜けているのがわかります。
    これはwp-oembed-blog-cardが生成するコードにおいて画像の部分が背景画像として当てていることが問題かと思われます。インラインのタグが消されているんじゃないかなと思われます。

    該当箇所 vendor/inc2734/wp-oembed-blog-card/src/OEmbed_Blog_Card.php

    background-image: url(<?php echo esc_url( $cache['thumbnail'] );

    試しに以下に取り替えると、問題なく表示されました。

    <img src="<?php echo esc_url( $cache['thumbnail']); ?>

    改善についてご検討をお願いします!

    0
    いいねをした人: 居ません
    #3066
    アバター画像キタジマ タカシ
    参加者
    2283

    Case Shinjuku のサイトは、Snow Monkey ではなくオリジナルで、ブログカードのパッケージだけ利用、そして、AMP については AMP プラグインで対応している、ということであっていますよね?

    その場合ですと、パッケージ側での対処ではなく、AMP 用の scss ファイルでブログカードの scss を import し、それを AMP 用のフックで読み込ませる、という処理が必要になります。
    (AMP は CSS の容量制限がきついため、強制的に読み込ませるのではなくそのようなフローにしています)

    下記参考にしてみてください。

    0
    いいねをした人: 居ません
    #3069
    Hajime Megane Ogushi
    参加者
    17

    あ、そもそもですね。cssの問題ではなく、おそらくインラインでのstyle要素の利用がAMPでは不可のはずで、その結果、AMPのプラグインがその利用不可のタグと判断してごっそり削除しているようなのです。

    なので、background-imageでなくimgタグでsrcにて参照すると表示されたという感じかと考えています。

    以下の「サポートされる CSS」の中で許可されないスタイルとしてインラインのスタイル属性が記載されてます。

    0
    いいねをした人: 居ません
    #3070
    アバター画像キタジマ タカシ
    参加者
    2283

    あーなるほど!はやとちりして目が滑ってました、すみません>< うーん、となると img で出力するようにしたほうが良さそうですね…。 background-size: cover にするために背景画像にしているので、object-fit: cover を使って img にするのが良さそうかなと思いました。ちょっとためしてみます!

    0
    いいねをした人: 居ません
    #3670
    アバター画像キタジマ タカシ
    参加者
    2283

    v4.0 で対応しましたのでクローズします!

    0
    いいねをした人: 居ません
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「APM対応時のwp-oembed-blog-cardにおけるサムネイル画像の不具合」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。