flickr results in two images

[prtuson]

Flickr provides an iframe for its picture shows. The result is that a standard image is shown and then the iframe, i.e. the same picture twice.

On inspection, the getPhotoCode was using the url data to reference the image and then adding the html data is there is any.

I solved for this instance by changing the getPhotoCode so that is only uses the url data if there is no html data, see below.

I didn't want to push this as I have no way of carrying out a comprehensive test.

$.fn.oembed.getPhotoCode = function (url, oembedData) {
    var code;
    var alt = oembedData.title ? oembedData.title : '';
    alt += oembedData.author_name ? ' - ' + oembedData.author_name : '';
    alt += oembedData.provider_name ? ' - ' + oembedData.provider_name : '';

    if (oembedData.html) {
        code = "<div>" + oembedData.html + "</div>";
    } else if (oembedData.url) {
        code = '<div><a href="' + url + '" target=\'_blank\'><img src="' + oembedData.url + '" alt="' + alt + '"/></a></div>';
    } else if (oembedData.thumbnail_url) {
        var newURL = oembedData.thumbnail_url.replace('_s', '_b');
        code = '<div><a href="' + url + '" target=\'_blank\'><img src="' + newURL + '" alt="' + alt + '"/></a></div>';
    } else {
        code = '<div>Error loading this picture</div>';
    }

// if (oembedData.html) {
// code += "

" + oembedData.html + "

";
// }

    return code;
};

[ramandv]

Thanks @prtuson . For the same reason that not so much comprehensive test, the fix will be more specific only to Flickr. you can add the following code instead of patching the original library.

(function($){

    $.fn.oembed.getPhotoCode = function (url, oembedData) {
      var code;
      var alt = oembedData.title ? oembedData.title : '';
      alt += oembedData.author_name ? ' - ' + oembedData.author_name : '';
      alt += oembedData.provider_name ? ' - ' + oembedData.provider_name : '';

      if (oembedData.url) {
        if( oembedData.url.indexOf("flickr.com") == -1) {
          //for flickr dont add this, otherwise two images are getting shown
          code = '<div><a href="' + url + '" target=\'_blank\'><img src="' + oembedData.url + '" alt="' + alt + '"/></a></div>';
        }
      } else if (oembedData.thumbnail_url) {
        var newURL = oembedData.thumbnail_url.replace('_s', '_b');
        code = '<div><a href="' + url + '" target=\'_blank\'><img src="' + newURL + '" alt="' + alt + '"/></a></div>';
      } else {
        code = '<div>Error loading this picture</div>';
      }

      if (oembedData.html) {
        code += "<div>" + oembedData.html + "</div>";
      }

      return code;
    };

})(jQuery);