Auto-expand photos always on for embedded timeline

[OverchargeDota]

Hi Andy, the page can be accessed here: http://www.dotaovercharge.com

The formatting looked like this before the recent update:

[serathium]

The first block should work, as it has been tested and found to work by a number of folks. The one thing I see is that your “on the page” section doesn’t have a wrapper around the twitter feed.

The “.twitter-block” should target the class of the container. If you made it like this:

<div class="twitter-block">
<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>
</div>

It should work.

[serathium]

Spent some time testing and it turns out I make stupid mistakes when I’m not looking

Here’s a working sample of code that should trigger both on initial page load AND on dynamic updates.

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

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

[supersanj1001]

Hi there,
Thanks so much for your response and taking time to look at this. I have spent the morning trying to get either of these JQuery examples to work. I had already wrapped the iframe in a twitter-block div class. I think the issue must be some other javascript on the page that is interfering with this. A link to our home page is:http://www.bracknell-forest.gov.uk/
For now we are going to limit the tweets from 2 to 1.
Feel free to take a look at our implementation and offer any way forward.

[trishkaideka]

While I understand Twitter’s reasoning for wanting auto expanded images on their timelines, this is why it was always an option before this update. The update to remove that option is not making the twitter timeline better for users it is only limiting what they have available to them to improve their audience’s experience,

We have many clients that do not want the images showing in their timeline on their website because we have a higher quality/larger images that we post directly on the website (with links to twitter) and now twitter has made that content redundant. How can you justify limiting features as an improvement when it is well known that the reason the world’s technologies have improved to the point it has is because we have so many choices and this allows for us to make our sites amazing pieces of works that suit our audience’s needs.

This limitation should really be thought through more. Also, leaving the checkbox behind is very sloppy and a huge disservice to your users. You should really do more testing before you role out updates.

[serathium]

Hello,

I didn’t see the js for the solution up on the site to diagnose, so I took a look at the page in general.

There are a few things you might look into.

First, the way you’re inserting jQuery is unusual, and not something I understand to be a ‘good’ way of going about things. The reason to use the window.jQuery || document.write(scripttags) construct would be if to have a backup local copy of a resource that you otherwise use from a remote host. Which is to say that it looks like you’re doing a check for jQuery at a point where it will always be false, and inserting a script pointing at the CDN, in which case you’d be better served to just have the script tag written normally up in the head of the page.

See here: http://stackoverflow.com/questions/5257923/how-to-load-local-script-files-as-fallback-in-cases-where-cdn-are-blocked-unavai

Next, jQuery 1.5 is pretty old, and the “.on” function I’m using didn’t come along until jQuery 1.7. They’re up to 1.12 now, and even have a 2.x branch. I’d recommend updating it if you can get away with it.

You can use a variant with the .delegate method, which is supported by 1.5.

$("#socialMedia #twitter").delegate("#twitter-widget-0","DOMSubtreeModified propertychange", function(){
  hideTweetMedia();
});

I exported the html/js/css for your home page, moved the jquery script tags into head, and got rid of the .write, and updated the fix to use the ‘delegate’ method, and it worked. I did the same thing by updating the jquery version to 1.7.2 and the original fix worked.

So, you have some options, obviously there’s a few changes needed just to use this fix. But I would argue that those changes are things you should probably figure out a way to do anyway.

In any case, if you decide not to update jQuery, here’s the code, tailored to your home-page, that I tested and saw working.

$(document).ready(function() {
  var hideTweetMedia = function() {
    $("#socialMedia #twitter").find(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
    $("#twitter-widget-0").css("height", "100%");
    $("#socialMedia #twitter").find(".twitter-timeline").contents().find(".timeline-TweetList").bind("DOMSubtreeModified    propertychange", function() {
			hideTweetMedia(this);
		}
      );
   }

   $("#socialMedia #twitter").delegate("#twitter-widget-0","DOMSubtreeModified propertychange", function() {
	hideTweetMedia();
    });
});

On the other hand, if you do decide to update jQuery, here’s the code, tailored to your home-page, that I tested and saw working.

$(document).ready(function() {
      var hideTweetMedia = function() {
          $("#socialMedia #twitter").find(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
          $("#twitter-widget-0").css("height", "100%");
          $("#socialMedia #twitter").find(".twitter-timeline").contents().find(".timeline-TweetList").bind("DOMSubtreeModified propertychange", 
               function() {
                  hideTweetMedia(this);
               }
           );
        }

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

Good luck!

[andypiper]

Hi @trishkaideka - FWIW I completely agree with you on the oversight with the configuration checkbox, and we’re working to resolve that. I apologise that you’re frustrated about it! As mentioned much further up the thread, we are actually doing a bunch of behind-the-scenes work around how widgets are configured, so we took a choice here that temporarily having to explain the change would be an acceptable situation while we completed those other pieces. It definitely is not ideal.

In terms of the change to the timelines, it is clear that several of you are disappointed at the choice to remove the option to hide media. Keep in mind that we have also broadened the scope of the refreshed timelines to include all of the different kinds of media and content shared on Twitter today, from text, to images, URLs with cards, polls, video, etc and rebuilt the widgets on modern web standards that are unencumbered by needs to fallback for legacy browsers. There are no plans to restore the hide media option as a built-in behaviour of the embedded timeline, in the same way that individual embedded Tweets also don’t have that option.

On issues like the strange CSS issue mentioned by @OverchargeDota with cards becoming unreadable on hover, or other layout matters, we are keen to ensure that the timelines are a solid solution. The product team are taking an active interest in these reports!

Thank you all again for your feedback about the refreshed timelines. We’ll continue to refine the experience over the coming weeks.

(also a HUGE shout-out to @serathium for sharing his ideas on how others might workaround the new behaviour - really great to see the developer community sharing code and working together. Thanks @serathium!)

[thiswilliam]

This is great, thanks for providing a solution!

[andypiper]

Hi @OverchargeDota - I’ve confirmed with the team that this is a bug that is being worked on with the cards not rendering nicely on a non-white background, and hopefully that will be fixed in the next couple of weeks. Thanks for raising it with us.

[serathium]

You should be able to use a minor deviation of the fix in the short term to add your own styles to the twitter card elements.

Something along the lines of:

  jQuery('.twitter-block').on('DOMSubtreeModified propertychange',"#twitter-widget-0", function() {
        var head = jQuery("#twitter-widget-0").contents().find("head");
        head.append('<style>.class{ style: rule}</style>');
    });

There are some other examples shown here: http://stackoverflow.com/questions/15533967/styling-the-new-twitter-widget-embedded-timeline/35801158

[andypiper]

Thanks - we will be supporting the dark theme properly in a few days, so if folks can live with this inconvenience just a little longer, hopefully we can get you a proper solution soon.

[ilmanati]

This is a very very discouraging development!!

[ilmanati]

@serathium is the day saver else, would have pulled down my feed that is forced to look like a sick advertising disturbia

[ScottOnTheNet]

Can some people please post links to their sites where they have got serathium’s code to work?

I need to see it in action. I can’t seem to get it to work…

Thanks!

[serathium]

If you can point me at your page I may be able to help.

[PinkWebCess]

Another hacked off web designer here. I have literally hundreds of twitter feeds that no longer have the look and feel my clients signed off. My temporary workaround is very ugly but necessary. I have forced the height of the holding div and set the overflow to hidden. This means that if the first tweet in the list has an image, well too bad, that’s the only one that will show. Calling all fellow web designers to lobby twitter to restore choice.

[andypiper]

Auto-expand photos option is still visible on the widget settings UI. What is the point of having this option if media is now the non-modifiable default?

FWIW, we’ve now cleaned up the widget settings to reflect that this option is no longer available. Apologies for the confusion caused by that option remaining visible when the new timelines were launched.

Tweets today typically include a wide range of content - web Cards, Moments, images, GIFs, videos, Vines, live Periscope broadcasts, polls, etc. - and are no longer just about text. We wanted the embedded timeline experience (and our timelines on Twitter Kit for iOS and Android) to reflect these experiences as much as possible, whilst also being the best way of embedding Twitter content and remaining consistent with our Display Requirements.

[ScottOnTheNet]

That’s kind of you to offer!

I have the original twitter widget code just on a page here

CHUM FM

There is none of your code around this…I kinda gave up after a few hours trying… I tried wrapping it with the <div class="twitter-block"> and all the jquery lines but…I got nothing.

Any help is appreciated!

[serathium]

I took a look at your site and found a couple things that you might look into.

First, you’re using an older version of jQuery, like another example I offered above, you can use the ‘.delegate’ method instead of ‘.on’.

Next, it’s possible, considering that you’re using asp, that the character encoding of the quotes is going sideways. That is to say, Windows has a different interpretation/understanding of what a particular character in a string means than, say, linux. To the same extent that Linux does from Apple, and so on. While they agree on most things, quotation marks and apostrophes are one of the outliers. Windows, specifically, has a notion of ‘smart quotes’, which are not handled the same or consistently when read by a browser. So it’s possible that the JS wouldn’t work when copied from one document to another if the encoding is different than the recipient environment is expecting.

Long story short, make sure that the (’’), ("") {correct/universal}, or (””), (‘‘) {incorrect/not universally compatible} are all consistent in the script, and being parsed correctly. Ideally, you should only see (’’) type quotes. I exported your page to a local document and tested the script using delegate and found it to work. Again, you’ll need to wrap the timeline in a parent div like so:

> <div class='twitter-block'> 
> <a class="twitter-timeline"></a>
> </div>

But, otherwise, you should be able to just paste this into the bottom of the document just above the closing body tag.

		<script type="text/javascript">
		
		jQuery('.twitter-block').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {

			hideTweetMedia();

		});
		var hideTweetMedia = function() {

			jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('display', 'none');

			jQuery('.twitter-block').css('height', '100%');

			jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {

				hideTweetMedia(this);

			});

		}
		</script>

[ScottOnTheNet]

Hey that works!

There is a mouse over effect on the tweet but I can live with that / look into some css to turn it off.

Really grateful for your help Richard!