Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Strange behavior with div in template #738

Open
macuco-de opened this issue Jan 25, 2022 · 1 comment
Open

Strange behavior with div in template #738

macuco-de opened this issue Jan 25, 2022 · 1 comment
Labels
stale Issues that have been inactive for 90 days or more

Comments

@macuco-de
Copy link

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
Copy link

stale bot commented Apr 27, 2022

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.

@stale stale bot added the stale Issues that have been inactive for 90 days or more label Apr 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stale Issues that have been inactive for 90 days or more
Projects
None yet
Development

No branches or pull requests

1 participant