WordPress.org

Support

Support » Themes and Templates » [Resolved] Chat Post using Twitter feed problems

[Resolved] Chat Post using Twitter feed problems

  • Using v1.11, I’m experimenting in localhost so can’t give you a link.

    I’ve setup a Post for each standard Post type. Was fine until I added a standard Twitter feed into a Chat posttype. Originally had twitter timeline plugin activated, but have deactivated and still have a problem (no plugins now). Have set all except Chat to Draft so only have a single Chat post displayed.

    The standard height of the Twitter feed is 600px, but my footer is overlapping the Chat box at c300px.

    Twitter code loaded to Excerpt:

    <a class="twitter-timeline"  href="https://twitter.com/twitter"  data-widget-id="MYCODEHERE">Tweets by @twitter</a>
    
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    The faulty line of generated HTML is:
    <div class="posts" style="position: relative; height: 328.833px;">

    Help!

Viewing 15 replies - 1 through 15 (of 16 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    I can’t see the issue on the theme’s demo site http://wp-themes.com/baskerville/ – Was there a particular theme setting checked to generate this inline CSS?

    Hi Andrew, you appear everywhere 😉

    The unique use-case here is the Twitter feed with the Chat post-type.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Replicated 😉

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Looks like you have to initialise the masonry again so that it calculates the right height, but I think you can see the issue with using inline JS is that it’s really difficult to depend on. It’s not enqueued for example.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Could you instead put that Twitter JS into a .js file and enqueue that? Then you can maybe output it before the global.js file in the markup.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Or instead of running masonry again you could run a bit of JS to apply a re-calculated height for you

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    E.g. run this in your developer tool console and see the problem rectified:

    $=jQuery;
    $blocks = $(".posts");
    $blocks.masonry();

    Hang on, I’m not using inline-styles – the Theme is!

    May be useful feedback for the Author, but I think it’s his job to fix the code. I’m sure it’s an omission (even @nikeo gets it wrong sometimes lol).

    Like the Theme so no intention to offend the Author.

    Great analysis Andrew, you’re right.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Sorry I meant inline JS, the embedded twitter code is inline JS:

    ! function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0],
                p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");

    Ah, I see what you’re suggesting. But wouldn’t the Theme fix be a better way to go? I’d have thought the Twitter feed would be a fairly common need by Users.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    The theme isn’t needing a fix from what I can see, it uses a third-party thing called Masonry which requires a height applied to the containing element of the post excerpts.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    You wouldn’t be able to apply the height in CSS because it would be unknown until the DOM has rendered.

    Masonry.js is a web standard used in lots of Themes. So the change is unlikely to be there (it’s been around the block a few times!).

    Not looking for a CSS fix.

    Twitter feeds are often set up in Widgets, but I wanted it in the Chat posttype.

    Looking at the Theme, there is no content-chat.php set up, and that is where the enqueue of the js would need to be? Mind, I’m assuming that Users would use the Chat posttype like me which isn’t necessarily so. Could be used in a Standard posttype.

    Would be interested in Anders’ opinion before I set anything up for myself.

    Theme Author Anders Noren

    @anlino

    Hi rdellconsulting,

    When Masonry is run, it automatically calculates the height of the posts and positions the post containers accordingly ( ie if a post is 500px high, the post below it will be set to something like top: 530px;). The element wrapped around the posts works the same way – the total height of the elements within it is calculated and applied as the height of the wrapper.

    Like Andrew says, the issue seems to be that Masonry is being run before the Twitter feed has been fully loaded. Thus, Masonry isn’t able to calculate the height of the post properly, and the wrapper is shorter than the total height of the posts.

    To solve this, put the inline js in a file and enqueue it in functions.php. You’ll also need to make some changes to global.js. If the Twitter feed has a callback function, use that to run Masonry again when the feed has been loaded (using the code Andrew posted above). That way, Masonry will be able to calculate the total height of the posts correctly.

    – Anders

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘[Resolved] Chat Post using Twitter feed problems’ is closed to new replies.