Instagram Feed - Version 1.3.10

Version Description

  • Fix: Fixed an issue which was setting the visibility of some photos to be hidden in certain browsers
  • Fix: The new square photo cropping is no longer being applied to feeds displaying images at less than 150px wide as the images from Instagram at this size are already square cropped
  • Fix: Fixed a JavaScript error in Internet Explorer 8 caused by the 'addEventListener' function not being supported
Download this release

Release Info

Developer smashballoon
Plugin Icon 128x128 Instagram Feed
Version 1.3.10
Comparing to
See all releases

Code changes from version 1.3.9 to 1.3.10

Files changed (3) hide show
  1. README.txt +6 -1
  2. instagram-feed.php +4 -6
  3. js/sb-instagram.js +29 -22
README.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: smashballoon
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
Requires at least: 3.0
5
Tested up to: 4.3.1
6
- Stable tag: 1.3.9
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
@@ -186,6 +186,11 @@ For more FAQs related to the Instagram Feed plugin please visit the [FAQ section
186
7. The Instagram Feed plugin Settings pages
187
188
== Changelog ==
189
= 1.3.9 =
190
* Fix: Fixed an issue where photos wouldn't appear in the Instagram feed if it was initially being hidden inside of a tab or some other element
191
* Fix: Fixed an issue where the new image cropping fuction was failing to run on some sites and causing the images to appear as blank
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram plugin, Instagram stream, Custom Instagram Feed, responsive Instagram, mobile Instagram, Instagram posts, Instagram wall, Instagram account
4
Requires at least: 3.0
5
Tested up to: 4.3.1
6
+ Stable tag: 1.3.10
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
186
7. The Instagram Feed plugin Settings pages
187
188
== Changelog ==
189
+ = 1.3.10 =
190
+ * Fix: Fixed an issue which was setting the visibility of some photos to be hidden in certain browsers
191
+ * Fix: The new square photo cropping is no longer being applied to feeds displaying images at less than 150px wide as the images from Instagram at this size are already square cropped
192
+ * Fix: Fixed a JavaScript error in Internet Explorer 8 caused by the 'addEventListener' function not being supported
193
+
194
= 1.3.9 =
195
* Fix: Fixed an issue where photos wouldn't appear in the Instagram feed if it was initially being hidden inside of a tab or some other element
196
* Fix: Fixed an issue where the new image cropping fuction was failing to run on some sites and causing the images to appear as blank
instagram-feed.php CHANGED
@@ -3,7 +3,7 @@
3
Plugin Name: Instagram Feed
4
Plugin URI: http://smashballoon.com/instagram-feed
5
Description: Display beautifully clean, customizable, and responsive Instagram feeds
6
- Version: 1.3.9
7
Author: Smash Balloon
8
Author URI: http://smashballoon.com/
9
License: GPLv2 or later
@@ -22,7 +22,7 @@ along with this program; if not, write to the Free Software
22
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
23
*/
24
25
- define( 'SBIVER', '1.3.9' );
26
27
//Include admin
28
include dirname( __FILE__ ) .'/instagram-feed-admin.php';
@@ -145,7 +145,7 @@ function display_instagram($atts, $content = null) {
145
$sb_instagram_content = '<div id="sb_instagram" class="sbi' . $sbi_class . $sb_instagram_disable_mobile;
146
if ( !empty($sb_instagram_height) ) $sb_instagram_content .= ' sbi_fixed_height ';
147
$sb_instagram_content .= ' sbi_col_' . trim($sb_instagram_cols);
148
- $sb_instagram_content .= '" '.$sb_instagram_styles .' data-id="' . $sb_instagram_user_id . '" data-num="' . trim($atts['num']) . '" data-res="' . trim($atts['imageres']) . '" data-cols="' . trim($sb_instagram_cols) . '" data-options=\'{&quot;sortby&quot;: &quot;'.$atts['sortby'].'&quot;, &quot;headercolor&quot;: &quot;'.$sb_instagram_header_color.'&quot;}\'>';
149
150
//Header
151
if( $sb_instagram_show_header ) $sb_instagram_content .= '<div class="sb_instagram_header" style="padding: '.(2*intval($sb_instagram_image_padding)) . $sb_instagram_image_padding_unit .'; padding-bottom: 0;"></div>';
@@ -278,9 +278,7 @@ function sb_instagram_custom_js() {
278
if( !empty($sb_instagram_custom_js) ) echo "});";
279
if( !empty($sb_instagram_custom_js) ) echo "\r\n";
280
if( !empty($sb_instagram_custom_js) ) echo '</script>';
281
- if( !empty($sb_instagram_custom_js) ) echo "\r\n";
282
-
283
-
284
}
285
286
//Run function on plugin activate
3
Plugin Name: Instagram Feed
4
Plugin URI: http://smashballoon.com/instagram-feed
5
Description: Display beautifully clean, customizable, and responsive Instagram feeds
6
+ Version: 1.3.10
7
Author: Smash Balloon
8
Author URI: http://smashballoon.com/
9
License: GPLv2 or later
22
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
23
*/
24
25
+ define( 'SBIVER', '1.3.10' );
26
27
//Include admin
28
include dirname( __FILE__ ) .'/instagram-feed-admin.php';
145
$sb_instagram_content = '<div id="sb_instagram" class="sbi' . $sbi_class . $sb_instagram_disable_mobile;
146
if ( !empty($sb_instagram_height) ) $sb_instagram_content .= ' sbi_fixed_height ';
147
$sb_instagram_content .= ' sbi_col_' . trim($sb_instagram_cols);
148
+ $sb_instagram_content .= '" '.$sb_instagram_styles .' data-id="' . $sb_instagram_user_id . '" data-num="' . trim($atts['num']) . '" data-res="' . trim($atts['imageres']) . '" data-cols="' . trim($sb_instagram_cols) . '" data-options=\'{&quot;sortby&quot;: &quot;'.$atts['sortby'].'&quot;, &quot;headercolor&quot;: &quot;'.$sb_instagram_header_color.'&quot;, &quot;imagepadding&quot;: &quot;'.$sb_instagram_image_padding.'&quot;}\'>';
149
150
//Header
151
if( $sb_instagram_show_header ) $sb_instagram_content .= '<div class="sb_instagram_header" style="padding: '.(2*intval($sb_instagram_image_padding)) . $sb_instagram_image_padding_unit .'; padding-bottom: 0;"></div>';
278
if( !empty($sb_instagram_custom_js) ) echo "});";
279
if( !empty($sb_instagram_custom_js) ) echo "\r\n";
280
if( !empty($sb_instagram_custom_js) ) echo '</script>';
281
+ if( !empty($sb_instagram_custom_js) ) echo "\r\n";
282
}
283
284
//Run function on plugin activate
js/sb-instagram.js CHANGED
@@ -144,24 +144,26 @@ if(!sbi_js_exists){
144
// Call Custom JS if it exists
145
if (typeof sbi_custom_js == 'function') setTimeout(function(){ sbi_custom_js(); }, 100);
146
147
- //This needs to be here otherwise it results in the following error for some sites: $self.find(...).sbi_imgLiquid() is not a function.
148
- /*! imgLiquid v0.9.944 / 03-05-2013 https://github.com/karacas/imgLiquid */
149
- var sbi_imgLiquid=sbi_imgLiquid||{VER:"0.9.944"};sbi_imgLiquid.bgs_Available=!1,sbi_imgLiquid.bgs_CheckRunned=!1,sbi_imgLiquid.injectCss="#sb_instagram .sbi_photo img {visibility:hidden !important}",function(i){function t(){if(!sbi_imgLiquid.bgs_CheckRunned){sbi_imgLiquid.bgs_CheckRunned=!0;var t=i('<span style="background-size:cover" />');i("body").append(t),!function(){var i=t[0];if(i&&window.getComputedStyle){var e=window.getComputedStyle(i,null);e&&e.backgroundSize&&(sbi_imgLiquid.bgs_Available="cover"===e.backgroundSize)}}(),t.remove()}}i.fn.extend({sbi_imgLiquid:function(e){this.defaults={fill:!0,verticalAlign:"center",horizontalAlign:"center",useBackgroundSize:!0,useDataHtmlAttr:!0,responsive:!0,delay:0,fadeInTime:0,removeBoxBackground:!0,hardPixels:!0,responsiveCheckTime:500,timecheckvisibility:500,onStart:null,onFinish:null,onItemStart:null,onItemFinish:null,onItemError:null},t();var a=this;return this.options=e,this.settings=i.extend({},this.defaults,this.options),this.settings.onStart&&this.settings.onStart(),this.each(function(t){function e(){-1===u.css("background-image").indexOf(encodeURI(c.attr("src")))&&u.css({"background-image":'url("'+encodeURI(c.attr("src"))+'")'}),u.css({"background-size":g.fill?"cover":"contain","background-position":(g.horizontalAlign+" "+g.verticalAlign).toLowerCase(),"background-repeat":"no-repeat"}),i("a:first",u).css({display:"block",width:"100%",height:"100%"}),i("img",u).css({display:"none"}),g.onItemFinish&&g.onItemFinish(t,u,c),u.addClass("sbi_imgLiquid_bgSize"),u.addClass("sbi_imgLiquid_ready"),l()}function o(){function e(){c.data("sbi_imgLiquid_error")||c.data("sbi_imgLiquid_loaded")||c.data("sbi_imgLiquid_oldProcessed")||(u.is(":visible")&&c[0].complete&&c[0].width>0&&c[0].height>0?(c.data("sbi_imgLiquid_loaded",!0),setTimeout(r,t*g.delay)):setTimeout(e,g.timecheckvisibility))}if(c.data("oldSrc")&&c.data("oldSrc")!==c.attr("src")){var a=c.clone().removeAttr("style");return a.data("sbi_imgLiquid_settings",c.data("sbi_imgLiquid_settings")),c.parent().prepend(a),c.remove(),c=a,c[0].width=0,void setTimeout(o,10)}return c.data("sbi_imgLiquid_oldProcessed")?void r():(c.data("sbi_imgLiquid_oldProcessed",!1),c.data("oldSrc",c.attr("src")),i("img:not(:first)",u).css("display","none"),u.css({overflow:"hidden"}),c.fadeTo(0,0).removeAttr("width").removeAttr("height").css({visibility:"visible","max-width":"none","max-height":"none",width:"auto",height:"auto",display:"block"}),c.on("error",n),c[0].onerror=n,e(),void d())}function d(){(g.responsive||c.data("sbi_imgLiquid_oldProcessed"))&&c.data("sbi_imgLiquid_settings")&&(g=c.data("sbi_imgLiquid_settings"),u.actualSize=u.get(0).offsetWidth+u.get(0).offsetHeight/1e4,u.sizeOld&&u.actualSize!==u.sizeOld&&r(),u.sizeOld=u.actualSize,setTimeout(d,g.responsiveCheckTime))}function n(){c.data("sbi_imgLiquid_error",!0),u.addClass("sbi_imgLiquid_error"),g.onItemError&&g.onItemError(t,u,c),l()}function s(){var i={};if(a.settings.useDataHtmlAttr){var t=u.attr("data-sbi_imgLiquid-fill"),e=u.attr("data-sbi_imgLiquid-horizontalAlign"),o=u.attr("data-sbi_imgLiquid-verticalAlign");("true"===t||"false"===t)&&(i.fill=Boolean("true"===t)),void 0===e||"left"!==e&&"center"!==e&&"right"!==e&&-1===e.indexOf("%")||(i.horizontalAlign=e),void 0===o||"top"!==o&&"bottom"!==o&&"center"!==o&&-1===o.indexOf("%")||(i.verticalAlign=o)}return sbi_imgLiquid.isIE&&a.settings.ieFadeInDisabled&&(i.fadeInTime=0),i}function r(){var i,e,a,o,d,n,s,r,m=0,h=0,f=u.width(),v=u.height();void 0===c.data("owidth")&&c.data("owidth",c[0].width),void 0===c.data("oheight")&&c.data("oheight",c[0].height),g.fill===f/v>=c.data("owidth")/c.data("oheight")?(i="100%",e="auto",a=Math.floor(f),o=Math.floor(f*(c.data("oheight")/c.data("owidth")))):(i="auto",e="100%",a=Math.floor(v*(c.data("owidth")/c.data("oheight"))),o=Math.floor(v)),d=g.horizontalAlign.toLowerCase(),s=f-a,"left"===d&&(h=0),"center"===d&&(h=.5*s),"right"===d&&(h=s),-1!==d.indexOf("%")&&(d=parseInt(d.replace("%",""),10),d>0&&(h=s*d*.01)),n=g.verticalAlign.toLowerCase(),r=v-o,"left"===n&&(m=0),"center"===n&&(m=.5*r),"bottom"===n&&(m=r),-1!==n.indexOf("%")&&(n=parseInt(n.replace("%",""),10),n>0&&(m=r*n*.01)),g.hardPixels&&(i=a,e=o),c.css({width:i,height:e,"margin-left":Math.floor(h),"margin-top":Math.floor(m)}),c.data("sbi_imgLiquid_oldProcessed")||(c.fadeTo(g.fadeInTime,1),c.data("sbi_imgLiquid_oldProcessed",!0),g.removeBoxBackground&&u.css("background-image","none"),u.addClass("sbi_imgLiquid_nobgSize"),u.addClass("sbi_imgLiquid_ready")),g.onItemFinish&&g.onItemFinish(t,u,c),l()}function l(){t===a.length-1&&a.settings.onFinish&&a.settings.onFinish()}var g=a.settings,u=i(this),c=i("img:first",u);return c.length?(c.data("sbi_imgLiquid_settings")?(u.removeClass("sbi_imgLiquid_error").removeClass("sbi_imgLiquid_ready"),g=i.extend({},c.data("sbi_imgLiquid_settings"),a.options)):g=i.extend({},a.settings,s()),c.data("sbi_imgLiquid_settings",g),g.onItemStart&&g.onItemStart(t,u,c),void(sbi_imgLiquid.bgs_Available&&g.useBackgroundSize?e():o())):void n()})}})}(jQuery);
150
-
151
- // Use imagefill to set the images as backgrounds so they can be square
152
- !function () {
153
- var css = sbi_imgLiquid.injectCss,
154
- head = document.getElementsByTagName('head')[0],
155
- style = document.createElement('style');
156
- style.type = 'text/css';
157
- if (style.styleSheet) {
158
- style.styleSheet.cssText = css;
159
- } else {
160
- style.appendChild(document.createTextNode(css));
161
- }
162
- head.appendChild(style);
163
- }();
164
- $self.find(".sbi_photo").sbi_imgLiquid({fill:true});
165
166
//Only check the width once the resize event is over
167
var sbi_delay = (function(){
@@ -172,8 +174,7 @@ if(!sbi_js_exists){
172
};
173
})();
174
175
- // jQuery(window).resize(function() {
176
- window.addEventListener('resize', function(event){
177
sbi_delay(function(){
178
sbiSetPhotoHeight();
179
sbiGetItemSize();
@@ -182,8 +183,14 @@ if(!sbi_js_exists){
182
183
//Resize image height
184
function sbiSetPhotoHeight(){
185
- var sbi_photo_width = $self.find('.sbi_photo').eq(0).innerWidth();
186
- $self.find('.sbi_photo').css('height', sbi_photo_width);
187
}
188
sbiSetPhotoHeight();
189
144
// Call Custom JS if it exists
145
if (typeof sbi_custom_js == 'function') setTimeout(function(){ sbi_custom_js(); }, 100);
146
147
+ if( imgRes !== 'thumbnail' ){
148
+ //This needs to be here otherwise it results in the following error for some sites: $self.find(...).sbi_imgLiquid() is not a function.
149
+ /*! imgLiquid v0.9.944 / 03-05-2013 https://github.com/karacas/imgLiquid */
150
+ var sbi_imgLiquid=sbi_imgLiquid||{VER:"0.9.944"};sbi_imgLiquid.bgs_Available=!1,sbi_imgLiquid.bgs_CheckRunned=!1,function(i){function t(){if(!sbi_imgLiquid.bgs_CheckRunned){sbi_imgLiquid.bgs_CheckRunned=!0;var t=i('<span style="background-size:cover" />');i("body").append(t),!function(){var i=t[0];if(i&&window.getComputedStyle){var e=window.getComputedStyle(i,null);e&&e.backgroundSize&&(sbi_imgLiquid.bgs_Available="cover"===e.backgroundSize)}}(),t.remove()}}i.fn.extend({sbi_imgLiquid:function(e){this.defaults={fill:!0,verticalAlign:"center",horizontalAlign:"center",useBackgroundSize:!0,useDataHtmlAttr:!0,responsive:!0,delay:0,fadeInTime:0,removeBoxBackground:!0,hardPixels:!0,responsiveCheckTime:500,timecheckvisibility:500,onStart:null,onFinish:null,onItemStart:null,onItemFinish:null,onItemError:null},t();var a=this;return this.options=e,this.settings=i.extend({},this.defaults,this.options),this.settings.onStart&&this.settings.onStart(),this.each(function(t){function e(){-1===u.css("background-image").indexOf(encodeURI(c.attr("src")))&&u.css({"background-image":'url("'+encodeURI(c.attr("src"))+'")'}),u.css({"background-size":g.fill?"cover":"contain","background-position":(g.horizontalAlign+" "+g.verticalAlign).toLowerCase(),"background-repeat":"no-repeat"}),i("a:first",u).css({display:"block",width:"100%",height:"100%"}),i("img",u).css({display:"none"}),g.onItemFinish&&g.onItemFinish(t,u,c),u.addClass("sbi_imgLiquid_bgSize"),u.addClass("sbi_imgLiquid_ready"),l()}function o(){function e(){c.data("sbi_imgLiquid_error")||c.data("sbi_imgLiquid_loaded")||c.data("sbi_imgLiquid_oldProcessed")||(u.is(":visible")&&c[0].complete&&c[0].width>0&&c[0].height>0?(c.data("sbi_imgLiquid_loaded",!0),setTimeout(r,t*g.delay)):setTimeout(e,g.timecheckvisibility))}if(c.data("oldSrc")&&c.data("oldSrc")!==c.attr("src")){var a=c.clone().removeAttr("style");return a.data("sbi_imgLiquid_settings",c.data("sbi_imgLiquid_settings")),c.parent().prepend(a),c.remove(),c=a,c[0].width=0,void setTimeout(o,10)}return c.data("sbi_imgLiquid_oldProcessed")?void r():(c.data("sbi_imgLiquid_oldProcessed",!1),c.data("oldSrc",c.attr("src")),i("img:not(:first)",u).css("display","none"),u.css({overflow:"hidden"}),c.fadeTo(0,0).removeAttr("width").removeAttr("height").css({visibility:"visible","max-width":"none","max-height":"none",width:"auto",height:"auto",display:"block"}),c.on("error",n),c[0].onerror=n,e(),void d())}function d(){(g.responsive||c.data("sbi_imgLiquid_oldProcessed"))&&c.data("sbi_imgLiquid_settings")&&(g=c.data("sbi_imgLiquid_settings"),u.actualSize=u.get(0).offsetWidth+u.get(0).offsetHeight/1e4,u.sizeOld&&u.actualSize!==u.sizeOld&&r(),u.sizeOld=u.actualSize,setTimeout(d,g.responsiveCheckTime))}function n(){c.data("sbi_imgLiquid_error",!0),u.addClass("sbi_imgLiquid_error"),g.onItemError&&g.onItemError(t,u,c),l()}function s(){var i={};if(a.settings.useDataHtmlAttr){var t=u.attr("data-sbi_imgLiquid-fill"),e=u.attr("data-sbi_imgLiquid-horizontalAlign"),o=u.attr("data-sbi_imgLiquid-verticalAlign");("true"===t||"false"===t)&&(i.fill=Boolean("true"===t)),void 0===e||"left"!==e&&"center"!==e&&"right"!==e&&-1===e.indexOf("%")||(i.horizontalAlign=e),void 0===o||"top"!==o&&"bottom"!==o&&"center"!==o&&-1===o.indexOf("%")||(i.verticalAlign=o)}return sbi_imgLiquid.isIE&&a.settings.ieFadeInDisabled&&(i.fadeInTime=0),i}function r(){var i,e,a,o,d,n,s,r,m=0,h=0,f=u.width(),v=u.height();void 0===c.data("owidth")&&c.data("owidth",c[0].width),void 0===c.data("oheight")&&c.data("oheight",c[0].height),g.fill===f/v>=c.data("owidth")/c.data("oheight")?(i="100%",e="auto",a=Math.floor(f),o=Math.floor(f*(c.data("oheight")/c.data("owidth")))):(i="auto",e="100%",a=Math.floor(v*(c.data("owidth")/c.data("oheight"))),o=Math.floor(v)),d=g.horizontalAlign.toLowerCase(),s=f-a,"left"===d&&(h=0),"center"===d&&(h=.5*s),"right"===d&&(h=s),-1!==d.indexOf("%")&&(d=parseInt(d.replace("%",""),10),d>0&&(h=s*d*.01)),n=g.verticalAlign.toLowerCase(),r=v-o,"left"===n&&(m=0),"center"===n&&(m=.5*r),"bottom"===n&&(m=r),-1!==n.indexOf("%")&&(n=parseInt(n.replace("%",""),10),n>0&&(m=r*n*.01)),g.hardPixels&&(i=a,e=o),c.css({width:i,height:e,"margin-left":Math.floor(h),"margin-top":Math.floor(m)}),c.data("sbi_imgLiquid_oldProcessed")||(c.fadeTo(g.fadeInTime,1),c.data("sbi_imgLiquid_oldProcessed",!0),g.removeBoxBackground&&u.css("background-image","none"),u.addClass("sbi_imgLiquid_nobgSize"),u.addClass("sbi_imgLiquid_ready")),g.onItemFinish&&g.onItemFinish(t,u,c),l()}function l(){t===a.length-1&&a.settings.onFinish&&a.settings.onFinish()}var g=a.settings,u=i(this),c=i("img:first",u);return c.length?(c.data("sbi_imgLiquid_settings")?(u.removeClass("sbi_imgLiquid_error").removeClass("sbi_imgLiquid_ready"),g=i.extend({},c.data("sbi_imgLiquid_settings"),a.options)):g=i.extend({},a.settings,s()),c.data("sbi_imgLiquid_settings",g),g.onItemStart&&g.onItemStart(t,u,c),void(sbi_imgLiquid.bgs_Available&&g.useBackgroundSize?e():o())):void n()})}})}(jQuery);
151
+
152
+ // Use imagefill to set the images as backgrounds so they can be square
153
+ !function () {
154
+ var css = sbi_imgLiquid.injectCss,
155
+ head = document.getElementsByTagName('head')[0],
156
+ style = document.createElement('style');
157
+ style.type = 'text/css';
158
+ if (style.styleSheet) {
159
+ style.styleSheet.cssText = css;
160
+ } else {
161
+ style.appendChild(document.createTextNode(css));
162
+ }
163
+ head.appendChild(style);
164
+ }();
165
+ $self.find(".sbi_photo").sbi_imgLiquid({fill:true});
166
+ } // End: ( imgRes !== 'thumbnail' ) check
167
168
//Only check the width once the resize event is over
169
var sbi_delay = (function(){
174
};
175
})();
176
177
+ jQuery(window).resize(function(){
178
sbi_delay(function(){
179
sbiSetPhotoHeight();
180
sbiGetItemSize();
183
184
//Resize image height
185
function sbiSetPhotoHeight(){
186
+ if( imgRes !== 'thumbnail' ){
187
+ var sbi_photo_width = $self.find('.sbi_photo').eq(0).innerWidth();
188
+
189
+ //If the width is 0 then figure it out using the number of cols
190
+ if( sbi_photo_width < 1 ) sbi_photo_width = ($self.find('#sbi_images').width() / parseInt(cols)) - (feedOptions.imagepadding*2);
191
+
192
+ $self.find('.sbi_photo').css('height', sbi_photo_width);
193
+ }
194
}
195
sbiSetPhotoHeight();
196