После небольшой помощи и руководства по этому вопросу, поскольку я довольно новичок в javascript / php и, похоже, не могу понять мою проблему, просто потанцуйте вокруг нее.
В любом случае ...
Моя цель - создать горизонтальную прокручиваемую ленту твиттера (слева направо), в которой каждый твит состоит из фотографии / видео / gif выше, а текст под ним.
Мне удалось использовать элементыAPI Twitter, чтобы получить нужную информацию / включая фотографии (еще не разобрались с видео / гифками) и использовать css для размещения над соответствующим твитом.Потрясающе.
Дело в том, что, извлекая любой медиа / фото контент твита, он не вкладывает себя в div ('singular_wrap_open'), который я создал для хранения изображения / твита, а вместо этого сидит над ним.в своем собственном теге изображения, что означает, что я тогда не могу оформить все вместе, чтобы отобразить в строке, и, следовательно, отображать горизонтально.На данный момент у меня это есть, но твиты отображаются вертикально.
Если я 'отображаю: inline-block' фотографию, а также div ('singular_wrap_open'), я могу получить твиты и фотографию для горизонтального отображения, затемдруг к другу, но очевидно, что фотографии больше не находятся над твитами, как мне бы хотелось ..
Таким образом, мои дилеммы таковы:
1. Любой совет, как мне получить изображение в твиттереотображать над твит в div.в то же время заставляя каждое комбо твит / фото отображать горизонтально выровненный рядом с остальными?
Может ли кто-нибудь указать мне, как мне удается заставить видео / гифки работать через API?В настоящее время это выглядит как перетаскивание данных, но отображает кадр как изображение?Подозреваю, что это связано с тегом img, в который я его завернул?
Не все твиты будут иметь элемент медиа / фото, твитнутый с ними, и будут просто текстовым твитом в некоторых случаях,То, что я хотел бы сделать, это для любого твита, к которому не прикреплены медиа / фотографии, вместо этого показывать изображение заполнителя.Это что-то достижимое?
На что нужно обратить внимание: - Я опираюсь на базовый код из: https://github.com/andrewbiggart/latest-tweets-php-o-auth/
Вот некоторые фрагменты кода.Извиняюсь за любые ошибки начинающих !!
Ссылка Codepen: https://codepen.io/anon/pen/yZqzoj
// Function parameters.
$twitter_user_id,
$cache_file = './tweets.txt', // Change this to the path of your cache file. (Default : ./tweets.txt)
$tweets_to_display = 6, // Number of tweets you would like to display. (Default : 5)
$ignore_replies = false, // Ignore replies from the timeline. (Default : false)
$include_rts = true, // Include retweets. (Default : false)
$include_extended_entities = true,
$truncated = false,
$tweet_mode = 'extended',
$singular_wrap_open = '<div class="singular_wrap_open">',
$singular_wrap_close = '</div>',
$twitter_wrap_open = '<ul class="home-tweets-ul">',
$twitter_wrap_close = '</ul>',
$tweet_wrap_open = '<li><p class="home-tweet-tweet">',
$meta_wrap_open = '<span class="home-tweet-date">',
$meta_wrap_close = '</span>',
$tweet_wrap_close = '</p></li>',
$favourite_count = true,
$retweet_count = true,
$date_format = 'M jS g:i A', // Date formatting. (http://php.net/manual/en/function.date.php)
$twitter_style_dates = true){ // Twitter style days. [about an hour ago] (Default : true)
// GET connection
if($connection){
$get_tweets = $connection->get("https://api.twitter.com/1.1/statuses/user_timeline.json?tweet_mode=extended&screen_name=".$twitter_user_id."&count=".$tweets_to_display."&include_rts=".$include_rts."&exclude_replies=".$ignore_replies."&tweet_mode=extended");
// Get the latest tweets from Twitter
// Error check: Make sure there is at least one item.
if (count($get_tweets)) {
// Define tweet_count as zero
$tweet_count = 0;
// Start output buffering.
ob_start();
// Open the twitter wrapping element.
$twitter_html = $twitter_wrap_open;
// Iterate over tweets.
foreach($get_tweets as $tweet) {
$tweet_found = true;
$retweeted = true;
if (isset($tweet->retweeted_status)) {
$retweeted = $tweet->user;
$tweet = $tweet->retweeted_status;
}
$media_url = $tweet->extended_entities->media[0]->media_url;
if($media_url) {
$item = "<img class='twitter_photo' src='{$media_url}'/>";
$twitter_html .= $item;
}
$tweet_mode = 'extended';
$retweeted_status = full_text;
$extended_entities = true;
$favorite_count = true;
$retweet_count = true;
$tweet_count++;
$tweet_desc = $tweet->full_text;
// Add hyperlink html tags to any urls, twitter ids or hashtags in the tweet.
$tweet_desc = preg_replace("/((http)+(s)?:\/\/[^<>\s]+)/i", "<a href=\"\\0\" target=\"_blank\">\\0</a>", $tweet_desc );
$tweet_desc = preg_replace("/[@]+([A-Za-z0-9-_]+)/", "<a href=\"http://twitter.com/\\1\" target=\"_blank\">\\0</a>", $tweet_desc );
$tweet_desc = preg_replace("/[#]+([A-Za-z0-9-_]+)/", "<a href=\"http://twitter.com/search?q=%23\\1\" target=\"_blank\">\\0</a>", $tweet_desc );
// Render the tweet.
$twitter_html .= $singular_wrap_open.$meta_wrap_open.'<a href="http://twitter.com/'.$twitter_user_id.'/status/'.$tweet_id.'">'.$display_time.'</a>'.$meta_wrap_close.$tweet_wrap_open.html_entity_decode($tweet_desc).$tweet_wrap_close.$singular_wrap_close;
// CSS
.home-tweets-ul {
list-style:none;
text-align: center;
position:relative;
padding: 80px 0px;
justify-content: center;}
ul.home-tweets-ul li {
margin: 0 10px;}
.home-tweets-ul li a {
color: #63b7e5;}
.home-tweets ul li img {
width: 100px;
height: 100px;}
p.home-tweet-tweet{
padding:20px;}
.home-tweet-date {
background-color: #396aa5;
max-width: 250px;
height: 2rem;
display:block;
text-align: center;
padding-top:1rem;}
.home-tweet-date a {
color:#FFF;
text-decoration: none;
text-transform: uppercase;}
.singular_wrap_open {
vertical-align:top;
background-color: #417abd;
margin: 0px;
max-width: 250px;
text-align: left;
list-style:none;
width: 250px;}
img.twitter_photo {
max-width: 250px;
display:block;
position:relative;
}
.tweet_block {
width: 250px;
margin: 0px 20px;}