stevenschobert / instafeed.js

A simple Instagram JavaScript plugin for your website
https://instafeedjs.com
MIT License
3.51k stars 859 forks source link

Strange behavior with div in template #738

Open macuco-de opened 2 years ago

macuco-de commented 2 years ago

Hi there, I have a strange behavior when it comes to divs in template embedded into smarty:

{literal}
    <script type="text/javascript">
        var feed = new Instafeed({
          template: '<div class="col col-6 col-md-4 col-xl-3"><a href="{{link}}"><img class="img-responsive img-fluid" title="{{caption}}" src="{{image}}" /></a></div>',
        });
        feed.run();
    </script>
{/literal}

Output:

<div class="" id="instafeed">
  <div class="col col-6 col-md-4 col-xl-3">
    <a href="https://www.instagram.com/p/xxx/">
      <img class="img-responsive img-fluid" title="" src="https://scontent-muc2-1.cdninstagram.com/v/xxx.jpg">
    </a>
      <div class="col col-6 col-md-4 col-xl-3">
        <a href="https://www.instagram.com/p/xxx/"></a>
        <a href="https://www.instagram.com/p/yyy/">
          <img class="img-responsive img-fluid" title="" src="https://scontent-muc2-1.cdninstagram.com/yyy.jpg">
        </a>
     </div>
  </div>
</div>

It breaks the ending div and puts it at the end. Additionally there is another link to the first item.

However, when i wrap the template into lists, it seems to work:

template: '<li><div class="col col-6 col-md-4 col-xl-3"><a href="{{link}}"><img class="img-responsive img-fluid" title="{{caption}}" src="{{image}}" /></a></div></li>',

Output:

<div class="" id="instafeed">
  <li>
    <div class="col col-6 col-md-4 col-xl-3">
      <a href="https://www.instagram.com/p/xxx/">
        <img class="img-responsive img-fluid" title="" src="https://scontent-muc2-1.cdninstagram.com/v/xxx.jpg">
      </a>
    </div>
  </li>
  <li>
    <div class="col col-6 col-md-4 col-xl-3">
      <a href="https://www.instagram.com/p/yyy/">
        <img class="img-responsive img-fluid" title="" src="https://scontent-muc2-1.cdninstagram.com/v/yyy.jpg">
      </a>
    </div>
  </li>
</div>

Can you reproduce this? Cut out the unimportant things. I'm using the v2.0.0 instagram.min.js

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it hasn't had new comments in the last 3 months. It will be closed if no further activity occurs. If you still need assistance with this issue, or believe it shouldn't be closed, please respond with a new comment to let us know. Thank you all for your contributions.