Auto-expand photos always on for embedded timeline

[andypiper]

It may help some of you to know that we do have documentation on the options you can add to the widget code available on our developer site - including e.g. transparency, limiting the number of Tweets shown, etc.

[q2lithium]

My website http://Shockable.nl is useless now because of the expanded pictures. The oldest tweet visible on the webpage is now just +/- 1 minute instead of +/- 45 minutes, totally destroying the purpose (having an overview of the latest news). Considering to remove a website people enjoyed for years

[gavin.hoare]

Can I make a suggestion then if I might be so bold. Even though we all know Twitter want to force the change on us (which I might add I’m dissapointed with), would it be possible to add a option within the html code so we can choose to either to disable this auto expansion or disable photos alltogether. The feed of 3 tweets I setup for my work went from being a max of 500px in height to over a 1100 (nearly the width of a whole page)

[serathium]

I’ve found a solution with jQuery. First step, wrap the timeline in a container. Next, add this jQuery to the footer or in a jQuery(document).ready();

    jQuery('.twitter-block').on('DOMSubtreeModified propertychange',"#twitter-widget-0", function() {
        jQuery(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
        jQuery(".twitter-block").css("height", "100%");
    });

Target the container ie ‘.twitter-block’, and the ID of the iframe “#twitter-widget-0”. The second line hides the media (images/video) and the third resizes the iframe.

Had to fix this for a client who’s site blew up when this absurd change went into effect. I realize that this may be defeating the purpose of the change by twitter, but it will take some serious effort to design and implement entirely new layouts to fix this. This might offer some short-term relief.

I’ve tested this in Chrome, FF, IE, and Safari. If anyone finds ways this doesn’t work, or has a better solution, I’d love to hear about it.

Good luck!

[Thrinacia]

We are still confused as to why you would remove such option. This likely breaks many website layouts. Look at the screenshot attached.

You can also try the website at: https://www.thrinacia.com

Footer on our website now expands dramatically because of this. If you are wanting to remove control from the Web UI, thats fine, but you should leave it as configuration param at least in the widget code as widgets are supposed to be customizable. You should let users decide whether they want photos or not.

Right now the only way is to create app, design something that follows your design specs, talk to JSON REST API, cache tweets locally since you are rate limiting and so on. We have to build more complex workarounds. It really does not make sense.

[andypiper]

Thanks for the feedback - and apologies that this doesn’t suit your website in this format. We want to respect the original intent of the Tweet authors, display the wide range of media that Twitter supports today (including Cards, polls, Vines etc), and make it easy for users to interact with Twitter content. We also know that Tweets with media often see much more interaction than those without. Of course, we did think long and hard about making this change - any change on this scale would naturally have an impact, so our engineers have to consider many variables and options. In the end this is the approach we’ve chosen.

There are a couple of front-end workarounds listed above that do not require you to create an app and parse Tweets yourself on the backend, and you are free to use any of these options, but we cannot support them.

Using our official widgets remains the best way to conform to our Display Guidelines and to have your sites and apps adapt to changes in our layout and feature changes as the platform evolves.

[Thrinacia]

@andypiper thanks for the quick response. We did indeed apply a workaround already as suggested by the @serathium as shown in the following screenshot.

However as you point out this is not the official fix. Proper official way would likely be to implement the fetching from REST API and have it caching the JSON data and display according to guidelines and just remove/exclude the media as unofficial ways can cease to work at some point if Twitter makes changes.

We are still not sure though if you made the right choice to impact existing layouts by removing the configuration option from widget and instead force people to resort to REST API approach which takes more time to implement.

Best of luck, I am sure you will get lot of replies about this.

[4_Digits]

Great. Twitter updates the widget, removes functionality and then you have to tinker with your own JS to get the original functionality back. Unbelievable… I guess the timeline is dead for custom web design projects…

[manteomax]

Tweetdeck columns allow settings media Previews of Off - Small - Medium - Large.
Is this option going to be removed from Tweetdeck as well?
If not, what’s the logic of allowing it in Tweetdeck but removing it from embedded timelines?

[roboxley]

This works great but only when the page first loads. Any new tweets after the page loads still have the images annoyingly.

It’s a shame we can’t have the option to specify the size of the image previews like tweetdeck.

Also @andypiper, if the new design is supposed to make it easier to interact how come you now can’t reply to tweets from the widget? You used to be able to like, retweet or reply. Now you can only like or share.

[serathium]

Interesting. From the definition of the triggers it should, but I believe you.

Maybe something like this would achieve that. I haven’t tested this fully, but the idea is to subsequently target the actual list rather than the frame once the frame is populated. The “‘DOMSubtreeModified propertychange’” event pairing should capture when a new tweet pops into the list.

Let me know if that works for you, I’d be interested what you find out.

jQuery('.twitter-block').on('DOMSubtreeModified propertychange',"#twitter-widget-0", function() {
		hideTweetMedia(this);
});

var hideTweetMedia = function(domParent) {
    jQuery(domParent).find(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
    jQuery(".twitter-block").css("height", "100%");
	jQuery('#twitter-widget-0').on('DOMSubtreeModified propertychange', '.timeline-TweetList', function() {
		hidetweetMedia(this);
	});
}

[PinchAssault]

We want to respect the original intent of the Tweet authors

That’s nice, but we are the original owners of our content. Our feed only has tweets from us, and on our site we only want to show the text. So you say it’s to respect the owners of the content, but in our use case it’s actually completely disrespecting our autonomy and right to present our content as we want.

[gavin.hoare]

I’ve tried this but this is for a wordpress website. I’m looking for a solution that would work for a html website.

[thiswilliam]

This is a major breaking change for an incredible number of websites - I am utterly amazed how your product team decided to do this with barely a moments warning to users.

[thiswilliam]

Your initial solution works great - thank you! I couldn’t get this second one working though.

[OverchargeDota]

Considering that my site is media-oriented, I can make the concession of having inline media being displayed by default (though I empathize with those who find it unacceptable.)

But why are the borders and hover colors so tacky? Also, page detail bubbles are hovering to white, making the content unreadable.

[andypiper]

That’s odd. It looks like you have the widget inside another element (I don’t recognise the Popular/Players/etc header) so I wonder if there is anything overriding the widget itself in this case. Can you share a link for our team to take a look at?

[ColeshillOrgVeg]

Just want to add my disappointment to the growing list of other web devs/designers who have had clients bombarding them with ‘Why are there images now showing in my Twitter feed on my website?’.

It’s caused me a HUGE headache and is going to cost me time and money to fix/remove from the websites affected. Both myself and my clients are NOT HAPPY.

The option to hide images should be reinstated - clients don’t always want it!

[EnglishMTL]

I use this widget all over our school websites and now this is really screwing up the layouts. Why did you not advise us about this in advance so we could remove the widgets before they could mess anything up?

Please change it back to the way it was.

[supersanj1001]

Hi. I Tried using the a variation of both your code snippets as part of a larger .js file:

(function($){

$('.twitter-block').on('DOMSubtreeModified propertychange',"#twitter-widget-0", function() {

$(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
$(".twitter-block").css("height", "100%");

})});

and also

(function($){

$('.twitter-block').on('DOMSubtreeModified propertychange',"#twitter-widget-0", function() {
		hideTweetMedia(this);
});

var hideTweetMedia = function(domParent) {
    $(domParent).find(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
    $(".twitter-block").css("height", "100%");
	$('#twitter-widget-0').on('DOMSubtreeModified propertychange', '.timeline-TweetList', function() {
		hidetweetMedia(this);
	});
}
});

and on the page:

<a class="twitter-timeline" data-dnt="true" href="URL" data-widget-id="data widget ID" data-chrome="nofooter noborders noheader noscrollbar transparent" data-tweet-limit="2">t</a>
<script>EMBED CODE</script>

There are no errors in Chrome Console but images are not being suppressed.
Could you please advise what I am doing wrong?
Many thanks in advance.