Okay
  Public Ticket #1460662
Overlapping Zig-Zag Gallery Images with Instagram embeds
Closed

Comments

  •  5
    Hnico started the conversation
    February 7, 2018 at 12:07pm

    Hi guys,

    I need your help with a huge problem.

    I'm using portfolio pages in ZigZag mode with HTML gallery items. The content is an instagram embed.

    Up until yesterday I was using the plugin "Simple Instagram Embed" and everything was working fine. Today the images were overlapping so I disabled and later deleted the plugin. Images were displaying correctly but smaller in size and with their caption showing, all of which looks cheap. 

    So I tried to substitute the simple url link that was there (the one that the plugin helped display full size with no caption) with the Instagram embed code. I copied the Instagram embed code in the source code of the content box for every HTML gallery item.

    Now images are overlapping (picture attached) like in this page http://www.keepexploringsardinia.com/portfolio/5-reasons-why-you-should-try-canyoning-in-sardinia/

    The weird thing is that not all of them overlap, only some. 

    Could you please have a look and tell me if there's some portfolio page option I need to change?

    Nico


  • [deleted] replied
    February 8, 2018 at 9:02am

    Hi Nico,

    I was checking this issue and I saw that the instagram widget was assigning "absolute" position to all its elements:


    (view large version)

    So I have added this Custom CSS:

    .portfolio-type-3 .zz-type-html .instagram-media {
    position: relative !important;
}

    And the instagram posts are looking fine:


     
    (view large version)

  •  5
    Hnico replied
    February 8, 2018 at 12:11pm

    Hi Arlind,

    Thanks a lot for looking into this.

    Instagram embeds seem to work as supposed for the ZigZag style. On the other hand portfolio pages on Columned style have overlapping embeds like this one http://www.keepexploringsardinia.com/portfolio/top-10-beaches-sardinia/ (picture attached)

    Do you think it's because I'm centering embeds with <div align="center"> instagram embed </div> ? 

    If that's the case, do you know any other way to center the embed? It's fine if they are centered everywhere on the website.


  • [deleted] replied
    February 9, 2018 at 8:33am

    Hi Nico,

    You can correct the previous CSS that I have sent you with this one:

    .portfolio-type-3 .zz-type-html .instagram-media,
    .post-formatting .instagram-media {
        position: relative !important;
    }

    And the images will not overlay on other pages as well:


    (view large version)

  •  5
    Hnico replied
    February 9, 2018 at 10:53pm

    Hi Arlind,

    Thank you very much, you saved my website and my whole endeavour. I really appreciate it

    Nico

  •  5
    Hnico replied
    February 10, 2018 at 7:36am

    Hi Arlind,

    By surfing the website now I noticed sometimes I get a picture missing, both in the columned portfolio pages and the zig zag ones - like in the screenshots attached.

    If I refresh the page the missing picture might be another one. It seems to be a random occurrence.

    Do you know how to avoid it and have them all show every time?

  • [deleted] replied
    February 13, 2018 at 8:19am

    Hi Nico,

    After debugging this issue I saw that right after you scroll down to the instagram picture it might take few seconds to load the image. This is related to the plugin you use for instagram media so I suggest you to consult with the plugin developer about this issue.

  •  5
    Hnico replied
    February 13, 2018 at 4:45pm

    Hi Arlind,

    Thank you for looking into this.

    I was unaware of using any plugin except Simple Instagram Plugin that I had deactivated some days ago. I have now deleted it.

    I stayed on the page(s) for a few minutes but the blacked out embeds do not load. Tried on mobile too to see if it's a problem of connection but I still get a grey line instead of the full picture. Is there any other plugin you are referring to?

    Kind Regards

    Nico

  • [deleted] replied
    February 14, 2018 at 10:17am

    Hi Nico,

    I saw this script being imported on your site:

    <script async="" defer="" src="//www.instagram.com/embed.js"></script>

    Can you try without async and defer attributes. Thats the only way, because the instagram embeds are being loaded with iframe, and initially the iframe height is not known so thats why that grey line is shown. You can set an initial height of these embeds with this CSS:

    .portfolio-type-3 .zz-type-html .instagram-media,
.post-formatting .instagram-media {
    height: 100px;
}

    But I don't know how it will work for you. These embeds are handled by Instagram embed JS so our theme doesn't handle anything related to this issue.

  •  5
    Hnico replied
    February 14, 2018 at 9:40pm

    Hi Arlind,

    I understand. I tried to set an initial height but it doesn't really work. I'll think about it.

    Thank you very much for taking the time to try and find a solution to this, I appreciate it a lot.

    Kind Regards

    Nico