Как динамически отображать изображения на основе щелчков кнопок в Umbraco v13? ⇐ Html

[Anonymous]

Контекст:

• Я работаю над проектом Umbraco v13, и мне нужно реализовать функцию, позволяющую динамически нажимать на разные кнопки. отображает определенные изображения. Кнопки:
  
  Все
• Фестиваль
• Спорт
• Действия

[*]Изображения управляются через бэк-офис Umbraco и связаны с типами контента или типами документов. Цель – обновить отображаемые изображения на странице без перезагрузки всей страницы.

Что я пробовал:

• Настройте тип документа в Umbraco для управления изображениями и их категориями (например, «Фестиваль», «Спорт» и т. д.).
• Отрисовка кнопок в Razor с использованием данных CMS.
• Использовал JavaScript для фильтрации и отображения изображений в зависимости от динамического нажатия кнопки.

Проблема:
Делаем фильтрацию динамичной и эффективной для большого количества изображений. Обеспечение правильной работы установки со структурой данных и конфигурациями бэк-офиса Umbraco.
Вопрос:
Как я могу правильно реализовать события динамических кнопок в Umbraco v13 для фильтрации и отображения изображений на основе их категорий? Существуют ли какие-либо передовые методы или лучшие подходы для интеграции этой функции с Umbraco?
Пример кода:
Код просмотра Razor:

• All
• Activity
• Festival Celebration
• Sports

• 
• 
• 
• 
• 

'''
'''let elements = document.querySelectorAll('.img-gal');

// Iterate through each element
elements.forEach(el => {
const height = el.clientHeight;
const width = el.clientWidth;

el.addEventListener('mousemove', handleMove);

function handleMove(e) {
const xVal = e.layerX;
const yVal = e.layerY;

const yRotation = 20 * ((xVal - width / 2) / width);
const xRotation = -20 * ((yVal - height / 2) / height);

const string = 'perspective(500px) scale(1.01) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)';
el.style.transform = string;
}

el.addEventListener('mouseout', () => {
el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)';
});

el.addEventListener('mousedown', () => {
el.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)';
});

el.addEventListener('mouseup', () => {
el.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)';
});
});'''



Подробнее здесь: https://stackoverflow.com/questions/793 ... mbraco-v13