WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Fourteen and Instagram embed (12 posts)

  1. patrickphotosuk
    Member
    Posted 4 months ago #

    Using the embed code from an Instagram and the Twenty Fourteen theme creates extra blank lines before the text. Switching to Twenty Thirteen the blank lines do not appear.

    Is anyone else having the same issue?

  2. Extra blank lines ... where? In the post content of the edit page, in the display of the page, on the front page?

  3. patrickphotosuk
    Member
    Posted 4 months ago #

    Sorry, I may have not explained it correctly but there is a large gap between the Instagram and where the text should start.

  4. Jose Castaneda
    Member
    Posted 4 months ago #

    Can you provide an image or a link to demonstrate? From the sound of it it could just be padding/margin but no clear way of telling.

  5. patrickphotosuk
    Member
    Posted 4 months ago #

    Can't seem to see a way to upload an image here. So I've put the image in this tweet https://twitter.com/patrickphotosuk/status/408496382748553216

    I'm running 3.8 on a localhost rather than my live blog which is displaying fine using Twenty Thirteen.

  6. Lance Willett
    Theme Wrangler
    Posted 4 months ago #

    Hi Patrick,
    Do you have any plugins installed? Can you test with them all deactivated?

  7. patrickphotosuk
    Member
    Posted 4 months ago #

    I've deactivated all the plugins and it is still displaying the text with the space after the Instagram. When I view the source for the page in Twenty Fourteen it says this:

    </header><!-- .entry-header -->
    
    		<div class="entry-content">
    		<p><iframe src="//instagram.com/p/gi8h1SPLDg/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
    Today is the first day of the

    And when I look at the source for the page on my live site using Twenty Thirteen it says this:

    </header><!-- .entry-header -->
    
    		<div class="entry-content">
    		<p><iframe src="//instagram.com/p/gi8h1SPLDg/embed/" height="710" width="612" frameborder="0" scrolling="no"></iframe>
    Today is the first day of the

    There is a small difference between the two. Is this what is causing the problem?

  8. Since you didn't use code tags, there's no difference to us... or rather, anything that was different got eaten.

    Can you repost those examples with code tags? They're backticks (or press the CODE button on the toolbar above the text entry box).

  9. patrickphotosuk
    Member
    Posted 4 months ago #

    The small difference is that the embed code you cut and paste from Instagram has allowtransparency="true" now in it. I don't think that was in there a few weeks ago for the version I'm using in Twenty Thirteen. But removing this still makes no difference to what is happening in Twenty Fourteen.

    Thanks to all who are helping out with this.

  10. Lance Willett
    Theme Wrangler
    Posted 4 months ago #

    I think I found the issue, though with a "live" embed I can't repeat it.

    Will push in a CSS fix to Twenty Fourteen in trunk today, and you can please confirm it's working after that.

  11. Lance Willett
    Theme Wrangler
    Posted 4 months ago #

    Nope, I was wrong. :|

    But, if you really want to fix this in your version of the theme, you can apply some CSS like:

    p > iframe {
      max-width: none;
    }

    We can't apply it in the core theme since it'd break many other things.

    What's happening is the Instagram embed has a hard-coded height, so if you apply max-width: 100% it'll make the width be the correct value for the image, but not the iframe height itself, leaving a gap.

  12. patrickphotosuk
    Member
    Posted 4 months ago #

    Lance, thanks again for all your time and effort into this. It is much appreciated.

Reply

You must log in to post.

About this Topic