twitter api PHP CSS 画像を横並び配置で表示
twitter api PHP CSS を使って取得したツイートから画像を横並び配置でギャラリーサイトのように表示したい。
・やりたいこと
twitter apiでツイートを取得し、PHPとCSSを使って画像をギャラリーサイト風に表示するページの作成。
・現状
画像データを所得し表示。
1ツイートに複数枚の画像添付がある場合、その複数枚が1つのまとまりとして表示される状態です。
・質問
これを参考のイメージ図のように分けて表示するには、どのようにコードを記述すると良いでしょうか？
イメージ図を挿入します。
該当のソースコード
<?php
require "vendor/autoload.php";
use Abraham\TwitterOAuth\TwitterOAuth;
$consumerKey = '・・・';
$consumerSecret = '・・・';
$accessToken = '・・・';
$accessTokenSecret = '・・・';
$conn = new TwitterOAuth( $consumerKey, $consumerSecret, $accessToken, $accessTokenSecret );
// パラメータ (オプション)
$tweets_params = array(
'q' => '風景 filter:images',
'count' => '12'
);
$res = $conn->get('search/tweets', $tweets_params)->statuses;
$arr = json_decode ( json_encode( $res ), true );
foreach( $arr as $i ) {
$Media = $i['entities']['media'];
if( !empty( $Media ) ) {
foreach( $Media as $key ) {
$Text = str_replace( $key['url'], ' ', $Text );
}
}
unset( $Media );
$ImgUrl = $i['extended_entities']['media'];
$VideoUrl = $i['extended_entities']['media'][0]['video_info']['variants'][0]['url'];
$VideoThumb = $i['extended_entities']['media'][0]['media_url_https'];
$Fcount = $i['favorite_count'];
$Rcount = $i['retweet_count'];
echo '<div class="tweet">';
echo '<div class="twitter-body">';
echo '<div class="twitter-text">'.$Text.'</div>';
if( empty( $VideoUrl ) ) {
if( is_array( $ImgUrl ) ) {
echo '<div class="twitter-img">';
foreach( $ImgUrl as $key ) {
echo '<a href="'.$key['media_url_https'].':orig" target="b_lank"><img src="'.$key['media_url_https'].'"></a>';
}
echo '</div>';
}
}
unset( $ImgUrl );
if( empty( $VideoUrl ) ) {
} else {
echo '<video src="'.$VideoUrl.'" width="auto" height="auto" controls loop preload="metadata" poster="'.$VideoThumb.'"></video>';
}
echo '<div class="count-block">';
echo '<div class="twitter-f-count">'.$Fcount.'</div>';
echo '<div class="twitter-r-count">'.$Rcount.'</div>';
echo '</div>';
echo '</div>';
echo '</div>';
}
unset( $arr );
?>
試したこと、補足情報
検索した情報で何とかtwitterAPI画像所得が出来ました。知識はその程度です。
0