I've created a modal window that will show thumbnails for each of my Facebook albums. But the problem I'm having is when I fetch my album pictures with the Fb Graph API, the images are different sizes! So, while my modal window might be forcing a certain width for each thumbnail, the heights can vary according to the size of the picture returned. I can't correct this by forcing a max-height or min-height because it stretches and shrinks the pictures and they end up looking funny! I've been looking at fetching the album images with some type of parameter to 'square' the images or 'crop' the images but haven't had any luck. Any help would be greatly appreciated.
Here is the call to the Fb Graph API that I'v ebeen playing with in the graph explorer to try and force a standard size for each image.
'me?fields=id,name,albums{cover_photo,photo_count,picture,name}'
here are some failed attempts to make each picture equal.
me?fields=id,name,albums{cover_photo,photo_count,picture?type=square,name} me?fields=id,name,albums{cover_photo,photo_count,picture?type=thumbnail,name} me?fields=id,name,albums{cover_photo,photo_count,picture.height(200).width(200),name}
Here is my js code to fetch the album images and then put them into a modal window.
scope.getFbAlbumData = function(accessToken) {
var albumIds = [];
var columnCount = 0;
FB.api('me?fields=id,name,albums{cover_photo,photo_count,picture,name}', 'get', {
access_token: accessToken
}, function(response) {
if (response.error) {
yb.base.displayNotification('Oh no! Something went wrong. Please contact YogaBandy Help Desk', 'danger');
return false;
}
$('#uploadModal').on('hidden.bs.modal', function() {
var data = response.albums.data;
var rowContents = "";
$('#modalContainer').load(scope.enumControllers.getAlbumModal, function(response, status, xhr) {
for (var i = 0, l = data.length; i < l; i++) {
if (columnCount < 3) {
rowContents += "<div class=\"col-sm-4\" style=\"padding-right: 5px; padding-left: 5px;\"><div class=\"thumbnail\" data-albumid=\"" + data[i].id + "\"><img style=\"\" src=\"" + data[i].picture.data.url + "\" alt=\"...\" class=\"d\"><div class=\"caption\"><p class=\"album-title-name\">" + data[i].name + "</p><p>" + data[i].photo_count + " photos</p></div></div></div>";
columnCount++;
}
if (i == l || columnCount == 3 || i + 1 == l) {
$("#albumPicturesModalBody").append("<div class=\"row\">" + rowContents + "<\div>");
rowContents = "";
columnCount = 0;
}
}
$("#albumPicturesModal").modal('show');
});
});
$('#uploadModal').modal('hide');
});
}
Here is what the modal window looks like, you can see the images are different sizes.
I want the images to be more uniform like this!