WordPress.org

Forums

Baskerville
[resolved] Chat Post using Twitter feed problems (17 posts)

  1. rdellconsulting
    Member
    Posted 10 months ago #

    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!

  2. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    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?

  3. rdellconsulting
    Member
    Posted 10 months ago #

    Hi Andrew, you appear everywhere ;)

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

  4. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Replicated ;)

  5. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    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.

  6. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    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.

  7. Andrew
    Nuh uh moderator
    Posted 10 months ago #

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

  8. Andrew
    Nuh uh moderator
    Posted 10 months ago #

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

    $=jQuery;
    $blocks = $(".posts");
    $blocks.masonry();
  9. rdellconsulting
    Member
    Posted 10 months ago #

    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.

  10. rdellconsulting
    Member
    Posted 10 months ago #

    Great analysis Andrew, you're right.

  11. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    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");
  12. rdellconsulting
    Member
    Posted 10 months ago #

    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.

  13. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    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.

  14. Andrew
    Nuh uh moderator
    Posted 10 months ago #

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

  15. rdellconsulting
    Member
    Posted 10 months ago #

    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.

  16. Anders Noren
    Member
    Theme Author

    Posted 10 months ago #

    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

  17. rdellconsulting
    Member
    Posted 10 months ago #

    Thanks for the explanation. I've actually activated a plugin (wp twitter feed) which has fixed the problem.

    Edited: In fact, it hasn't cured the problem. A page refresh cures it so will now try to implement your suggestion.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.