Resize images within Twitter feeds Content Watch

Twitter’s contents watch, a control which is placed on external sites to show the latest twitter content to your site users, was updated a little while ago, although Twitter has made it very hard to customise.

One problem I was having was with tweeting images, the width of the image did not adjust to the customised width of the ‘Contents Watch’ bar.

With the help of Joe Shaw, you can use the below JS code to alter the image widths and heights, by placing the following script after you embed your Twitter code. The jQuery library is a prerequisite, so make sure it is loaded if you haven’t already.

<script type="text/javascript">
  var youtwit = new function () {
    this.interval_timeline = false;
    this.init = function () {

      if ($('.twitter-timeline').length) {
        //Timeline exists is it rendered ?
        youtwit.interval_timeline = false;
        youtwit.interval_timeline = setInterval(function () {
          if ($('.twitter-timeline').hasClass('twitter-timeline-rendered')) {
            if ($('.twitter-timeline').height() &gt; 100) {
              //Callback
              clearInterval(youtwit.interval_timeline);
              youtwit.timelineloaded();
            }
          }
        }, 200);
      }
    }
    this.timelineloaded = function () {
      $($('#twitter-widget-1').contents().find('body')).find('.autosized-media').css('width', 140).css('height', 'auto');
    }
  }

  jQuery(document).ready(function () {
    youtwit.init();
  });
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>