Hello I am currently coding to photo gallery website and Im using the Smumug API to get all my pulbic albums+photos in the album to show up on the gallery and the issue is that for the gallery to show the albums Im getting the placeholder.jpg as the thunbnails and the second issue is when going into the albums the photo thunbnails are extremely blurry and ive been trying everything to get rid of the blurry from the thunbnails but when I click on the img to do the viewmodel box the img perfectly fine looking.
(I am fairly new to coding Javascript and using API’s most of the javascript involving the API is helped from using AI’s and if someone could help me fix this and also give me some references online to where to find more exmaples of JS being used for API calling and how if im having issues where I can go to find the solution instead of using AI)
JavaScript Code:
`async loadAlbums() {
try {
this.isLoading = true;
this.updateLoadingState();
const response = await
axios.get('https://api.smugmug.com/api/v2/user/jdstudiophotography!albums', {
params: {
APIKey: this.API_KEY,
count: 100,
_expand: 'HighlightImage,HighlightImage.ImageSizes'
},
headers: {
'Accept': 'application/json',
'X-Smug-Version': 'v2'
}
});
if (!response.data.Response || !response.data.Response.Album) {
throw new Error('Invalid albums response');
}
this.albums = response.data.Response.Album.map(album => {
let coverImage = './images/albums/placeholder.jpg';
// In loadAlbums method, update the coverImage selection in the map
function:
coverImage = '';
if (album.HighlightImage && album.HighlightImage.ImageSizes) {
const imageSizes = album.HighlightImage.ImageSizes;
coverImage = imageSizes.LargeImageUrl ||
imageSizes.MediumImageUrl ||
imageSizes.SmallImageUrl ||
album.HighlightImage.ThumbnailUrl;
}
return {
id: album.AlbumKey,
title: album.Title || 'Untitled Album',
imageCount: album.ImageCount || 0,
coverImage
};
});
this.isLoading = false;
this.renderAlbums();
} catch (error) {
console.error('Error loading albums:', error);
this.isLoading = false;
this.updateLoadingState('Error loading albums.');
}
}`
`async loadAlbumImages(albumId) {
try {
this.isLoading = true;
this.updateLoadingState();
const response = await
axios.get(`https://api.smugmug.com/api/v2/album/${albumId}!images`, {
params: {
APIKey: this.API_KEY,
count: 100,
_expand: 'ImageSizes'
},
headers: {
'Accept': 'application/json',
'X-Smug-Version': 'v2',
'X-Smug-ResponseType': 'JSON'
}
});
if (!response.data.Response || !response.data.Response.AlbumImage) {
throw new Error('Invalid album images response structure');
}
const images = response.data.Response.AlbumImage.map(image => {
const imageSizes = image.ImageSizes || {};
return {
id: image.ImageKey,
title: image.Title || image.FileName,
thumbnail: imageSizes.MediumImageUrl ||
imageSizes.SmallImageUrl ||
image.ThumbnailUrl,
// Keeps medium URL for grid view
mediumUrl: imageSizes.MediumImageUrl ||
imageSizes.SmallImageUrl ||
image.ThumbnailUrl,
// Keeps original for maximum quality when needed
originalUrl: image.OriginalUrl || image.ArchivedUri
};
});
this.currentImages = images;
this.isLoading = false;
this.renderImages();
} catch (error) {
console.error('Error loading album images:', error);
this.isLoading = false;
this.updateLoadingState('Error loading album images. Please try again
later.');
}
}`
`renderImages() {
const container = document.querySelector(‘.grid-albums’);
container.innerHTML = ”;
const placeholder = './images/albums/placeholder.jpg';
this.currentImages.forEach((image, index) => {
const imageElement = document.createElement('div');
imageElement.className = 'image-card';
imageElement.innerHTML = `
<div class="image-thumbnail">
<img src="${image.thumbnail || placeholder}" alt="${image.title}"
loading="lazy"
onerror="this.onerror=null; this.src='${placeholder}';">
<div class="image-info">
<h3>${image.title}</h3>
</div>
</div>
`;
imageElement.addEventListener('click', () => {
this.showLightbox(image, index);
});
container.appendChild(imageElement);
});
}`
`renderAlbums() {
const container = document.querySelector(‘.grid-albums’);
container.innerHTML = ”; // Clear the container
const placeholder = './images/albums/placeholder.jpg';
this.albums.forEach(album => {
const albumElement = document.createElement('div');
albumElement.className = 'album-card';
albumElement.innerHTML = `
<div class="album-thumbnail">
<img src="${album.coverImage || placeholder}" alt="${album.title}"
loading="lazy"
onerror="this.onerror=null; this.src='${placeholder}';">
<div class="album-info">
<h3>${album.title}</h3>
<p>${album.imageCount} photos</p>
</div>
</div>
`;
albumElement.addEventListener('click', () => {
window.location.href = `gallery.html?albumId=${album.id}`;
});
container.appendChild(albumElement);
});
}`
Img Blurry
Gallery Album Thumbnail
I attemped to have the code where it gets all the sizes for the albums thunbnail and if Smugmug has any highligh imgs saved to also reterive that information and go from the biggest size to smallest and if all of those fail that it will as the final use the placeholder.jpg but im still getting that placeholder.jpg and the same was from the actual imgs in the album but the imgs thumbnail are still blurry
