最新記事でのgifアニメ再生

[ito]

いつも便利に楽しく、利用させていただいております。

実は、本文の記事にgifアニメの画像を投稿しているのですが、本文ではgifアニメが再生されるのですが、アイキャッチ指定した[s]最新記事とカテゴリの一覧では再生されません。

Wordpressにある最近の投稿を使用した場合と、関連記事では再生されているようです。

gifアニメの画像は小さくして投稿しており、アイキャッチの指定はフルサイズを指定しています。

cssの指定等で表示させることは可能でしょうか。

[Hidekichi]

本文中のgifは投稿されたgifで、アイキャッチは投稿時に再生成された画像ファイルということは無いでしょうか？

例えば、デベロッパーツールで、該当ファイルの画像パスを調べて、それ単体を表示した時、アニメーションしないのであれば再生成されたただのgifというのも考えられます。
実際のものを見てないのでわかりませんけれども。

もし仮に上記の内容で、画像にリンクがついていたり、動作するパスとしないパスで一定の法則があるならjQueryでsrcを加工すれば動作するのではないかと思います。

[わいひら]

hidekichiさんが書かれているように、アイキャッチは再生成されたものが使われているからではないかと思います。
これは、Wordpressの仕様だと思うので、どうしようもないかもしれません。
どうしても、サムネイルにgifアニメを使用するのであれば、jQueryなり、PHPなりで「gifのときだけ元画像を使用する」といったカスタマイズが必要になるかと思います。
ですのでCSSではちょっと無理ではないかと思います。

[takeda]

使いやすく素晴らしいテーマをありがとうございます。
本件横から失礼致します。

私もウィジェットでGIF画像のサムネイルが表示されず困っております。
不思議なのが、[s]新着記事では表示されて、[s]人気記事では表示されない、という状態です。
デベロッパーツールで当該画像を見ますと、

[s]新着記事の画像：2016/05/hoge.gif　（記事中最初の画像、アイキャッチもこれです）
[s]人気記事の画像：wordpress-popular-posts/22-featured-75×75.gif　（この画像は存在しません）
以上は、../upload/の下です

Wordpress Popular Postsはインストール済みです。
[s]新着記事と同様に、[s]人気記事でもGIF表示される様にしたく。
アドバイスを頂けると助かります。どうぞ宜しく御願い致します。

[Hidekichi]

takeda さん

状態を確認して欲しいのですが、その人気ウィジェットなりのウィジェットのサムネイルはどういうタグで入ってますか？
タグで？と聞くとimgなんですけれども、その中身のsrcの状態を見てもらいという感じです。

何かしら印(class)が付けられたら良いのですが、個別の記事に印をつけるのは面倒なので一律にすることになりますけれども、例えば、

<img src="ドメイン名/wp-content/upload/何かしらのディレクトリ/test-100x100.gif" />

仮にこういうのが入っていたとします。これは元の画像をwordpressなりプラグインがPHPのGDなりを使ってサムネイルにしたものです。が、例えばその同じ画像をメディアで見てみたらアニメーションするというのであれば、元の画像はアニメーションするわけですから、サムネイルをやめて元の画像にすればよいだけの事になるだろうと思います。
デメリットとしては「重くなる」の一言に尽きます。画像のサムネイルはそれ単体で数MBぐらいはあるでしょうし、それが5件なり10件なりですから、ページの読み込み速度が落ちます。
オリジナルの画像をサムネイルにするということは、それらファイルを軽くして、あくまでも本来の画像の「サムネイル」として表示するためのものですからここらは諸刃の剣と考えるべきポイントです。

速度が落ちれば自ずとページ自体の評価は下がると言う流れにつながるかも知れませんが、それでもやりたいのであれば、

サンプル: オリジナルのアニメーションgif画像を背景で読み込んで、サムネイルっぽく表示 | codepen
※ ただし、サムネイルが、なんちゃらかんちゃら-100×100.gifの場合のみ

こんな感じで表示できると思います。

[takeda]

Hidekichiさま

こんなに早く、丁寧な回答を頂きまして、誠にありがとうございます。
まずimgタグですが、表示されない方（[s]人気記事の画像）は、
<img src="ドメイン名/wp-content/uploads/wordpress-popular-posts/22-featured-75x75.gif" width="75" height="75" title="hogehoge" alt="hoge" class="wpp-thumbnail wpp_cached_thumb wpp_featured">
表示される方（[s]新着記事の画像）は、
<img width="100" height="79" src="ドメイン名/wp-content/uploads/2016/05/hoge.gif" class="attachment-thumb100 size-thumb100 wp-post-image" alt="hoge">
でした。
アドバイス頂きました件、アニメーションGIFと言っても画像２枚を交互に表示する程度なのですが、ご指摘の通り重くなるのは確かですので、実際に表示して、表示や速度等を比べてみてから再考しようと思います。

それで、早速静止画GIFで試してみようとしたのですが、ここで新たな問題が発生しまして。。
メディアライブラリから、画像の編集、をクリックしても画像が表示されず、サイズ変更やトリミングが出来ない状態になってました。これはGIF画像だけで、JPGは問題なく編集できます。
この不具合は、おそらくテーマとは無関係と思われますので、これから色々調べてみます。

何か質問の趣旨とは違う所でバタバタしてしまい、すみません。
ご回答とアドバイス、本当にありがとうございました。

[fjm56]

いろいろテーマを変えてぴったりのものを探しているところです。他のテーマではホームページの記事一覧でもアニメーションGifが普通に動いていました。それをSimplicityに替えても，表面上は特に問題はなかったのですが，そこで新規に投稿してみたところ，本文gifは動くのに，ホームページ一覧では，新規に登録したものだけ，枠の中で妙に拡大画像で静止したままで動きません。
再びExrayとか他のテーマに替えたところでは，全部，動いています。
そこで再びSimplicityに戻すと，やはり，あとから登録したgifだけ止まって，他は動いています。
ということで，全体的にはSimplicityは大変気に入ったテーマなので，修正の参考になれば，と思います。

[fjm56]

先ほど投稿した者です。いろいろいじってみたところ，Simplicityでは，アイキャッチ画像は登録する時に，サイズに関係なく強制的に静止画のサムネイルに替えてしまうようですね。まだ初心者なので自分ではどうにもできませんが，どうにかならないでしょうか。

[Hidekichi]

> fjm56さん

#41473というような状態を想像します。
サイトがどのようになっているかがわからないと何とも答えようがないんですが、基本的には何かしら画像をアイキャッチとして登録した時、wordpressはいくつかのサイズのサムネイルを作ります。

Simplicityではその中のサムネイルを利用していると思うんですが、メディアのアップロードをした時にオリジナルの画像もアップロードされているはずなので、そのオリジナルの画像に何かしらの方法で変えればよいわけです。

そもそもオリジナルの画像があるのにサムネイルを使うのは、軽いファイルに変換して素早くサイトの表示を行うためのものでwordpressの仕組みですから、それを変更するのはカスタマイズの範疇になります。

親テーマentry-eye-catch.phpに、

//アイキャッチの表示
the_post_thumbnail();

こういう部分があります。サムネイルを表示するというwordpressの関数ですが、ここを

//アイキャッチの表示
the_post_thumbnail('full');

にすれば、アップロードしたオリジナルの画像が表示されるだろうと思います。他のテーマがどのように表示させているかは知りませんが、上記に変えれば全てのアイキャッチがオリジナルの画像になるので、単純にサイトの表示が重くなります(サムネイルではなくオリジナルの画像なので)。
特にアイキャッチは画面上部にあるためページ全体の表示を重くしてしまい色々と良くありません。

そこで、設定されたアイキャッチのオリジナル画像の拡張子がgifの場合だけオリジナルを表示して、それ以外は通常通りというふうにすれば表示できるのではなかろうかということで、

//アイキャッチの表示
//the_post_thumbnail();
$image_id = get_post_thumbnail_id ();
$thumb = wp_get_attachment_image_src ($image_id, true);
$img_src = $thumb[0];
$extention = new SplFileInfo($img_src);
        
if ($extention === "gif") {
  the_post_thumbnail('full');
} else {
  the_post_thumbnail();
}

※phpのバージョンが5.3.6以下だとSplFileInfoが使えません。

動作的には、添付されてる画像のアドレスからsrc部分を取得して、ファイルの拡張子を調べます。拡張子がgifの場合はオリジナル画像を、それ以外はデフォルトという感じです。

一応うちのテストサイトではアニメーションgifが正しく動作しました。また、親テーマの変更に当たるのでアップデートごとに修正し直す必要があります。

[投稿者]

投稿