Instagram social grid image quality

[ptrtjee]

Hi,

I notice the image quality of the Instagram social grid is not great. Other plugins seem to produce better results but I’d like to use the feature that came with the theme.
How can I improve the quality?

Check http://www.dev.quiffsandcollars.com at the bottom of the page (right above the footer) to see what I mean.
P.s. I am viewing this from a retina screen.

Best regards,
Peter

[Kyle – SUPPORT]

Hi

Open atelier/js/functions.js and edit like 4044:

instagrams.append("<li class='blog-item instagram-item "+itemClass+"' data-date='"+data.data[i].created_time+"'><a class='timestamp inst-icon' target='_blank' href='" + data.data[i].link +"'><i class='fa-instagram'></i></a><div class='inst-overlay'><a target='_blank' href='" + data.data[i].link +"'></a><h6>"+instagrams.data('title')+"</h6><h2>"+caption+"</h2><div class='name-divide'></div><data class='date timeago' title='"+data.data[i].created_time+"' value=''>"+data.data[i].created_time+"</data></div><img class='instagram-image' src='" + data.data[i].images.standard_resolution.url +"' width='306px' height='306px' /></li>");

The current dimensions are 306 x 306 (end of the line)

– Kyle

[ptrtjee]

Hi Kyle,

Unfortunately this does not seem to affect the quality of the feed. I set the width and height to 1080px to test if it worked.
I changed both the functions.js and the functions.min.js just to be sure.

Any other ideas?

Best regards,
Peter

[Kyle – SUPPORT]

Ok try this file instead:

themes/atelier/swift-framework/widgets/widget-instagram.php:

  105  	                						caption = data.data[i].caption.text;
  106  	                					}
  107: 	                					instagrams.append("<li class='instagram-item' data-date='"+data.data[i].created_time+"'><figure class='animated-overlay'><a target='_blank' href='" + data.data[i].link +"'></a><div class='img-wrap'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' width='306px' height='306px' /></div><figcaption><div class='thumb-info'><i class='fa-instagram'></i></div></figcaption></figure></li>");  
  108  	                				} 
  109  	                			}

– Kyle

[ptrtjee]

Unfortunately still no change; the same quality still.
Does it have anything to do with this rule? + data.data[i].images.low_resolution.url +. It asks for a low-resolution link. Perhaps that’s causing the poor quality of the feed.

[Kyle – SUPPORT]

I will check this with the developer for you

– Kyle

[ptrtjee]

I actually fixed it myself. 😀

In functions.js changing:

instagrams.append("<li class='blog-item col-sm-sf-5 instagram-item' data-date='"+data.data[i].created_time+"' data-sortid='"+i*2+"'><a class='timestamp inst-icon' target='_blank' href='" + data.data[i].link +"'><i class='fa-instagram'></i></a><div class='inst-img-wrap'><div class='inst-overlay'><a target='_blank' href='" + data.data[i].link +"'></a><h6>"+instagrams.data('title')+"</h6><h2>"+caption+"</h2><div class='name-divide'></div><data class='date timeago' title='"+data.data[i].created_time+"' value=''>"+data.data[i].created_time+"</data></div><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /></div></li>");

to:

instagrams.append("<li class='blog-item col-sm-sf-5 instagram-item' data-date='"+data.data[i].created_time+"' data-sortid='"+i*2+"'><a class='timestamp inst-icon' target='_blank' href='" + data.data[i].link +"'><i class='fa-instagram'></i></a><div class='inst-img-wrap'><div class='inst-overlay'><a target='_blank' href='" + data.data[i].link +"'></a><h6>"+instagrams.data('title')+"</h6><h2>"+caption+"</h2><div class='name-divide'></div><data class='date timeago' title='"+data.data[i].created_time+"' value=''>"+data.data[i].created_time+"</data></div><img class='instagram-image' src='" + data.data[i].images.standard_resolution.url +"' /></div></li>");

did the trick. Notice the change from low_resolution.url to standard_resolution.url in the last line.
I did the same low_resolution.url to standard_resolution.url change to functions.min.js and widget-instagram.php

A new theme update will most likely undo this change. Will it be implemented in future updates?

Best regards,
Peter

[Kyle – SUPPORT]

Ok great, I’ll pass this onto the developer however he likely went with the low res to improve page speed

– Kyle