Hello Again,
After lots of trial and error and research, I don’t know if this is possible (easily), but I figured I’d ask.
I have a list of medias pulled up by a shortcode in an HTML block:
[medias template_label="Audio/Visual" num=0 sort=foaf:lastName]
It pulls up everything that I wanted, but it has been requested to change the thumbnails to those of the parent item of the media. Since the parent item already has the image that we want, I was thinking I should be able to do it with a simple API query, but haven’t been able to figure it out.
At first, I tried to do an API query (in a tag in the same HTML block) that was supposed to start with /api/items, use the media’s item number to find the parent item to then reference the "o:primary media" for the parent item for the new image src. I didn’t have any luck using ?media= or ?media_id= and couldn’t find any other possible ways to say “Media ID”. This is what I was hoping would work:
document.addEventListener('DOMContentLoaded', async () => {
const items = document.querySelectorAll('.resource.media');
for (let item of items) {
const idMatch = item.querySelector('a').getAttribute('href').match(/\/media\/(\d+)/);
if (idMatch) {
const mediaID = idMatch[1];
try {
const response = await fetch(`/api/items?media=${mediaID}`); //instead of looking for the media that is associated with the item like in "Meet the People", we are now looking for the item associated with the media
const mediaItems = await response.json();
for (let mediaItem of mediaItems) {
if (mediaItem['o:ingester'] === 'upload') {
const mediaPrimary = mediaItem['o:source'];
}
}
} catch (error) {
console.error('Failed to fetch media items:', error);
// Handle the error appropriately
}
}
const itemThumb = item.querySelector('a img');
if (itemThumb) {
itemThumb.classList.add('item-thumbnail');
itemThumb.src = mediaPrimary;
}
...
The media listed under the /api/items also doesn’t list it’s resource class or template, so that option was out.
When trying to go through /api/media, I could find the parent item, but it didn’t lead to the media.
Maybe this would be possible with multiple API queries? But wouldn’t that slow the site down? Especially when there gets to be more information on it. But something like (in simplified terms):
/api/media/${mediaID} ? parent item=parentID
/api/items/${parentID} ? primary media of parent item = mediaPrimaryID
/api/media/${mediaPrimaryID} ? source = newThumbSRC
Can someone tell me if I am headed in the right direction, or if this is just a never-ending rabbit hole?