Template tag doesn't work with IE

[ghost]

I'm trying to use Instafeed with Joomla. But when using

template: '<a href="{{link}}"><img src="{{image}}" /></a>'

in the code block, there a few strange behaviours that happen:

1. In IE, the images can't be displayed at all, and just display white icons with black Xs
2. The URLs display as http://mydomain.com/http://instagram.com/... causing the link to reload the index of my website.

I'm trying to add target="_blank" to the links, and saw this as the best way, but it's screwing up the markup.

What can I do to fix?

[stevenschobert]

Hey @leecollings.

Have you already checked out #41?

It could be that Joomla is treating the template syntax {{}} as variables in your theme, which would be causing the errors.

[ghost]

Hi Steven,

Thanks for linking that. It's a similar issue to mine, but I'm sure that
this isn't the cause in my issue, as if I show you some of the source code,
the values from Instafeed are being inserted, but they're having a slash added to the front of them.

So in the code I've got:

template: '<a href="{{link}}"><img src="{{image}}" /></a>'

And the output being generated from this is as such:

<div id="instafeed">

    <a href="/http://instagram.com/p/tXVIQZSqh5/">
        <img src="///

scontent-b.cdninstagram.com/hphotos-xaf1/t51.2885-15/10683921_1537411333159853_1384416909_s.jpg
">

So you can see it's working, but it seems an extra slash is being added at
the beginning of the URLs, which is then turning them into relative URLs in
Joomla.

Is there anything you'd suggest? PS, it would be really helpful if you were to answer a bit quicker. It's been over 24 hours since I raised this, and I've only ever had one response from you, which just isn't quick enough.

I really need this resolved, and would appreciate if you could respond faster, thank you.

Regards,
Lee

On Thu, Sep 25, 2014 at 2:25 PM, Steven Schobert notifications@github.com
wrote:

Hey @leecollings https://github.com/leecollings.

Have you already checked out #41
#41?

It could be that Joomla is treating the template syntax {{}} as variables
in your theme, which would be causing the errors.

—
Reply to this email directly or view it on GitHub
#169 (comment)
.

Regards,
Lee

www.leecollings.co
www.leecollingsmusic.com

[stevenschobert]

Ah, gotcha.

I could be mistaken, but I doubt that extra / at the beginning of the urls is coming from Instafeed. Is it possible that's something your theme, or another plugin you're using is causing that?

To test it out, try copying your exact settings into a CodePen, and see if you are experiencing the same bug.

[ghost]

I've just found out, yes it's having a conflict with System - SEF.

When i disable this plugin, the links from Instafeed appear fine, but the CSS styling of the site is entirely gone.

Is there anything you can do to ensure it's not conflicting with Joomla?

[filipe-torres]

I have the same problem with Joomla and solve it rewriting href attribute after page load:

<script type="text/javascript">
    jQuery(document).ready(function($){
        $(window).on('load',  function() {
            var link = $('#instafeed a');
            var errorHref = link.attr('href');
            var correctHref = errorHref.match(/http(.*)/g);
            link.attr('href',correctHref);
        });
    });
</script>

[Nikjoom]

Thank you filipe-torres.
I searched a long time for a solution.
On my website i have more Pictures and i solved this with a 'while':

<script type="text/javascript"> jQuery(document).ready(function($){ $(window).on('load', function() { var correktur = 0; while(correktur < 11) { var link = $('#instafeed img:eq('+correktur+')'); var errorHref = link.attr('src'); var correctHref = errorHref.match(/http(.*)/g); link.attr('src',correctHref); correktur++; } }); }); </script>

Maybe it will be helpfull if somebody have the same porblem :)

[stevenschobert]

@johndeffme Because errorHref is undefined, which means you can't call .match() on it.

Most likely, this is because you are running your code using $(window).on() instead of Instafeed's after option. When you do that, your code will run as soon as the document is loaded, and most likely before Instafeed has finished running, so $("#instagram a.animation") won't be present in the DOM yet.

Try moving your code to the after option:

var feed = new Instafeed({
  // other settings...
  after: function() {
    // put your custom code here
  }
});

Also in the future, please either open a new issue or try posting your questions to Stack Overflow first. Thanks!

[benjamin-hull]

Think this one is done?