サポート » 使い方全般 » メディアライブラリに格納されている全ての画像を取得して表示させたい

  • 解決済 hinatyan

    (@hinatyan)


    メディアライプラリのファイルの質問をさせてください。
    各ユーザーが投稿した添付ファイルが格納されているメディアライプラリにある全ての画像ファイルを取得してテンプレートファイルに表示させたいです。

    また、そのとき、画像にリンクをつけて別ページで開くようにしたいです。

    テンプレートファイル名はphotograph.phpです。
    下記の内容で記述しましたところ何も表示されませんでした。

    <?php
    $p_img = get_post_meta($post->ID, ‘p_img’, true);
    echo $p_img[0];*/
    ?>

    取得方法、表示方法をご存知の方お手数ですが教えて頂ければと思います。
    宜しくお願い致します。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • モデレーター gatespace

    (@gatespace)

    こんばんは。

    get_post_meta はCodexの説明にもある通り、特定の投稿のカスタムフィールドのキーから値を取得する関数なので、今回のような用途には使えません。

    メディアライブラリのファイルは post_type = attachment として登録されるため、
    他のカスタム投稿タイプと同様の処理が可能です。

    <?php
    	$args = array(
    		'post_type' => 'attachment',
    		'numberposts' => -1,
    		'post_status' => null,
    	);
    
    	$attachments = get_posts( $args );
    	if ( $attachments ) { // 該当する投稿があったら
    		foreach ( $attachments as $attachment ) :
    			echo '<li>';
    			echo wp_get_attachment_image( $attachment->ID, 'full' );;
    			echo apply_filters( 'the_title', $attachment->post_title );
    			echo '</li>';
    		endforeach; // 投稿のループ終わり
    	}
    	wp_reset_postdata();
    ?>

    上記のコードは本家Codexのwp_get_attachment_imageにサンプルコードに少し手を加えたものです。

    ※上記では画像へのリンクは作成されていませんのでご注意ください・

    トピック投稿者 hinatyan

    (@hinatyan)

    jim912さん、回答して頂き有難うございます。
    全ての画像を表示することができました!
    attachmentという部分が必要なのですね。

    画像へのリンクはattachmentから画像のurlだけを抜き出す処理が必要ということなのでしょうか?
    ご教授して頂けると助かります。
    よろしくお願い致します。

    モデレーター gatespace

    (@gatespace)

    オリジナルの画像ファイルへのリンクならば the_attachment_link (もしくはget_attachment_link)を使ってください。
    また get_posts のパラメーターを指定するとき、ファイルタイプが画像のみのアタッチメントを取り出すようにしています。

    <?php
    $args = array(
    	'post_type' => 'attachment',
    	'numberposts' => -1,
    	'post_status' => null,
    	'post_mime_type' => 'image' // ファイルタイプが画像のみ(jpegとか)
    );
    
    $attachments = get_posts( $args );
    if ( $attachments ) { // 該当する投稿があったら
    	echo '<ul>';
    	foreach ( $attachments as $attachment ) :
    		echo '<li>';
    		the_attachment_link( $attachment->ID, false, false, false  ); // サムネイルで表示して、画像へのリンクにする
    		echo apply_filters( 'the_title', $attachment->post_title );
    		echo '</li>';
    	endforeach; // 投稿のループ終わり
    	echo '</ul>';
    }
    wp_reset_postdata(); // 取得したデータのリセット
    ?>

    あと私、jim912さんじゃないんで・・・。

    モデレーター jim912

    (@jim912)

    私です。

    トピック投稿者 hinatyan

    (@hinatyan)

    gatespaceさん、大変失礼致しました。
    前スレの方と間違えて入力してしまいました。
    申し訳ございませんでした。

    jim912さん、申し訳ございません。
    間違えて入力してしまいました。
    ご迷惑お掛けしました (#^.^#)

    画像リンクの件ですが、
    できました!gatespaceさんありがとうございます!

    実は、メディアライブラリにある全ての画像を使ってギャラリーを作りたいという
    ことで取得した画像をレイアウトにはめる為、画像表示サイズの指定と
    画像を拡大するためのリンクとクラスを付けたかったのでご質問をさせて頂きました。

    おかげさまで、実装することができました。
    画像とリンクの部分を少し変えて下記の内容で実装させて頂きました。

    <?php
         $args = array(
              'post_type' => 'attachment',
              'numberposts' => -1,
              'post_status' => null,
              'post_mime_type' => 'image' // ファイルタイプが画像のみ
         );
    
         $attachments = get_posts( $args );
         if ( $attachments ) { // 該当する投稿があったら
              foreach ( $attachments as $attachment ) :
                   echo '<li><a href="'.wp_get_attachment_url($attachment->ID).'" rel="img_group"><img src="'.wp_get_attachment_url($attachment->ID).'" width="80" height="80">';
                   echo '</a></li>';
              endforeach; // 投稿のループ終わり
         }
         wp_reset_postdata();
    ?>
    モデレーター gatespace

    (@gatespace)

    今のコードだと大きい元の画像を無理矢理縮小して表示しているので、
    長方形の画像が変な比率で縮小されたりします。

    wp_get_attachment_url は元の画像のパスを取得しますので、
    <img>タグでサムネイル的に利用するなら、wp_get_attachment_imageを使った方が良いかもしれません。

    <?php
    $args = array(
    	'post_type' => 'attachment',
    	'numberposts' => -1,
    	'post_status' => null,
    	'post_mime_type' => 'image' // ファイルタイプが画像のみ(jpegとか)
    );
    
    $attachments = get_posts( $args );
    if ( $attachments ) { // 該当する投稿があったら
    	echo '<ul>';
    	foreach ( $attachments as $attachment ) :
    		echo '<li><a href="'.wp_get_attachment_url($attachment->ID).'" rel="img_group">';
    		echo wp_get_attachment_image( $attachment->ID, array(80,80) ); // サイズを80px*80pxに
    		echo '</a></li>';
    	endforeach; // 投稿のループ終わり
    	echo '</ul>';
    }
    wp_reset_postdata(); // 取得したデータのリセット
    ?>

    ※あと、解決したなら右上のプルダウンを「解決済み」にしてください

    トピック投稿者 hinatyan

    (@hinatyan)

    gatespaceさん
    ありがとうございます。
    プルダウンの「解決済み」の部分もご指摘ありがとうございます。

    教えて頂いたコードで試しましたところ、縦横比率が保たれた縮小画像を
    表示することができました!
    ですが、各画像を並べてると、幅は足りるけれど高さが足りないという
    表示になってしまいました。

    幅または高さのどちらかが指定のサイズになったら、
    余った方は表示しないというような切抜き方法で表示できると理想的なのですが
    厳しいですね。

    前述で教えて頂いた方法で試した縦横比率を無視したもので
    レイアウトを保つことができましたので満足です。
    やりたいことを実現することができ大変助かりました。
    ありがとうございます。

    モデレーター gatespace

    (@gatespace)

    先のコードはメディアをアップロードしたときに作成されるサムネイルサイズの画像を利用しています。

    幅または高さのどちらかが指定のサイズになったら、
    余った方は表示しないというような切抜き方法で表示できると理想的なのですが
    厳しいですね。

    ダッシュボードの設定→メディアの「サムネイルのサイズ」で
    「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」
    にチェックを入れてみてください。

    トピック投稿者 hinatyan

    (@hinatyan)

    gatespaceさん

    ありがとうございます。
    サムネイルを実寸法にトリミングするにチェックを入れたところ
    縦横比率を保持して切抜きの縮小表示ができました!

    おかげ様で理想の表示をすることができました。
    本当にありがとうございます!
    大変勉強になりました。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「メディアライブラリに格納されている全ての画像を取得して表示させたい」には新たに返信することはできません。