<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Comments (17)

Leinad4Mind commented on July 30, 2024 2

Any news on this ticket?

from twitter-post-fetcher.

maksimbormot commented on July 30, 2024 2

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image

JPG ONLY

from twitter-post-fetcher.

MrKarlDilkington commented on July 30, 2024 1

@maksimbormot

Please include more specific details about the issue you are experiencing. An example Twitter feed for testing would also be helpful.

from twitter-post-fetcher.

hurby commented on July 30, 2024

First off, Great work of you Jason to maintain this tool!

I have the same issue with images as described by MrKarlDilkington.

Regards Hurby

from twitter-post-fetcher.

jasonmayes commented on July 30, 2024

Thanks for the comment. Shall take a look when I have a moment but might have to be a bit later this week.

from twitter-post-fetcher.

jasonmayes commented on July 30, 2024

Just a quick question, if you check out my live demo on codepen, I am seeing images for tweets over there...Is that working for you too? http://codepen.io/jasonmayes/pen/Ioype

from twitter-post-fetcher.

MrKarlDilkington commented on July 30, 2024

@jasonmayes

I am seeing the majority of images for #caturday. One in particular is not being displayed.

Image that is not displaying

Original Tweet

For your personal Twitter feed, if you enable images, they all show up undefined.

Example

What the undefined images all seem to have in common is that the original tweet used a "card".

Example

<div class="TwitterCardsGrid TwitterCard">
    <script type="text/twitter-cards-serialization">
        { "strings": { }, "card": { "forward" : "false", "is_logged_in" : false, "is_author" : false, "language" : "en", "card_name" : "summary_large_image", "token" : "2a5501e369dd0d05bbcff64f02c0a78f434c70db", "card_uri" : "https://t.co/fwFWRl0z3X", "tweet_id" : "706968319438401536", "card_url" : "https://t.co/fwFWRl0z3X" }, "scribeData": { "card_name": "summary_large_image", "card_url": "https://t.co/fwFWRl0z3X" } }
    </script>
    <div class="TwitterCardsGrid-col--12 TwitterCardsGrid-col--spacerBottom CardContent">
        <a class=" js-openLink u-block TwitterCardsGrid-col--12 TwitterCard-container TwitterCard-container--clickable SummaryCard--small" href="https://t.co/fwFWRl0z3X" data-card-breakpoints="w550 w500 w450 w400 w350 w300 w250 w200 w150 w100 w50 ">
            <div class="SummaryCard-image TwitterCardsGrid-float--prev">
                <div class="tcu-imageContainer tcu-imageAspect--1to1">
                    <div class="tcu-imageWrapper">
                    </div>
                </div>
            </div>
            <div class="SummaryCard-contentContainer TwitterCardsGrid-float--prev">
                <div class="SummaryCard-content">
                    <h2 class="TwitterCard-title js-cardClick tcu-textEllipse--multiline">Check out #SensorTape - a reel of sticky tape with embedded working electronics…</h2>
                    <p class="tcu-resetMargin u-block TwitterCardsGrid-col--spacerTop tcu-textEllipse--multiline">Check out #SensorTape - a reel of sticky tape with embedded working electronics which works right out the box. You can detect the curvature of your spine… - Jason Mayes - Google+</p>
                    <span class="u-block TwitterCardsGrid-col--spacerTop SummaryCard-destination">plus.google.com</span>
                </div>
            </div>
        </a>
    </div>
</div>

from twitter-post-fetcher.

jasonmayes commented on July 30, 2024

Hmmm it seems to be when it is in this card format the image is not there. Can anyone locate the classname for this image that is missing?

from twitter-post-fetcher.

SiteSplat commented on July 30, 2024

@jasonmayes
The output on the fetcher is this:
<img alt="Image from tweet" src="undefined">

and the card produces this class on the img tag from the twitter card:
class="u-block"

However the image seems to be coming from a parent div and not the img tag .
The parent div has class of:
class="tcu-imageWrapper"

which applies the image via background-image property. Twitter oddities :-/

from twitter-post-fetcher.

MrKarlDilkington commented on July 30, 2024

@jasonmayes

Here is a list of some of the content that does and does not display. Hopefully you find it useful.

Displays Correctly

Image
https://twitter.com/PurrfectTravels/status/707316406098984960

<div class="AdaptiveMedia is-square ">
    <div class="AdaptiveMedia-container js-adaptive-media-container">
        <div class="AdaptiveMedia-singlePhoto">
            <div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/CdDkhfqW8AI__wl.jpg" data-element-context="platform_photo_card">
                <img src="https://pbs.twimg.com/media/CdDkhfqW8AI__wl.jpg" alt="" style="width: 100%; top: -94px;">
            </div>
        </div>
    </div>
</div>

Displays as "undefined"

Twitter Card with no Image
https://twitter.com/jason_mayes/status/707326076075134976

<div class="TwitterCardsGrid TwitterCard">
    <script type="text/twitter-cards-serialization">
        { "strings": { }, "card": { "forward" : "false", "is_logged_in" : false, "is_author" : false, "language" : "en", "card_name" : "summary_large_image", "token" : "5e7616cebd4f6d96420dfcb017d9b62dc7ea9fc8", "card_uri" : "https://t.co/mQgIZtSwCH", "tweet_id" : "707326076075134976", "card_url" : "https://t.co/mQgIZtSwCH" }, "scribeData": { "card_name": "summary_large_image", "card_url": "https://t.co/mQgIZtSwCH" } }
    </script>
    <div class="TwitterCardsGrid-col--12 TwitterCardsGrid-col--spacerBottom CardContent">
        <a class=" js-openLink u-block TwitterCardsGrid-col--12 TwitterCard-container TwitterCard-container--clickable SummaryCard--small" href="https://t.co/mQgIZtSwCH" data-card-breakpoints="w550 w500 w450 w400 w350 w300 w250 w200 w150 w100 w50 ">
            <div class="SummaryCard-image TwitterCardsGrid-float--prev">
                <div class="tcu-imageContainer tcu-imageAspect--1to1">
                    <div class="tcu-imageWrapper">
                    </div>
                </div>
            </div>
            <div class="SummaryCard-contentContainer TwitterCardsGrid-float--prev">
                <div class="SummaryCard-content">
                    <h2 class="TwitterCard-title js-cardClick tcu-textEllipse--multiline">How to publish a module on #NPM - a useful video if you have not done it…</h2>
                    <p class="tcu-resetMargin u-block TwitterCardsGrid-col--spacerTop tcu-textEllipse--multiline">How to publish a module on #NPM - a useful video if you have not done it before. https://youtu.be/BkotrAFtBM0 - Jason Mayes - Google+</p>
                    <span class="u-block TwitterCardsGrid-col--spacerTop SummaryCard-destination">plus.google.com</span>
                </div>
            </div>
        </a>
    </div>
</div>

"Playable GIF" Video
https://twitter.com/mikhalevsky/status/707385024203657216

<div class="AdaptiveMedia-container js-adaptive-media-container">
    <div class="AdaptiveMedia-video">
        <div class="AdaptiveMedia-videoContainer">
            <div class="PlayableMedia PlayableMedia--gif watched playable-media-loaded">
                <div class="PlayableMedia-player" data-playable-media-url="" style="padding-bottom: 75.42857142857143%; background-image:url('https://pbs.twimg.com/tweet_video_thumb/CdEi7mzW4AI2gqg.jpg')">
                    <iframe src="https://twitter.com/i/videos/tweet/707385024203657216?embed_source=clientlib&amp;player_id=0&amp;rpc_init=1" allowfullscreen="" id="player_tweet_707385024203657216" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

Vine Video
https://twitter.com/PALITANEGRA/status/707453609827553283

<div class="AdaptiveMedia-container js-adaptive-media-container">
    <div class="AdaptiveMedia-video">
        <div class="AdaptiveMedia-videoContainer">
            <div class="PlayableMedia PlayableMedia--vine watched playable-media-loaded">
                <div class="PlayableMedia-player" data-playable-media-url="" style="padding-bottom: 100.0%; background-image:url('https://o.twimg.com/2/proxy.jpg?t=HBiUAWh0dHBzOi8vdi5jZG4udmluZS5jby9yL3ZpZGVvcy9EMjc0NTM4NDA4MTIwMTI2NDQzNDAzMTU3MDk0NF8zMzYzNjI3MzI2My4yLjEuMTUzMDk3MzQyNzc5MTM5Mzk5NjIubXA0LmpwZz92ZXJzaW9uSWQ9OEtiS2hQQjlVMTFBY28uQlVfbDZWN2pmNFk1U0o2NVcUwAcUwAcAFgASAA&amp;s=9a-fG0UVbtjWqIeIyJyfNYUvBPSoC_nTrOJ8zVKH99g')">
                    <iframe src="https://twitter.com/i/videos/tweet/707453609827553283?embed_source=clientlib&amp;player_id=0&amp;rpc_init=1" allowfullscreen="" id="player_tweet_707453609827553283" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></iframe>
                </div>
                <div class="PlayableMedia-title">No tail is safe. 🐱 #caturday (video by Brian Connolly)</div>
                <div class="PlayableMedia-description">Vine by San Diego Zoo</div>
                <a class="PlayableMedia-externalUrl" href="https://t.co/ndTgi9bzdP" target="_blank">View on Vine</a>
            </div>
        </div>
    </div>
</div>

Twitter Card with Image
https://twitter.com/H3bK11/status/707461877442482176

<div class="TwitterCardsGrid TwitterCard">
    <script type="text/twitter-cards-serialization">
        { "strings": { }, "card": { "forward" : "false", "publisher_id" : "988955288", "is_logged_in" : false, "is_author" : false, "language" : "en", "card_name" : "summary_large_image", "token" : "5e7616cebd4f6d96420dfcb017d9b62dc7ea9fc8", "card_uri" : "https://t.co/SvjvJsSbva", "tweet_id" : "707461877442482176", "card_url" : "https://t.co/SvjvJsSbva" }, "scribeData": { "card_name": "summary_large_image", "card_url": "https://t.co/SvjvJsSbva" , "publisher_id": "988955288" } }
    </script>
    <div class="TwitterCardsGrid-col--12 TwitterCardsGrid-col--spacerBottom CardContent">
        <a class=" js-openLink u-block TwitterCardsGrid-col--12 TwitterCard-container TwitterCard-container--clickable SummaryCard--large" href="https://t.co/SvjvJsSbva" data-card-breakpoints="w550 w500 w450 w400 w350 w300 w250 w200 w150 w100 w50 ">
            <div class="SummaryCard-image TwitterCardsGrid-col--12">
                <div class="tcu-imageContainer tcu-imageAspect--2to1">
                    <div class="tcu-imageWrapper" style="background-image: none; background-image: url(https://o.twimg.com/2/proxy.jpg?t=HBg_aHR0cDovL2dsb2Nkbi5pbnZlc3RpbmcuY29tL25ld3Mvb2lsXzJfODAweDUzM19MXzE0MTI2OTI3NzQuanBnFMAMFMQGHBSEBhSUAwAAFgASAA&amp;s=1FzFMX4-_5WRr2_TkL1-de6pCxyNMPgUACkoaXkKtzU); background-size: cover;" data-style="background-image: url(https://o.twimg.com/2/proxy.jpg?t=HBg_aHR0cDovL2dsb2Nkbi5pbnZlc3RpbmcuY29tL25ld3Mvb2lsXzJfODAweDUzM19MXzE0MTI2OTI3NzQuanBnFMAMFMQGHBSEBhSUAwAAFgASAA&amp;s=1FzFMX4-_5WRr2_TkL1-de6pCxyNMPgUACkoaXkKtzU); background-size: cover;">
                        <img class="u-block" data-src="https://o.twimg.com/2/proxy.jpg?t=HBg_aHR0cDovL2dsb2Nkbi5pbnZlc3RpbmcuY29tL25ld3Mvb2lsXzJfODAweDUzM19MXzE0MTI2OTI3NzQuanBnFMAMFMQGHBSEBhSUAwAAFgASAA&amp;s=1FzFMX4-_5WRr2_TkL1-de6pCxyNMPgUACkoaXkKtzU" alt="Photo published for NYMEX crude rangebound in Asia as API build weighs By Investing.com" src="https://o.twimg.com/2/proxy.jpg?t=HBg_aHR0cDovL2dsb2Nkbi5pbnZlc3RpbmcuY29tL25ld3Mvb2lsXzJfODAweDUzM19MXzE0MTI2OTI3NzQuanBnFMAMFMQGHBSEBhSUAwAAFgASAA&amp;s=1FzFMX4-_5WRr2_TkL1-de6pCxyNMPgUACkoaXkKtzU">
                    </div>
                </div>
            </div>
            <div class="SummaryCard-contentContainer TwitterCardsGrid-col--12">
                <div class="SummaryCard-content">
                    <h2 class="TwitterCard-title js-cardClick tcu-textEllipse--multiline">NYMEX crude rangebound in Asia as API build weighs By Investing.com</h2>
                    <p class="tcu-resetMargin u-block TwitterCardsGrid-col--spacerTop tcu-textEllipse--multiline">NYMEX crude rangebound in Asia as API build weighs</p>
                    <span class="u-block TwitterCardsGrid-col--spacerTop SummaryCard-destination">linkis.com</span>
                </div>
            </div>
        </a>
    </div>
</div>

Twitter Card Video
https://twitter.com/AzureApiMgmt/status/707461363384328194

<div class="TwitterCardsGrid TwitterCard">
    <script type="text/twitter-cards-serialization">
        { "strings": { }, "card": { "forward" : "false", "is_logged_in" : false, "is_author" : false, "language" : "en", "card_name" : "player", "token" : "5e7616cebd4f6d96420dfcb017d9b62dc7ea9fc8", "card_uri" : "https://t.co/dwAo7Rzk1G", "tweet_id" : "707461363384328194", "card_url" : "https://t.co/dwAo7Rzk1G" }, "scribeData": { "card_name": "player", "card_url": "https://t.co/dwAo7Rzk1G" } }
    </script>
    <div class="TwitterCardsGrid-col--12 TwitterCardsGrid-col--spacerBottom CardContent">
        <div class="TwitterCardsGrid-col--12 TwitterCard-container TwitterCard-container--clickable SummaryCard--small PlayerCard--preview" data-card-breakpoints="w550 w500 w450 w400 w350 w300 w250 w200 w150 w100 w50 ">
            <div class="SummaryCard-image TwitterCardsGrid-float--prev">
                <div class="tcu-imageContainer tcu-imageAspect--1to1">
                    <div class="tcu-imageWrapper" style="background-image: none; background-image: url(https://o.twimg.com/2/proxy.jpg?t=HBhcaHR0cHM6Ly9zZWMuY2g5Lm1zL2NoOS82ZWM5LzA5NDBkYzJkLThjMGUtNGI2Ny04MDMyLTAxZThmODg5NmVjOS9BUElNQW5kRXZlbnRIdWJEZW1vXzk2MC5qcGcUwAcUnAQAFgASAA&amp;s=HdFmR6xIPavHIh1EpcvG9TaGnMsUxtDYJN_WGzwrFBg); background-size: cover;" data-style="background-image: url(https://o.twimg.com/2/proxy.jpg?t=HBhcaHR0cHM6Ly9zZWMuY2g5Lm1zL2NoOS82ZWM5LzA5NDBkYzJkLThjMGUtNGI2Ny04MDMyLTAxZThmODg5NmVjOS9BUElNQW5kRXZlbnRIdWJEZW1vXzk2MC5qcGcUwAcUnAQAFgASAA&amp;s=HdFmR6xIPavHIh1EpcvG9TaGnMsUxtDYJN_WGzwrFBg); background-size: cover;">
                        <img class="u-block" data-src="https://o.twimg.com/2/proxy.jpg?t=HBhcaHR0cHM6Ly9zZWMuY2g5Lm1zL2NoOS82ZWM5LzA5NDBkYzJkLThjMGUtNGI2Ny04MDMyLTAxZThmODg5NmVjOS9BUElNQW5kRXZlbnRIdWJEZW1vXzk2MC5qcGcUwAcUnAQAFgASAA&amp;s=HdFmR6xIPavHIh1EpcvG9TaGnMsUxtDYJN_WGzwrFBg" alt="Photo published for Integrate Azure API Management with Event Hubs" src="https://o.twimg.com/2/proxy.jpg?t=HBhcaHR0cHM6Ly9zZWMuY2g5Lm1zL2NoOS82ZWM5LzA5NDBkYzJkLThjMGUtNGI2Ny04MDMyLTAxZThmODg5NmVjOS9BUElNQW5kRXZlbnRIdWJEZW1vXzk2MC5qcGcUwAcUnAQAFgASAA&amp;s=HdFmR6xIPavHIh1EpcvG9TaGnMsUxtDYJN_WGzwrFBg">
                    </div>
                </div>
                <div class="PlayerCard-playButton"></div>
            </div>
            <div class="SummaryCard-contentContainer TwitterCardsGrid-float--prev">
                <div class="SummaryCard-content">
                    <h2 class="TwitterCard-title js-cardClick tcu-textEllipse--multiline">Integrate Azure API Management with Event Hubs</h2>
                    <p class="tcu-resetMargin u-block TwitterCardsGrid-col--spacerTop tcu-textEllipse--multiline">This video demonstrates how to log data as events to Azure Event hubs from API Management. It shows how to connect your API Management service to an event hub using the Logger enti...</p>
                    <span class="u-block TwitterCardsGrid-col--spacerTop SummaryCard-destination">azure.microsoft.com</span>
                </div>
            </div>
        </div>
        <div class="TwitterCardsGrid-col--12 TwitterCard-container TwitterCard-container--clickable SummaryCard--large PlayerCard--video PlayerCard--clickToLoad">
            <div class="TwitterCardsGrid-col--12 PlayerCard-videoContainer">
                <div class="TwitterCardsGrid-col--12 TwitterCardsGrid-col--spacerBottom">
                    <div id="ExternalIframeContainer" class="FlexEmbed" data-iframe-aspect-ratio-numerator="643" data-iframe-aspect-ratio-denominator="320">
                        <iframe data-src="https://channel9.msdn.com/Blogs/AzureApiMgmt/Integrate-Azure-API-Management-with-Event-Hubs/player/?format=html5" frameborder="0" scrolling="no" allowtransparency="true" sandbox="allow-popups allow-same-origin allow-scripts"></iframe>
                    </div>
                </div>
            </div>
            <a class="js-openLink u-block SummaryCard-contentContainer TwitterCard-container--clickable TwitterCardsGrid-col--12" href="https://t.co/dwAo7Rzk1G">
                <div class="SummaryCard-content">
                    <h2 class="TwitterCard-title js-cardClick tcu-textEllipse--multiline">Integrate Azure API Management with Event Hubs</h2>
                    <p class="tcu-resetMargin u-block TwitterCardsGrid-col--spacerTop tcu-textEllipse--multiline">This video demonstrates how to log data as events to Azure Event hubs from API Management. It shows how to connect your API Management service to an event hub using the Logger entity, how to use th…</p>
                    <span class="u-block TwitterCardsGrid-col--spacerTop SummaryCard-destination">azure.microsoft.com</span>
                </div>
            </a>
        </div>
    </div>
</div>

from twitter-post-fetcher.

jasonmayes commented on July 30, 2024

Thanks for that - a nice breakdown. Seems with the new card format Twitter has made its a lot harder to get things using just one class. Will need further work to support more than just regular images. On that note I think for now if it is undefined, twitter fetcher should not print it (obviously) so I shall look at adding that check for now and then can look into supporting other media formats in the future.

from twitter-post-fetcher.

ashishpatel1992 commented on July 30, 2024

+1 Looking forward for the fix..!

from twitter-post-fetcher.

tjrafferty commented on July 30, 2024

Any updates on this issue?

from twitter-post-fetcher.

neuropass commented on July 30, 2024

was this fixed with v16.1?

from twitter-post-fetcher.

jasonmayes commented on July 30, 2024

I did not intentionally do so no, but may be a byproduct of the new widgets twitter has made. Can you check?

from twitter-post-fetcher.

jasonmayes commented on July 30, 2024

This is now fixed in 16.0.2 thanks to Karl for the pull request!

from twitter-post-fetcher.

5u5hi commented on July 30, 2024

Here is the solution...

Locate this..

function extractImageUrl(image_data){
if(image_data!==undefined&&image_data.innerHTML.indexOf('data-image')>=0){
var data_src=image_data.innerHTML.match(/data-image="([A-z0-9]+://[A-z0-9]+.[A-z0-9]+.[A-z0-9]+/[A-z0-9]+/[A-z0-9-]+)/i)[1];return decodeURIComponent(data_src)+'.jpg';}
}

and replace with this..

function extractImageUrl(image_data){
if(image_data !==undefined&& image_data.innerHTML.indexOf('data-image')>=0){
var a = image_data.innerHTML.search('data-image="');
var b = image_data.innerHTML.substring(a+12);
var c = b.search('"');
var data_src = b.substring(0,c);
return decodeURIComponent(data_src)+'.jpg';
}
}

You should now be able to view all images including videos.

from twitter-post-fetcher.

media images have an undefined source about twitter-post-fetcher HOT 17 CLOSED

Comments (17)

Displays Correctly

Displays as "undefined"

Locate this..

function extractImageUrl(image_data){
if(image_data!==undefined&&image_data.innerHTML.indexOf('data-image')>=0){
var data_src=image_data.innerHTML.match(/data-image="([A-z0-9]+://[A-z0-9]+.[A-z0-9]+.[A-z0-9]+/[A-z0-9]+/[A-z0-9-]+)/i)[1];return decodeURIComponent(data_src)+'.jpg';}
}

and replace with this..

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Comments (17)

Displays Correctly

Displays as "undefined"

Locate this..

function extractImageUrl(image_data){ if(image_data!==undefined&&image_data.innerHTML.indexOf('data-image')>=0){ var data_src=image_data.innerHTML.match(/data-image="([A-z0-9]+://[A-z0-9]+.[A-z0-9]+.[A-z0-9]+/[A-z0-9]+/[A-z0-9-]+)/i)[1];return decodeURIComponent(data_src)+'.jpg';} }

and replace with this..

Related Issues (20)

Recommend Projects

Recommend Topics

Recommend Org

function extractImageUrl(image_data){
if(image_data!==undefined&&image_data.innerHTML.indexOf('data-image')>=0){
var data_src=image_data.innerHTML.match(/data-image="([A-z0-9]+://[A-z0-9]+.[A-z0-9]+.[A-z0-9]+/[A-z0-9]+/[A-z0-9-]+)/i)[1];return decodeURIComponent(data_src)+'.jpg';}
}